I want to make a smooth drawing of svg when the page loads, but the problem is that the circles are different (in the screenshots it is shown that different lengths of the line are needed), I don’t know what property to animate when the page loads.

http://prntscr.com/hgvqjf and http://prntscr.com/hgvqq5

<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 378 381" style="enable-background:new 0 0 378 381;" xml:space="preserve"> <style type="text/css"> .st0{fill:none;stroke:#003D90;stroke-width:2;stroke-miterlimit:10;} </style> <circle class="st0" cx="189" cy="190.5" r="183"/> </svg>

    2 answers 2

    stroke-dasharray and stroke-dashoffset https://codepen.io/MaffooBristol/pen/zKwoAZ

    • And what if I want the circle to look prnt.sc/hgvqq5 at the end? - YourDeveloper
    • It is necessary to calculate the dash-offset correctly, and also the circle must be set to rotate by -90 degrees (to start drawing from the northern point, not the eastern one) - Daniel Khoroshko
    • I did it initially, but I thought it was too complicated and I know little about it)) Thank you - YourDeveloper

    Many, apparently because of the examples of Chris Koyera on css-tricks, put stroke-dasharray="1000" When it works, and when it doesn't. The fact is that it is necessary to accurately calculate the length of the animated line. For example, for a circle with a radius of 100px the circumference will be - 2*3.14*100= 628px This is the calculated value and should be substituted into the stroke-dasharray and the stroke-dashoffset .

    SVG solution

    Animation starts when you hover

     <svg id="svg2" width="400" height="400" viewBox="0 0 400 400"> <circle id="back" cx="120" cy="120" r="100" fill="none" stroke="#d5d5d5" stroke-width="5"/> <circle transform="rotate(-90 120 120)" id="shape" cx="120" cy="120" r="100" stroke-width="5" stroke-dasharray='628' stroke-dashoffset='628' stroke="red" fill="none"> <animate attributeName="stroke-dashoffset" from="628" to="0" dur="4s" begin="svg2.mouseover" restart="whenNotActive" /> </circle> </svg>

    CSS solution

    Everything is carried away in styles, only circles remain in svg.

     #back{ stroke:red; stroke-width:5; fill:none; stroke:#d5d5d5; } #shape { stroke-dashoffset:628; stroke-dasharray:628; stroke:red; stroke-width:5; fill:none; animation: circle_stroke 4s ease-in forwards; } @keyframes circle_stroke { 0% { stroke-dashoffset: 628; } 100% { stroke-dashoffset: 0; } } 
     <svg id="svg2" width="400" height="400" viewBox="0 0 400 400"> <circle id="back" cx="120" cy="120" r="100" /> <circle id="shape" transform="rotate(-90 120 120)" cx="120" cy="120" r="100" /> </svg>

    Half circle

    I will repeat the principle of drawing a line from zero to full length: when reducing the stroke-dashoffset from the maximum value (628) to zero, the line will be drawn from zero to full length. But we need to paint only half the circle, so we will reduce the stroke-dashoffset from 628px to 314px

     <style> #shape { stroke-dashoffset:314; stroke-dasharray:628; stroke:red; stroke-width:5; fill:none; animation: circle_stroke 4s ease-in forwards; } @keyframes circle_stroke { 0% { stroke-dashoffset: 628; } 100% { stroke-dashoffset: 314; } } </style> <svg id="svg2" width="400" height="400" viewBox="0 0 400 400"> <circle id="shape" transform="rotate(-90 120 120)" cx="120" cy="120" r="100" /> </svg>

    • one
      @YourDeveloper For a quarter of a circle - stroke-dashoffset от 628px до 157px - Alexandr_TT