Simple Animation using SVG and Javascript

Mon, 02/12/2018 - 07:49

Just playing around with using SVG for web animation versus Canvas.

I see some interesting things built using Green Sock that I think I can reproduce myself.

Maybe I will add SVG support as an out-of-the-box feature in Wes Mantooth.

<script>
        const CENTER = 100,
              RADIUS = 50;
        
        window.onload = function(){

            var $t = document.getElementById('target'),
                d = 0;
            
            var id = setInterval(function(){
                
                let points = '', now = {};
                
                d++;
                if (d>360) d -= 360;
                
                now = vertex(d,45);
                points = now.x+','+now.y+' ';
                
                now = vertex(d,135);
                points += now.x+','+now.y+' ';
                
                now = vertex(d,225);
                points += now.x+','+now.y+' ';
                
                now = vertex(d,315);
                points += now.x+','+now.y;
                
                $t.setAttribute('points',points);
            },10);
        };
        function vertex(d,s) {
            d+=s;
            if (d > 360) d-=360;
            d = d * Math.PI / 180
            let x = CENTER + Math.sin(d) * RADIUS;
            let y = CENTER +  Math.cos(d) * RADIUS;
            return {
                x:x,
                y:y
            }
        }
    </script>
<svg  width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <polygon id="target" points="" style="fill:red;stroke:black;stroke-width:1" />  
</svg>