Animated Triangle Pattern With jQuery And SVG - svgTrianglePattern

File Size: 5.67 KB
Views Total: 2345
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Animated Triangle Pattern With jQuery And SVG - svgTrianglePattern

svgTrianglePattern is a small jQuery plugin to create SVG based triangle/polygon pattern that is easy to animate using CSS3 transitions.

How to use it:

1. Create an empty <svg> element on the page.

<svg width="100%" height="100%"></svg>

2. Insert the necessary jQuery library and svgTriangles.jquery.js script into the html.

<script src="" 
<script src="js/svgTriangles.jquery.js"></script>

3. Call the function to generate a basic triangle/polygon pattern.


4. Style & animate the triangle/polygon pattern using CSS/CSS3.

svg polygon {
  fill: white;
  stroke: white;

svg polygon {
  fill: white;
  -webkit-transition: all 1s; /* Safari */
  transition: all 1s;

svg polygon,
svg {
  opacity: 0;

svg polygon.on {
  opacity: 1;

5. Set the height/width of the SVG triangles.

  // default: size: {w: 50, h: 50}
  size: {
    w: 150, 
    h: 150


6. Randomly switch class to new.


7. Adjust the switch speed.

  speed: 5


8. Default CSS classes.

  className: 'off',
  classNameOn: 'on',
  classNameTmp: 'tmp'


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