CODEWITHSUNDEEP
svggeometry
Vinoth Kumar
Vinoth Kumar

Reputation: 423

Rotate circle and position arc over it with start and end angle

Hi is there any way to design the below picture with SVG or any other way?

SVG Image

Please find the SVG Code for the circle with head

<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"
 width="110px" height="110px" viewBox="0 0 110 110" enable-background="new 0 0 110 110" xml:space="preserve">
<g>
<title>Sample</title>
<g>
    <path d="M60.391,23.712V0H48.975v23.571c-21.802,2.619-37.87,20.953-37.87,43.041c0,23.995,19.536,43.391,43.411,43.391
        c23.855,0,43.392-19.396,43.392-43.391C97.907,44.736,81.202,26.543,60.391,23.712z M22.501,66.682
        c0-17.628,14.369-31.998,32.015-31.998c17.626,0,31.995,14.37,31.995,31.998c0,17.625-14.299,32.065-31.995,32.065
        C36.8,98.747,22.501,84.307,22.501,66.682z"/>
</g>

Head Based on the head angle in the example 332° the circle should rotate

Red Arc Based on the start and end position of the arc it should start from there with displaying the start and end position as in the picture 50 and 180.

Please help me to design :-)

Upvotes: 1

Views: 367

Answers (1)

Akshay
Akshay

Reputation: 14348

Try this i used rect and circle instead of path 

svg{
    background:#223D50;
}
<svg width="100%" height="100%" viewbox="0 0 100 100">
    <rect x="40" y="30" width="3" height="12" fill="grey" transform="rotate(-28 42 50)"/>
    <circle cx="42" cy="53" r="10" stroke-width="3" stroke="grey" fill="none"/>
    <circle cx="42" cy="53" r="18" fill="transparent" stroke-width="5" stroke="red" stroke-dasharray="36.11111% 100%" stroke-dashoffset="0" transform="rotate(-30 42, 53)"/>
    <text x="36" y="55" fill="white" font-size="5">Check</text>
  </svg>

Upvotes: 1

Related Questions