CODEWITHSUNDEEP
javascriptjquerycsssvgcss-shapes
user4122038
user4122038

Reputation:

Double arc shape with CSS jquery or javascript

How can I create an arc shape like this:

shape

With CSS or jquery or javascript

Upvotes: 4

Views: 2363

Answers (3)

Persijn
Persijn

Reputation: 14990

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

Upvotes: 0

jhinzmann
jhinzmann

Reputation: 988

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.

Upvotes: 1

AlliterativeAlice
AlliterativeAlice

Reputation: 12577

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>

Upvotes: 2

Related Questions