How to draw circle animation not using canvas?

Question

I have a background image, and a div child in which I draw a circle. Here some sample code http://codepen.io/anon/pen/hybAs .

I want to be able to "erase" this circle like
_{(source: openprocessing.org)}
Pacman until there is no more draw, so image will appear . While increasing the clean sector angle it would be showing image bellow it. I want this to be an animation , no problem if it is html, jquery or css, but I can't not use canvas. Please ask me anything if my question isn't clear enough.

So, without using canvas, your options are: SVG, or using several triangles. — Ohgodwhy, May 18 '13 at 01:20
You should check [this example](http://cssdeck.com/labs/animated-pac-man-in-pure-css3). — Okan Kocyigit, May 18 '13 at 01:30
Please edit the externally hosted code into the post; doing so will make sure it remains useful even if the link breaks. My script [is not allowed to do this](https://meta.stackoverflow.com/a/344512/4751173) because of potential licensing problems. — Glorfindel, Aug 21 '21 at 14:04

score 0 · Answer 1 · edited May 23 '17 at 10:29

Just using the svg path to create an arc. I found the arc creating sample here: How to calculate the SVG Path for an arc (of a circle)

Now just iterate from 0 to 360 degree angle to create the arc using setInterval as below:

<svg xmlns="http://www.w3.org/2000/svg" height="1300" width="1600" viewBox="0 0 1600 1300" id="star-svg">
<path id="arc1" fill="none" stroke="yellow" stroke-width="50" />
</svg>
<script type="text/javascript">
var a = document.getElementById("arc1");
var i =1;
var int = setInterval(function() {  
    if (i>360) { clearInterval(int); return;};
    a.setAttribute("d", describeArc(200, 200, 25, 0, i));
    i++;
}, 10);

function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
  var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

  return {
    x: centerX + (radius * Math.cos(angleInRadians)),
    y: centerY + (radius * Math.sin(angleInRadians))
  };
}

function describeArc(x, y, radius, startAngle, endAngle){

    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);

    var arcSweep = endAngle - startAngle <= 180 ? "0" : "1";

    var d = [
        "M", start.x, start.y, 
        "A", radius, radius, 0, arcSweep, 0, end.x, end.y
    ].join(" ");

    return d;       
}
</script>

How to draw circle animation not using canvas?

1 Answers1

Linked