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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/svgTriangles.jquery.js"></script>

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

$('svg').svgTriangles();

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 polygon.off {
  opacity: 0;
}

svg polygon.on {
  opacity: 1;
}

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

$('svg').svgTriangles({
  
  // default: size: {w: 50, h: 50}
  size: {
    w: 150, 
    h: 150
  }

});

6. Randomly switch class to new.

instance.switchRandomOn(SPEED);
instance.switchRandomOff(SPEED);

7. Adjust the switch speed.

$('svg').svgTriangles({
  
  speed: 5

});

8. Default CSS classes.

$('svg').svgTriangles({
  
  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.