make circle path start from top

Question

I have reached very near to fulfill my need. Just a little issue which I tried playing with calculations but stuck in. Snippet :

.path {
  stroke-dasharray: 120;
  stroke-dashoffset: -120;
  animation: dash 3s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 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 376 56.6" enable-background="new 0 0 376 56.6" xml:space="preserve">
<path fill="#232527" d="M345.8,53.3C345.8,53.3,345.8,53.3,345.8,53.3c-1.1,0-2.2-0.7-2.7-1.7l-21.7-44c-0.7-1.5-0.1-3.3,1.4-4
 c1.5-0.7,3.3-0.1,4,1.4l19,38.6l19.2-38.6c0.7-1.5,2.5-2.1,4-1.3c1.5,0.7,2.1,2.5,1.3,4l-21.9,44C348,52.6,347,53.3,345.8,53.3z
  M274.5,53.3c-1.7,0-3-1.3-3-3v-44c0-1.7,1.3-3,3-3s3,1.3,3,3v44C277.5,51.9,276.1,53.3,274.5,53.3z M205,53.3c-1.7,0-3-1.3-3-3v-41
 h-19c-1.7,0-3-1.3-3-3s1.3-3,3-3h44c1.7,0,3,1.3,3,3s-1.3,3-3,3h-19v41C208,51.9,206.7,53.3,205,53.3z M30.5,53.2
 C30.5,53.2,30.5,53.2,30.5,53.2c-1.1,0-2.2-0.7-2.7-1.7l-16-32.5v31.1c0,1.7-1.3,3-3,3s-3-1.3-3-3v-44c0-1.4,1-2.6,2.3-2.9
 C9.6,3,11,3.6,11.6,4.9l19,38.6L49.8,4.9c0.6-1.2,2-1.9,3.4-1.6c1.4,0.3,2.3,1.5,2.3,2.9v44c0,1.7-1.3,3-3,3s-3-1.3-3-3V18.9
 L33.2,51.6C32.7,52.6,31.7,53.2,30.5,53.2z"/>
<path class="path" stroke="#232527" stroke-width="5" fill="#fff" d="M120.2,2.7c-14.1,0-25.6,11.5-25.6,25.6c0,14.1,11.5,25.6,25.6,25.6c14.1,0,25.6-11.5,25.6-25.6,25.6c14.1,0,25.6-11.5,25.6-25.6
 "/>

</svg>

I just need small help to make the circle path animation start from the top. I am doing something wrong with the calculation I guess. I just need the animation like this. However it is using a third party js plugin which I don't want to use.

Also is there any way we can embed css into SVG so that we can have the graphic as .svg with animation instead to put svg code in html file?

@RobertLongson thank you for commenting here..I have reached soo much near. Please can you help me in filling the circle full. — Gitesh Dang, May 24 '16 at 15:14
Run code snippet, You will see it does not start from 0 position..but half of the semicircle. Just want it to get start from 0 position. I guess I am missing one arc. right? — Gitesh Dang, May 24 '16 at 15:22
oh that is second question after that fix :) As there is CSS written in style tag..can we generate its .svg as image. — Gitesh Dang, May 24 '16 at 15:27
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/112817/discussion-between-gitesh-dang-and-robert-longson). — Gitesh Dang, May 24 '16 at 16:12

score 4 · Accepted Answer · edited May 23 '17 at 11:52

If you need the stroke to start from the top of the circle, you need to change the path you used to make the circle. I made another one according to the formula described in this answer. I just modified it to make the path start on the top.

Then you can calculate the perimeter of the circle (π * 2 * r) for the stroke-dasharray and stroke-dashoffset values :

.path {
  stroke-dasharray: 157;
  stroke-dashoffset: -157;
  animation: dash 6s linear infinite;
}

@keyframes dash {
  to { stroke-dashoffset: 157; }
}

<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 376 56.6" enable-background="new 0 0 376 56.6" xml:space="preserve">
  <path fill="#232527" d="M345.8,53.3C345.8,53.3,345.8,53.3,345.8,53.3c-1.1,0-2.2-0.7-2.7-1.7l-21.7-44c-0.7-1.5-0.1-3.3,1.4-4 c1.5-0.7,3.3-0.1,4,1.4l19,38.6l19.2-38.6c0.7-1.5,2.5-2.1,4-1.3c1.5,0.7,2.1,2.5,1.3,4l-21.9,44C348,52.6,347,53.3,345.8,53.3z M274.5,53.3c-1.7,0-3-1.3-3-3v-44c0-1.7,1.3-3,3-3s3,1.3,3,3v44C277.5,51.9,276.1,53.3,274.5,53.3z M205,53.3c-1.7,0-3-1.3-3-3v-41 h-19c-1.7,0-3-1.3-3-3s1.3-3,3-3h44c1.7,0,3,1.3,3,3s-1.3,3-3,3h-19v41C208,51.9,206.7,53.3,205,53.3z M30.5,53.2 C30.5,53.2,30.5,53.2,30.5,53.2c-1.1,0-2.2-0.7-2.7-1.7l-16-32.5v31.1c0,1.7-1.3,3-3,3s-3-1.3-3-3v-44c0-1.4,1-2.6,2.3-2.9 C9.6,3,11,3.6,11.6,4.9l19,38.6L49.8,4.9c0.6-1.2,2-1.9,3.4-1.6c1.4,0.3,2.3,1.5,2.3,2.9v44c0,1.7-1.3,3-3,3s-3-1.3-3-3V18.9 L33.2,51.6C32.7,52.6,31.7,53.2,30.5,53.2z"/>
  <path class="path" stroke="#232527" stroke-width="5" fill="#fff" d="M120 28.3 m0 -25 a25 25 0 1 0 0 50 a25 25 0 1 0 0 -50" />
</svg>

alternatively one could set a rotate transform on the OP's path — Robert Longson, May 25 '16 at 08:51

make circle path start from top

1 Answers1