How to implement delay in infinite animation?

<svg> <circle id="green" r="19" cx="50" cy="50" fill="green" fill-opacity=".82"/> <animate xlink:href="#green" attributeName="r" from="19" to="30" dur="3s" begin="3s;green.end+5s"/> </svg>

  • one
    I will try to give an answer today. Look at the topic. - Alexandr_TT
  • @Alexandr_TT Good evening, thank you. If it is not difficult to add a color change (as a gradient at an angle) to the example. I have already implemented it, but it seems to me rather crooked. - Alexander
  • one
    I will first do your example with changing the radius with a pause, and then work on changing the gradient. But perhaps you had better ask a separate question on the gradient with an example of what you got. - Alexandr_TT

1 answer 1

Infinite animation to increase the radius of a circle.

Achieved by using the parameter repeatCount="indefinite"

The radius value is values="19;30"

Start of animation - click on the figure

 <svg id="svg2"> <circle id="green" r="19" cx="50" cy="50" fill="green" fill-opacity=".82"/> <animate id="anim-stroke" xlink:href="#green" attributeName="r" values="19;30" dur="5s" begin="svg2.click" repeatCount="indefinite"/> </svg>
Animation increase, decrease the radius of the circle.

values="19;30;19"

 <svg id="svg2"> <circle id="green" r="19" cx="50" cy="50" fill="green" fill-opacity=".82"/> <animate id="anim-stroke" xlink:href="#green" attributeName="r" values="19;30;19" dur="5s" begin="svg2.click" repeatCount="indefinite"/> </svg>

Pause in the initial and final state of the circle

 values="19;30;30;19;19" 

 <svg id="svg2"> <circle id="green" r="19" cx="50" cy="50" fill="green" fill-opacity=".82"/> <animate id="anim-stroke" xlink:href="#green" attributeName="r" values="19;30;30;19;19" dur="5s" begin="svg2.click" repeatCount="indefinite"/> </svg>

The pause is achieved by repeating the values in the values parameter.

Simple arithmetic: the duration of the entire animation - 5 seconds. So pauses will be for 1 sec.

  • Great!) I just google the option with id = "rad" and begin = "2s; rad.end + 2s". - Alexander
  • @ Alexander Thanks for the promptness. waiting for a question on gradients :) - Alexandr_TT
  • And with a gradient animation, this option <linearGradient> <animate attributeName = "stop-color" dur = "2s" repeatCount = "indefinite" /> </ linearGradient> - Alexander
  • @ Alexander separate issue please issue. I think this will be useful to many. - Alexandr_TT
  • one
    @ Alexandr_TT en.stackoverflow.com/questions/904789/… - Alexander