SVG D3 leaf

by alekskorovin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div id="myelement"></div>

JavaScript

var svg = d3.select('#myelement').append('svg');

var initialX = 100;
var initialY = 100;

var initX = 'M' + 1.11*initialX;
var initY = 0.96 * initialY;
var keyPointX = 'C' + 1.59 * initialX;
var keyPointY = 1.43 * initialY;
var keyPoint2X = 2.47 * initialX;
var keyPoint2Y = 1.31 * initialY;
var endX = 2.82 * initialX;
var endY = 0.85 * initialY;

var secondKeyPointX = 'C' + 1.79 * initialX;
var secondKeyPointY = 0.34 * initialY;
var secondKeyPoint2X = 2.07 * initialX;
var secondKeyPoint2Y = 0.59 * initialX;

var curve2 = svg.append('path')
                 .attr('d', initX + ', ' + initY + ' ' + keyPointX +', ' + keyPointY +' ' + keyPoint2X + ', ' + keyPoint2Y + ' ' + endX + ', ' + endY + ' ' + initX + ', ' + initY + ' ' + secondKeyPointX + ', ' + secondKeyPointY + ' ' + secondKeyPoint2X + ', ' + secondKeyPoint2Y + ' ' + endX + ' , ' + endY)
                 .attr('stroke', '#000')
                   .attr('fill', 'green');