Jazz up your website with Shapeshifter.js

Shapeshifter is a lightweight jQuery plugin which will add a modern touch to any website.

SVGs are quite popular these days due to the fact that they offer a lot of flexibility in terms of animation and interactivity. Not only SVGs are easy to manipulate but also they allow web designers to add a bit of untraditional and unique accents to their online projects.

Shapeshifter.js is a plugin that allows you to convert any div element to a simple and interesting SVG shape. It also allows you to customize the shapes, fills, sizes and rotation of the SVGs.

Have a look at the features below. You can see the demo and download the plugin below.

Shapes

shapeshifter-shapes
Currently, there are 15 shapes to choose from. Adding stars, rectangles, hexagons, triangles and much more complex shapes is very easy.

Sizes

shapeshifter-sizing
You can use the default multiplier with the value of 1 which will give you a shape with the size of 100px by 100px. Changing the value to create a smaller or bigger shape.

Fills

shapeshifter-fills

For the fills, you have a few options here. You can either choose to use solid colours, background images and also animated gifs. Solid colours can be added as HEX, RGB or any other CSS color value. To use a static image or animamated gif, you should pass the file path relative to the main page in fillimage option to use any of the chosen one.

Related post:  S Gallery: A responsive jQuery gallery plugin with CSS3 animations

Rotation

shapeshifter-rotation

Rotating SCG shapes is really easy by using the rotation option and passing degrees to it as a number. One important feature is the face that you can offset the text and make it horizontal while rotating the shape. You should set the rotationOffset to true.


Download Shapeshifter.js DEMO

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close