javascript – SVG Animate the fade stroke-dasharray

Question:

After repeated attempts to animate a circle with the stroke-dasharray , I came up with a variant of nesting circle in circle:

svg {
	width: 300px;
}

svg circle {
	fill: none;
	stroke-width: 10;
	stroke: #000;
}

svg circle.default {
	opacity: .2;
	stroke-dasharray: 125.6;
}

svg circle.default.inner {
	opacity: .5;
	stroke-dashoffset: 125.6;
	animation: circle-default 3s infinite;
}

@keyframes circle-default {
	to {
		stroke-dashoffset: 0;
	}
}

svg circle.dashed {
	stroke-dasharray: 1px;
}
<svg viewBox="0 0 120 120">
	<g>
		<circle class="default" cx="25" cy="25" r="20"></circle>
		<circle class="default inner" cx="25" cy="25" r="20"></circle>
	</g>
	<g>
		<circle class="dashed" cx="80" cy="25" r="20"></circle>
	</g>
</svg>

JSFIDDLE

If the animation on the left happens without any problems, then the object on the right does not lend itself to the same animation.

The idea is to put one circle (which is in parts) in a clean circle (in which the dasharray calculated as in the first). Then it will be possible to animate the outer circle and load the circle in parts.

I would like to make an animation of the block unfolding, but so that all this is in parts (see the second object).

Answer:

When you break a circle into equal segments with stroke-dasharray , it is not possible to animate them to appear with the filling of the circle with stroke-dashoffset

Since the circle is already fully occupied. You can play around with changing the size and number of segments, you get interesting options, but this is not what you wanted to get:

<svg width="360" height="360" viewBox="0 0 120 120">
	
	   <circle class="background" cx="25" cy="25" r="20" fill="none" stroke="#E4E4E4" stroke-width="8" />
		<circle class="default" cx="25" cy="25" r="20" fill="none" stroke="black" stroke-width="8"
		stroke-dasharray="125.6" stroke-dashoffset="125.6">
		
		 <animate attributeName="stroke-dasharray" dur="7s" values="1.57, 124.03; 1.57,1.57" fill="freeze" /> 
			</circle>
	
</svg>

Therefore, you can solve this issue using a mask that will open a circle, previously divided into segments, creating the illusion of filling:

The mask will move with a stroke-dashoffset like your first circle.

<svg width="360" height="360" viewBox="0 0 120 120">
	
<defs>
	 <mask id="msk1">
      <circle class="maskCircle" cx="25" cy="25" r="20" fill="none" stroke="white" stroke-width="8" stroke-dashoffset="0" stroke-dasharray="125.6">
	     <animate attributeName="stroke-dashoffset" dur="4s" values="125.6;0" fill="freeze" repeatCount="indefinite" />
	 </circle>
	 </mask>
</defs>
	   <circle class="background" cx="25" cy="25" r="20" fill="none" stroke="#E4E4E4" stroke-width="8" />
		<circle class="default" cx="25" cy="25" r="20" fill="none" stroke="black" stroke-width="8"
		stroke-dasharray="1.57" stroke-dashoffset="20"  mask="url(#msk1)">
		
		</circle>
	
</svg>
Scroll to Top