CODEWITHSUNDEEP
animationsvg
user9375050
user9375050

Reputation: 61

Specific way to animate Circle Border with SVG?

I have a specific animation I want with an SVG circle. I found the code below from this question (Animated semicircles in logo with SVG). It gets me half of the way there, but i can't figure out how to make it the rest of the way there. I want the circle to start unfolding so to speak from the left side to the right side. This code starts the animation correctly, but I need it to keep going until there is no more circle. That is, the gray lines should keep disappearing as they are now, with the top disappearing at the same rate as the bottom. How do I do this?

<svg height="200" width="200" viewBox="0 0 144 144">
    <circle cx="72" cy="72" r="49" 
        stroke-width="6" stroke="#838588" fill="none">
        <animate id="a" attributeName="stroke-dasharray" values="154 0;77 154;" dur="1s" repeatCount="indefinite"/>
    </circle>
</svg>

Upvotes: 2

Views: 556

Answers (1)

Alexandr_TT
Alexandr_TT

Reputation: 14545

That is, the gray lines should keep disappearing as they are now, with the top disappearing at the same rate as the bottom. How do I do this?

To do this, you must change the parameters of the stroke-dasharray attribute.

With a radius of a circle r = 49, the total circumference is 308

To make a symmetrical disappearance of a stroke with two lines from one point, you need to use two groups of parameters stroke-dasharray

values="154, 0 154, 0; 0, 308, 0, 0" where

154 - dash parameter of the first group stroke-dasharray
0 - gap parameter of the first group stroke-dasharray
As a result, the circle will be filled with a cavity at the first moment of the animation.

0, 308, 0, 0 - at this value, the length of the gap is maximum and the border of the circle becomes invisible

<svg height="200" width="200" viewBox="0 0 144 144">
    <circle cx="72" cy="72" r="49" 
        stroke-width="6" stroke="#838588" fill="none">
        <animate id="a" attributeName="stroke-dasharray" values="154, 0  154, 0; 0, 308, 0, 0" dur="2s" repeatCount="indefinite"/>
    </circle>
</svg>

An example of filling the border of a circle from one point

values="0, 154 0, 154; 0, 0, 308, 0"

<svg height="200" width="200" viewBox="0 0 144 144">
    <circle cx="72" cy="72" r="49" 
        stroke-width="6" stroke="#838588" fill="none">
        <animate id="a" attributeName="stroke-dasharray" values="0, 154  0,  154; 0, 0, 308, 0" dur="2s" repeatCount="indefinite"/>
    </circle>
</svg>

Update
@User9375050's comment:

is there a way to avoid having that small remnant (slither of a line) on the right side before it is filled?

The streak does not actually remain. This visual effect is due to the continuous repetition of the animation. To remove this illusion, you need to add a pause at the end of the animation

Example 1 with a pause at the end of the animation

begin="0s;an.end+1s" where
First start of animation -0s;
an.end+1s - restarting the animation after a pause of 1 second after the end of the first animation

<svg height="200" width="200" viewBox="0 0 144 144">
    <circle cx="72" cy="72" r="49" 
        stroke-width="6" stroke="#838588" fill="none">
        <animate id="an"
           attributeName="stroke-dasharray"
           values="
           154, 0  154, 0;
           0, 308, 0, 0"
           dur="2s"
           begin="0s;an.end+1s"
           repeatCount="1"
           fill="freeze"/>
    </circle>
</svg>

Example 2 with a pause

<svg height="200" width="200" viewBox="0 0 144 144">
    <circle cx="72" cy="72" r="49" stroke-dashoffset="154" 
        stroke-width="6" stroke="#838588" fill="none">
        <animate id="an"
          attributeName="stroke-dasharray"
          values="0, 154  0,  154; 0, 0, 308, 0"
          begin="0s;an.end+1s"
          dur="2s"
          repeatCount="1"
          fill="feeze"/>
    </circle>
</svg>

Upvotes: 3

Related Questions