Double arc shape with CSS jquery or javascript

Question

How can I create an arc shape like this:

With CSS or jquery or javascript

Answer 1

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>

Answer 2

@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>

Answer 3

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.