a simple svg shape maker

Shapeshifter.js allows you to easily convert divs into simple and fun SVG shapes!

Customize your name with the following options:

shapes
|
sizing
|
fills
|
rotations

shapes

hexagon

star

pentagon

eqTriangle

rectangle

rhombus

heptagon

octogon

nonagon

decagon

leftChevron

rightChevron

message

rTriangleLeft

rTriangleRight

use any of the above shape names in the shape property.

sizing

0.5

1

2

3

At the default multiplier value of 1, shapes are 100px x 100px. Change the value to change the size!

fills

solid colour

static image

animated .gif

Set the fill to any hex, rgb, or other standard CSS colour value for a solid colour. To use an image or a .gif, pass the file path relative to the main page in the fillImage option to use either! Note: fillImage will override any fill. So simply don't include it if you want to use a plain colour fill!

rotation

rotation only

rotationOffset

180 degrees + rotationOffset

Rotate the shape using the rotation option, and passing degrees to it as a number. To offset the text (make it horizontal again), set the rotationOffset to "true". (Yes, in a string.)