-2

I need to create an animation effect where an arc is pulsing - alternating between a length of 180 and 102 degrees. Also it needs to elongate/compress symmetrically on both sides at the same time. I have the svg for this arc (src): 

<svg width="138px" height="138px" viewBox="0 0 138 138" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
    <title>blue-beam</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <radialGradient cx="50%" cy="4.72722907%" fx="50%" fy="4.72722907%" r="45.2727709%" id="radialGradient-1">
            <stop stop-color="#09FEFE" offset="0%"></stop>
            <stop stop-color="#3DFBFE" stop-opacity="0" offset="100%"></stop>
        </radialGradient>
        <path d="M69,0 L69,0 C107.107648,-7.00026132e-15 138,30.8923523 138,69 L138,69 C138,107.107648 107.107648,138 69,138 L69,138 C30.8923523,138 4.66684088e-15,107.107648 0,69 L0,69 C-4.66684088e-15,30.8923523 30.8923523,7.00026132e-15 69,0 Z" id="path-2"></path>
    </defs>
    <g id="blue-beam" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <mask id="mask-3" fill="white">
            <use xlink:href="#path-2"></use>
        </mask>
        <path stroke="url(#radialGradient-1)" stroke-width="4" d="M69,2 C31.9969218,2 2,31.9969218 2,69 C2,106.003078 31.9969218,136 69,136 C106.003078,136 136,106.003078 136,69 C136,31.9969218 106.003078,2 69,2 Z"></path>
    </g>
</svg>

CSS animation newbie here. Could anyone help with how to do this animation using CSS? I'm stuck on how to actually change the length of the arc itself (elongate/shorten) from both sides. I read about stroke offset, but that seems to draw out the path on one end

ccprog
  • 20,308
  • 4
  • 27
  • 44
user1968919
  • 153
  • 3
  • 13
  • 1
    I've taken the liberty to exchange your image link with a snippet where we can see the source code. – ccprog Jul 18 '18 at 18:32

1 Answers1

1

There are a lot of ways a "pulse" could be understood. I'll go with an easy one. (in terms of writing it down)

The stroke of your arc has a "fading" effect achieved with a radial gradient that changes opacity values. If you change the radius that gradient stretches over, it seems as if you can see a longer or shorter stroke until it fades to transparency. You won't get precise lengths with that, but it might more or less work for you.

Now comes the downside: CSS gradient functions, that you could animate with CSS, do not work for SVG strokes. You need the SVG <radialGradient> element, and you need to animate its r attribute. That is a XML attribute, so not animatable with CSS, but only with a SMIL animation. Those are not implemented for Edge/IE, but at least there are Javascript-based polyfills like fakesmile.

(In theory, SVG 2 defines gradientTransform to be a presentation attribute that could be animated with CSS via transform functions, but in practice, this is not yet implemented by browsers.)

<svg width="138px" height="138px" viewBox="0 0 138 138" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <radialGradient cx="50%" cy="4.72722907%" fx="50%" fy="4.72722907%"
                    r="45.2727709%" id="radialGradient-1">
        <stop stop-color="#09FEFE" offset="0%"></stop>
        <stop stop-color="#3DFBFE" stop-opacity="0" offset="100%"></stop>
        <animate attributeName="r" values="45%;80%;45%" keyTimes="0;0.5;1"
                 dur="2s" repeatCount="indefinite"
                 calcMode="spline" keySplines=".5 0 .5 1;.5 0 .5 1" />
    </radialGradient>
  </defs>
  <path style="fill:none;stroke:url(#radialGradient-1);stroke-width:4"
        d="M69,2 C31.9969218,2 2,31.9969218 2,69 C2,106.003078 31.9969218,136 69,136 C106.003078,136 136,106.003078 136,69 C136,31.9969218 106.003078,2 69,2 Z"></path>
</svg>
ccprog
  • 20,308
  • 4
  • 27
  • 44