CODEWITHSUNDEEP
d3.jssvggraphics
JD Angerhofer
JD Angerhofer

Reputation: 148

Draw Complicated Shapes in D3

I am trying to draw an irregular, petal shape for a D3 animation, but I cannot find any understandable documentation for odd shapes in SVG-format. How might I go about creating such a shape? Rose-petal shape

Upvotes: 0

Views: 1938

Answers (1)

Klaujesi
Klaujesi

Reputation: 1836

It's something like this:

<svg>
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M21,34.328C21,15.693,32.477,0.515,50.124,0.515
    C67.77,0.515,79,16.928,79,34.328c0,17.399-29,65.157-29,65.157S21,52.962,21,34.328z"/>
</svg>

And use as definition (defs) for future reference. Look here

and here: Is it possible to import svg shapes in d3.js?

If you want do it by hand, here's the Paths Tutorial: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Here the Codepen

Upvotes: 2

Related Questions