Анимация круга SVG

Question

не подскажите как реализовать такую анимацию круга только на SVG https://codepen.io/HTMLProgrammer/pen/qBbdJZW?editors=1010

let ctx = canvas.getContext("2d"),
	w = canvas.width,
	h = canvas.height,
	angle = 0;

function draw() {
	ctx.fillStyle = "#fff";
	ctx.fillRect(0, 0, w, h);

	ctx.save();
	ctx.translate(w / 2, h / 2);

	ctx.beginPath();
	ctx.arc(0, 0, 50, 0, angle);

	ctx.lineTo(0, 0);

	ctx.fillStyle = "#000";
	ctx.fill();

	ctx.restore();

	if (angle < Math.PI * 2) angle += 0.1;

	requestAnimationFrame(draw);
}

draw();

canvas.onclick = () => (angle = 0);

<canvas id="canvas"></canvas>

Answer 1

Маленький хак

<svg viewBox="-250 -150 500 500" width="300px">
  <circle r="50" 
          fill="none"
          stroke="#000" 
          stroke-width="100">
    <animate attributeName="stroke-dasharray"
             begin="0s" 
             dur="2s"
             values="0 315; 315 315"
             repeatCount="3"/>
  </circle>
</svg>

Запуск по клику на кнопке

<svg viewBox="-250 -150 500 500" width="300px">
  <defs>
    <style>
      #button{
        cursor: pointer;
      }
    </style>
  </defs>
  <circle r="50" 
          fill="none"
          stroke="#000" 
          stroke-width="100">
    <animate attributeName="stroke-dasharray"
             begin="button.click" 
             dur="2s"
             values="0 315; 315 315"
             repeatCount="1"/>
  </circle>
  <g id="button">
  <rect width="240" height="60" x="-120" y="150" ry="6"/>
   <text fill="white" y="185" x="-95"> Начать анимацию</text> 
  </g>
</svg>

Answer 2

// Только для того, чтобы получить stroke-dasharray

const circle = document.querySelector('svg circle');
const circleLength = circle.getTotalLength();

console.log(circleLength);

body {
	margin: 0;
	padding: 0;
}

svg {
	width: 100vw;
	height: 100vh;
	display: block;
}

svg circle {
	stroke-width: 20;
	stroke: #000;
	fill: none;
	stroke-dasharray: 63;
	stroke-dashoffset: 63;
	transition: stroke-dashoffset linear 2s;
}

svg:hover circle {
	stroke-dashoffset: 0;
}

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="10"/>
</svg>

БЛОГ НА HUSL

Анимация круга SVG

Ответы (2 шт):