Double arc shape with CSS jquery or javascript

2.1k views Asked by At

How can I create an arc shape like this:

shape

With CSS or jquery or javascript

3

There are 3 answers

4
AlliterativeAlice On BEST ANSWER

You don't even need CSS/JS to draw this. Just use an <svg> element.

<svg width="270" height="120">
    <path
       d="M 49.155517,102.32765 C 127.54837,40.541934 209.51266,103.2205 209.51266,103.2205 l 0,0 C 259.33409,50.363364 259.15552,50.363364 259.15552,50.363364 126.68749,-56.114356 2.1861831,50.204194 2.1861831,50.204194 z"
       stroke-width="3"
       stroke="#A5423A"
       fill="none"
    />
</svg>

5
Persijn On

@AlliterativeAlice is correct.

But for this shape I would use two arcs instead of a lot of C paths. I also prefer to use relative paths instead of absolute one.

So my solution used arcs and lines instead of only Bezier Curves.

<svg width="300px" height="300px" viewBox="0 0 100 100">
  <path d="m 10,60 
          a 50 50 0 0 1 80,0
          l -10,10
          a 40 40 0 0 0 -60 0Z" stroke-width="1" stroke="#A5423A" fill="none" />
</svg>

0
jhinzmann On

You could use SVG for this. There is an arc path command which you could use.

As your comment states, you want to place content inside the arc and you want them to rotate.

Content like text or image could be placed inside the svg. Rotation can be achieved with transform=rotate(..).

If you want to do more animations with SVG you could have a look at D3.js. If you just want to create some arcs, you possibly can do the math on your own for computing the SVG path string.