Search code examples
javascripthtmlsvgsvg-animate

Animated semicircles in logo with SVG

I would like to make this graphic in SVG. I can use <animate> tags and I can manipulate the SVG document with javascript. I would prefer to do it all in SVG if possible.

enter image description here

Solution

  • Here's a simpler example:

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

    The proper values to use for the stroke-dasharray are based on the circle's circumference, 2 * π * r, and we want half of that so divide it by 2. In the example that computes to roughly 154.

    See jsfiddle.

    Update: Pretty close, but not quite the same, as noted. Here's a version that also animates the colors:

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

    See jsfiddle.