// there is a color effect inside. play around with it to see the effect.

​

// variables to manipulate the spiral

    var number = 10,

        speed = 10,

        color = "black",

        border_color = "white",

        border_width = "3",

        base = 120,

        height = base*Math.sqrt(3)/2,

        vertex = "400,420";

     // number of triangles slider

     document.getElementById("number").addEventListener("input", function() {

     number = document.getElementById("number").value;

     document.getElementById("number_result").innerHTML = (number-1);

     clear();

     set();

     }, false);

​

     // number of rotations slider

     document.getElementById("speed").addEventListener("input", function() {

     speed = (document.getElementById("speed").value*10);

     document.getElementById("speed_result").innerHTML = (speed/10);

     clear();

     set();

     }, false);

​

     // size of triangles slider

     document.getElementById("size").addEventListener("input", function() {

     base = document.getElementById("size").value;

     height = base*Math.sqrt(3)/2;

     vertex_x = parseInt(vertex.split(",")[0]);

     vertex_y = parseInt(vertex.split(",")[1]);

     l_side = (vertex_x-base/2)+","+(vertex_y+height);

     r_side = (vertex_x+base/2)+","+(vertex_y+height);

     center_x = vertex_x+"px";

     center_y = vertex_y+height*2/3+"px";

     document.getElementById("size_result").innerHTML = base;

     clear();

     set();

     }, false);

​

    // width of triangles borders slider

     document.getElementById("width").addEventListener("input", function() {

     border_width = (document.getElementById("width").value).toString();

     document.getElementById("width_result").innerHTML = border_width;

     clear();

     set();

     }, false);

​

    // controller dropdown

    function toggle() {

    var control = document.getElementById("controller");

    control.style.visibility = (control.style.visibility === "hidden") ? "visible" : "hidden";

    }

​

    // for internal calculation variables

    var vertex_x = parseInt(vertex.split(",")[0]),

        vertex_y = parseInt(vertex.split(",")[1]),

        l_side = (vertex_x-base/2)+","+(vertex_y+height),

        r_side = (vertex_x+base/2)+","+(vertex_y+height),

        center_x = vertex_x+"px",

        center_y = vertex_y+height*2/3+"px"; 

​

    // triangles function to be called

    function triangles (i)

    {

    // svg element

    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

    svg.setAttribute("width", "800");

    svg.setAttribute("height", "800");

    svg.setAttribute("id", "svg"+i);

    document.getElementById("whole").appendChild(svg);

​

    // polygon element

    var polygon = document.createElementNS("http://www.w3.org/2000/svg","polygon");

    polygon.setAttribute("points", vertex+" "+r_side+" "+l_side);

    polygon.setAttribute("id", "tri"+i);

    polygon.style.fill=color;

    polygon.style.stroke = border_color;

    polygon.setAttribute("stroke-width",border_width);

    //polygon.setAttribute("stroke-dasharray","20,10,5,5,5,10");

    //polygon.setAttribute("stroke-linecap","round");

    document.getElementById("svg"+i).appendChild(polygon);

​

    // color animation element

    var attr = "stroke,fill",

        color_from = "white,none",

        color_to = "white,none",

        duration = "1s,1s",

        repeat = "indefinite,indefinite"; 

    for (var r = 0; r < 2; r++) {

    var animate = document.createElementNS("http://www.w3.org/2000/svg","animate");

    animate.setAttribute("attributeName", attr.split(",")[r]);

    animate.setAttribute("repeatCount", repeat.split(",")[r]);

    animate.setAttribute("dur", duration.split(",")[r]);

    animate.setAttribute("from", color_from.split(",")[r]);

    animate.setAttribute("to", color_to.split(",")[r]);

    animate.setAttribute("begin", (i-1)/number+"s");

    document.getElementById("tri"+i).appendChild(animate);

    }

​

    // css transform animations

    var x = i*12*speed, y = i*24*speed, z = i*36*speed;

    var prefixes = " ,-webkit-,-moz-";

    // insert the css transform for different vendors

    //for ( var k = 0; k < prefixes.split(",").length; k++)

    //{

    //var prefix = prefixes.split(",")[k];

    prefix = "-webkit-";

    polygon.style[prefix +'animation'] = 'anim'+i+' '+number+'s infinite';

    polygon.style[prefix +'transform-origin'] = center_x+" "+center_y;

    polygon.style[prefix +'animation-timing-function'] = 'ease-in-out';

​

    var scale = 'scale('+(2*((number-i+1)/number))+')';

    var keyframes = '@' + prefix + 'keyframes anim'+i+' { '+

                    '0% {' + prefix + 'transform: rotate( 0deg ) '+scale+'; } '+

                    '30% {' + prefix + 'transform: rotate( '+x+'deg ) '+scale+'; } '+

                    '33% {' + prefix + 'transform: rotate( '+x+'deg ) '+scale+'; } '+

                    '63% {' + prefix + 'transform: rotate( '+y+'deg ) '+scale+'; } '+

                    '66% {' + prefix + 'transform: rotate( '+y+'deg ) '+scale+'; } '+

                    '100% {' + prefix + 'transform: rotate( '+z+'deg ) '+scale+'; } '+

                  '}';

​

    document.styleSheets[0].insertRule(keyframes, 0);

    //}

    }

​

    // call the set function

    set();

​

    // call the triangles function

    function set() {

    for (var i = 1; i < number; i++)

    triangles(i);

    }

​

    // clear the page

    function clear() {

    var node = document.getElementById("whole");

    while (node.firstChild)

    {

    node.removeChild(node.firstChild);

    document.styleSheets[0].deleteRule(0);

    }

    }