jQuery Plugin For Converting DIVs Into SVG Shapes - Shape Shifter

Shape Shifter is a jQuery plugin that allows you to easily convert divs into simple and fun SVG shapes.

Features:

• 15 built-in SVG shapes: hexagon, star, pentagon, eqTriangle (an equilateral triangle), rectangle (actually a square, because just in case), rhombus (an rotated square), heptagon (seven sides), octogon, nonagon, decagon, leftChevron, rightChevron, message, rTriangleLeft, rTriangleRight
• Allows to rotate the SVG shapes.
• Supports Image and Color fill.

Basic usage:

1. Add jQuery library and the jQuery Shape Shifter plugin into your document.

<script src="jquery.min.js"></script>
<script src="scripts/shapeshifter.js"></script>

2. Call the plugin on a DIV element to generate a default SVG shape (hexagon).

$('SELECTOR').shapeshifter();

3. Customize the SVG shape. Available shape names: hexagon, star, pentagon, eqTriangle, rectangle, rhombus, heptagon, octogon, nonagon, decagon, leftChevron, rightChevron, message, rTriangleLeft, rTriangleRight.

$('SELECTOR').shapeshifter({shape: "leftChevron"});

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

$('SELECTOR').shapeshifter({multiplier: 1.5});

5. 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.

$('SELECTOR').shapeshifter({fill: "#8BC34A"});
$('SELECTOR').shapeshifter({images/forestrun.gif});

6. 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".

$('SELECTOR').shapeshifter({
rotation: 20,
rotationOffset: "true"
});

---

This awesome jQuery plugin is developed by tynsoltys. For more Advanced Usages, please check the demo page or visit the official website.