jQuery Plugin For Converting DIVs Into SVG Shapes - Shape Shifter

jQuery Plugin For Converting DIVs Into SVG Shapes - Shape Shifter
File Size: 10.9 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.