d3js svg water droplet or teardrop

Question

My goal is to draw a single water droplet with d3js.

EDIT: Another example here offers the correct shape: http://bl.ocks.org/mbostock/1020902 , but playing with the code.

They use the superformula plugin for d3 on github here , which looks like another good nudge.

var _superformulaTypes = {
    drop: {m: 1, n1: .5, n2: .5, n3: .5, a: 1, b: 1}
  };

Using math to draw shapes with svg & d3 makes anything possible, see this example , from Mike Bostock (the Twitter logo):

<svg viewBox="328 355 335 276" xmlns="http://www.w3.org/2000/svg">
  <path d="
    M 630, 425
    A 195, 195 0 0 1 331, 600
    A 142, 142 0 0 0 428, 570
    A  70,  70 0 0 1 370, 523
    A  70,  70 0 0 0 401, 521
    A  70,  70 0 0 1 344, 455
    A  70,  70 0 0 0 372, 460
    A  70,  70 0 0 1 354, 370
    A 195, 195 0 0 0 495, 442
    A  67,  67 0 0 1 611, 380
    A 117, 117 0 0 0 654, 363
    A  65,  65 0 0 1 623, 401
    A 117, 117 0 0 0 662, 390
    A  65,  65 0 0 1 630, 425
    Z"
    style="fill:#3BA9EE;"/>
</svg>

Likewise, Ian Johnson creates various shapes here:

My goal is to create 1 simple teardrop shape. Anything that looks more like a water droplet or teardrop would get me started, thanks!

Answer 1

I would just use a simple path and change its size and position with transforms:

 var svg = d3.select('body').append('svg').attr({width: 400, height: 400}); var dropPath = 'M 243.44676,222.01677 C 243.44676,288.9638 189.17548,343.23508 122.22845,343.23508 C 55.281426,343.23508 1.0101458,288.9638 1.0101458,222.01677 C 1.0101458,155.06975 40.150976,142.95572 122.22845,0.79337431 C 203.60619,141.74374 243.44676,155.06975 243.44676,222.01677 z'; var data = d3.range(300).map(function(){ return Math.random()/3; }); svg.selectAll('g.drop').data(data) .enter().append('g') .attr({ 'class': 'drop', transform: function(d, i){ return 'translate('+[Math.random()*300, Math.random()*300]+') scale('+d+')'; } }) .append('path').attr({d: dropPath}) 

 svg g.drop path{ stroke: blue; stroke-width': 3px; fill: skyblue; fill-opacity: 0.3; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>