CODEWITHSUNDEEP
svgpathbezier
tempid
tempid

Reputation: 8208

Draw a custom shape using SVG path Bezier curve

Is it possible to draw a path like the image below? It is basically a circle with gaps in between.

I was just able to make a circle so far using SVG path - http://jsfiddle.net/k6pgpze6/

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="500px" height="500px">    
      <path 
            d="
            M 100, 250          
            a 150,150 0 1,0 300,0
            a 150,150 0 1,0 -300,0
            "
      />
</svg>

enter image description here

Upvotes: 0

Views: 1363

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101830

Yes is the basic answer. You could draw individual arcs (ie. one <path> per arc), or you can have a path with multiple subpaths.

<path d="M 100,250 a 150,150 0 1,0 300,0
         M 300,0   a 150,150 0 1,0 -300,0" />

However these lines won't end with the oblique angles that your picture has. If you want those, then your best bet is to draw a complete circle and use a <clipPath> or <mask> to make the gaps.

Update

Here's an approximation of your picture.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="500px" height="500px">    
      <path transform="translate(250,250)"
            fill="none"
            stroke="black"
            stroke-width="6"
            d="M 39,-145          
               A 150,150, 0,0,1, 106,106
               M 0,150
               A 150,150, 0,0,1, -106,106
               M -123,86
               A 150,150, 0,0,1, -150,0
               M -149,-13
               A 150,150, 0,0,1, -39,-145" />
</svg>

To make it easier for myself, I've centred the circle at (0,0) and used a transform to move it to the right place on the page. Because I used this trick, it is easier to make sure all my coordinates (the M vales and the last two values in the A) are on the circle's circumference. It's just a bit of simple trigonometry (sin(angle)*150 and cos(angle)*150).

The trickiest part of an arc command is the large arc flag and sweep flag. The following diagram from the SVG spec is useful to look at.

explanation of the arc flags

In your case, you will want to use the same value for all the sweep flags (fifth value in the arc command). Choose either 1 or 0 depending on whether you are going clockwise or anti-clockwise around the circle.

For the large arc flag (fourth value), use 0 if your arc covers less than 180 degrees, or 1 if it is greater than 180 degrees.

Upvotes: 4

Related Questions