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.


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


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.



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.



Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

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

You may also like...

Leave a Reply

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