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


It's something like this:

<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M21,34.328C21,15.693,32.477,0.515,50.124,0.515

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