Double arc with CSS jquery or javascript
You don't even need CSS / JS to paint this. Just use the element <svg>
.
<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>
source to share
You can use SVG for this. There is an arc path command that you can use.
As your comment says, you want to place the content inside the arc and you want them to rotate.
Content like text or image can be placed inside the svg. Rotation can be achieved with transform=rotate(..)
.
If you want to make more animations using SVG, you can see D3.js . If you just want to create multiple arcs, you can do the math yourself to calculate the SVG path string.
source to share
@AlliterativeAlice is correct.
But for this shape, I would use two arcs instead of multiple C paths. I also prefer to use relative paths instead of absolute.
So my solution was using arcs and lines, not just 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>
source to share