CODEWITHSUNDEEP
svg
alirezafc
alirezafc

Reputation: 162

Create a circle vertical dash array by svg

I have created a circle like this:

enter image description here

and this the code:

<!DOCTYPE html>
<html>
<body>

<svg height="500" width="500">
<circle cx="110" cy="200" r="100" stroke="black" stroke-width="3" fill="transparent" stroke-dasharray="10 3,5 3,5 3,5 3,5 3,5 3,5 3,5 3,5 3,5 3" />
</svg> 

</body>
</html>

but I am going to make lines vertically like this:

enter image description here

Can anybody help me?

Upvotes: 1

Views: 852

Answers (1)

enxaneta
enxaneta

Reputation: 33034

In this case you'll need 2 circles each with a different stroke-width for example like this:

let tl = 2 * Math.PI * 100;// the perimeter of the circle
let mdiv = tl/60;// I want 60 short divisions
let hdiv = tl/12;// and  12 long divisions
// set the "stroke-dasharray" attribute for the 2 circles where 1 is the stroke and the second parameter is the gap
min.setAttribute("stroke-dasharray", `1 ${mdiv-1}`);
h.setAttribute("stroke-dasharray", `1 ${hdiv-1}`);
circle{
  stroke:black;
  fill:transparent;
}
<svg height="500" width="500">
  <circle id="min" cx="110" cy="200" r="100" stroke-width="3" />
  <circle id="h" cx="110" cy="200" r="100" stroke-width="6" />
</svg>

Upvotes: 3

Related Questions