i have a small SVG animation that i have been playing around with and i was wondering if there is a simple solution for the following issue.
Is there a way of changing the start point of where the circle starts? As it always seems to start on the right hand 3 o'clock position and goes around clockwise. Ideally i want it to start where and when the line finishes animating. Example: http://jsfiddle.net/matta70/7jvd6fsx/1/
.line { stroke-dasharray: 650; stroke-dashoffset: 650; animation: offset 3s linear forwards; } .circle { stroke-dasharray: 230; stroke-dashoffset: 230; animation: offset 3s linear forwards; } /*======================== * KEYFRAMES */ @keyframes offset { 100% { stroke-dashoffset: 0; } } <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="577px" height="74px" viewBox="0 0 577 74" enable-background="new 0 0 577 74" xml:space="preserve"> <g id="Layer_1"> <line class="line" fill="none" stroke="#000000" stroke-width="2" x1="0" y1="37" x2="504" y2="37"/> <circle class="circle" fill="none" stroke="#000000" stroke-width="2" cx="540" cy="37" r="36"/> <circle fill="none" stroke="#000000" stroke-width="2" cx="540" cy="37" r="18"/> </g> </svg>