Create Retro Triangle Pattern Using jQuery - Triangularize.js

The Triangularize.js jQuery plugin makes use of JavaScript and CSS to generate a retro pattern of triangles for the background image of a given container.

How to use it:

1. Import jQuery library and the Triangularize.js script into the document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="src/js/triangularize.js"></script>

2. Call the function on the target element in which you want to generate the triangle pattern.

<div id="triangle-box">
  ...
</div>

$(function(){
  $("#triangle-box").trianglarize();
});

3. Customize the triangle pattern by overriding the default parameters as follows.

$(function(){
  $("#triangle-box").trianglarize({

    // height
    triHeight: 100,

    // space between triangles
    spacingV: 0,
    spacingH: 0,

    // colors
    triColor: "#00DDFF",
    triColorU: "#DD00FF",

    // direction
    startUpsdwn: false
    
  });
});

---

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