JSFiddle - React, Tailwind, and code Playground

by Viet Phan

HTML

<title>Point-Along-Path Interpolation</title>

CSS

path {
  cursor: pointer;
  fill: #eee;
  stroke: #666;
  stroke-width: 1.5px;
}

JavaScript

var w = $(window).width(),
    h = $(window).height();

var svg = d3.select("body").append("svg:svg")
    .attr("width", 2*w)
    .attr("height",2* h)
  .append("svg:g")
   .attr("transform", "translate(" + 0.1*w + "," + 0 + ")");
   
var dInkScape ="m 360.1639,630.31678 c 1.0609,13.05167 -195.29107,-273.68628 -203.49722,-275.81173 -22.23818,-5.75983 -24.83733,-34.59299 -15.23811,-51.66666 17.17076,-30.54078 59.06286,-32.72422 85.71428,-14.04764 39.11203,27.40863 40.85844,83.86959 12.85717,119.7619 C 202.67874,456.39146 131.20349,457.65152 86.190506,420.21936 29.546262,373.1148 28.796105,286.43841 75.714265,232.36222 132.53844,166.8687 234.51201,166.64035 297.61902,223.07645 c 74.36943,66.50798 74.06939,183.83474 8.09531,255.95237 C 229.54464,562.29148 96.8291,561.45911 15.714334,485.93366 -76.453418,400.11684 -75.086213,251.98848 9.9999617,161.88605 105.45379,60.804734 269.012,62.70845 368.09519,157.36214 478.09632,262.44568 489.74023,530.06221 385.51394,638.12097 z";

var path = svg.append("svg:path")
    .attr("d", dInkScape);