How to rotate triangle animation in javascript?

Question

I've been at this for quite a while trying to construct a program which takes a triangle polygon element and infinitely spins it clock-wise. The issue that I'm now facing is a rangeError: maximum call stack exceeded, and I haven't a clue on how to code this in a more practical way. Here's my code with comments included.

 var _poly = document.getElementById('pol'); //triangular polygon element var y1 = 0; // y coordinates for each point of _poly. var y2 = 375; var y3 = 375; var xPTS = []; /*the following for loop pushes corresponding x coordinates for each y coordinate into this variable.*/ for (var i = 0; i < _poly.animatedPoints.length; i++) { xPTS.push(_poly.animatedPoints[i].x); } /*The purpose of the following return function `xVar` is to assign the appropriate value for x to each of their respective y coordinates. Each x variable will switch from one return function to the other as they cross each verticle halves of the svg element.*/ var xVar = function(x, y) { if (x >= 250 && y !== 500) { return () => { return (Math.sqrt(62500 - Math.pow(y - 250, 2)) + 250).toString() + ","; }; } else { return () => { return (250 - Math.sqrt(62500 - Math.pow(y - 250, 2))).toString() + ","; }; } }; /*variables `x1`, `x2`, and `x3` are assigned to appropriate values as per the y argument in function `xVar`.*/ for (var i = 0; i < 3; i++) { window["x" + (i + 1).toString()] = xVar(xPTS[i], window["y" + (i + 1).toString()]); } /*`coordF` when constantly invoked in `tFunc` is meant to constantly update and keep track of the polygon element's x,y coordinates.*/ var coordF = function() { coords = [_poly.animatedPoints[0].x.toString() + "," + _poly.animatedPoints[0].y.toString() + " ", _poly.animatedPoints[1].x.toString() + "," + _poly.animatedPoints[1].y.toString() + " ", _poly.animatedPoints[2].x.toString() + "," + _poly.animatedPoints[2].y.toString() ]; } coordF(); //invoked so coords is accessible. //main function var tFunc = function(x, y, c) { /*`ticks` is assigned on the condition evaluated for verifying which verticle half a point of the polygon is located.*/ ticks = (x >= 250 && y !== 500) ? function(_x, _y) { /*note: this is where the error incurs*/ /*each point is meant to travel x2 as fast as from ranges 0-125 and 375-500 down and up the y-axis when each y coordinate is in the following range: 125-375 so as for the polygon to remain an equilateral triangle.*/ if (_y >= 125 && _y <= 375) { _y += 2; return _x() + _y.toString(); } else { _y += 1; return _x() + _y.toString(); } } : function(_x, _y) { if (_y >= 125 && _y <= 375) { _y -= 2; return _x() + _y.toString(); } else { _y -= 1; return _x() + y.toString(); } }; tick_tocks = setInterval(function() { /*`coords` is constantly updated so as to utilize each item of `coords` as an argument for c so `_poly`'s `points` attribute can constantly be assigned the value to render the triangular polygon element equilateral as it spins.*/ coordF(); //`c` argument is evaluated to verify which item of the `coords` array is passed. switch (c) { /*As each y coordinate changes via `ticks` function, each x coordinate changes correspondingly*/ case c[0]: _poly.setAttribute("points", ticks(x1, y1) + " " + c[1] + c[2]); break; case c[1]: _poly.setAttribute("points", c[0] + ticks(x2, y2) + " " + c[2]); break; case c[2]: _poly.setAttribute("points", c[0] + c[1] + ticks(x3, y3)); } }, 100); //alternate functions are assigned when the following boolean expression is true. if (y === 0 || y === 500) { clearInterval(tick_tocks); //x variables are assigned to alternate functions defined in `xVar`. for (var i = 0; i < 3; i++) { window["x" + (i + 1).toString()] = xVar(xPTS[i], window["y" + (i + 1).toString()]); } /*`tFunc` is invoked 3 times with 3 different sets of arguments. `x` is the x coordinate, `y` is the y coordinate, and `c` is an item of the `coords` array.*/ for (var i = 0; i < 3; i++) { tFunc(window["x" + (i + 1).toString()], window["y" + (i + 1).toString()], coords[i]); } } }; /*`tFunc` is invoked 3 times with 3 different sets of arguments. `x` is the x coordinate, `y` is the y coordinate, and `c` is an item of the `coords` array.*/ for (var i = 0; i < 3; i++) { tFunc(window["x" + (i + 1).toString()], window["y" + (i + 1).toString()], coords[i]); } 

 <svg width=500 height=500 style="border:1px solid black;display:block;margin:auto;"> <polygon id="pol" stroke="black" stroke-width=3 fill="green" points="250,0 466.50635094610965,375 33.49364905389035,375"/> </svg> 

I'm still pretty mediocre with js, but hopefully, I'd appreciate any answers as to why I'm receiving a rangeError notifying at ticks in the console, how I can modify the above code to accomplish the task of putting the triangle on an infinite spin, and or a more practical way of accomplishing this task.

Answer 1

If you need a non js solution then you might try rotating it via css3 transform property along with usage of animation, @keyframe etc. :

 #triangle{ animation: polyRotation 8s linear infinite; } @keyframes polyRotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 

 <svg id="triangle" width=500 height=500 style="border:1px solid black;display:block;margin:auto;"> <polygon id="pol" stroke="black" stroke-width=3 fill="green" points="250,0 466.50635094610965,375 33.49364905389035,375"/> </svg>