Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/flubber@0.4.2/build/flubber.min.js"></script>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 749 463" width="749" height="463">
  <g>
      <path d="m 749,0 v 202.53959 c -36.43367,15.47407 -127.16501,82.0688 -136.28742,122.18421 -1.4767,33.33904 63.02305,32.32552 94.67962,34.23058 3.51086,0.2261 16.03267,-0.11351 15.02323,0.38832 -44.46378,17.45024 -109.40842,32.76337 -170.07214,42.44059 -9.37294,1.08076 -20.31386,2.16813 -19.68536,0.91581 36.58369,-50.59523 -9.50222,-53.1674 -57.57672,-44.85928 -29.8722,5.60886 -51.54362,14.8939 -92.53069,19.58046 -43.50569,6.18058 -64.51565,-3.62005 -65.18231,-12.49938 0.39899,-16.03786 13.13884,-25.06982 20.44337,-36.30008 6.30653,-8.31737 12.68917,-16.01601 18.10584,-24.06821 10.09061,-15.40021 -0.24871,-22.0719 -19.58396,-14.13794 -19.11944,7.12591 -30.36227,13.74369 -51.63698,27.20472 -19.6935,11.54182 -48.72804,30.65434 -61.8604,50.25074 -14.77616,22.1642 0.68592,33.74462 9.70359,35.17553 l 37.42814,8.49064 c 7.72916,1.53276 14.0377,4.97979 13.689,9.18376 -0.16717,4.73538 -8.62786,8.86151 -15.42178,10.39671 -28.49685,9.37261 -74.29463,17.51582 -115.40344,22.17964 -25.44315,3.52184 -61.74259,7.39593 -90.971186,8.31736 -32.344646,-0.1282 -41.16451,-9.87484 -41.066991,-25.47193 1.183409,-13.86645 8.350421,-31.26492 22.179641,-50.94386 17.738239,-27.08059 28.351675,-41.20625 55.102545,-62.55352 25.642761,-18.6182 50.580061,-37.90268 77.455461,-53.19648 39.33421,-23.40561 78.66841,-47.38618 118.00262,-68.09843 24.09818,-13.1114 47.22204,-26.22281 68.96482,-39.33421 9.7481,-5.83173 19.24824,-11.77751 27.72455,-18.19423 9.35484,-9.48241 3.14014,-9.51884 -5.19835,-6.23803 -35.9808,12.73681 -62.94597,27.19627 -93.05052,41.93339 -31.13236,16.17513 -62.26472,32.30456 -93.39708,47.82485 -19.74244,10.50853 -39.2027,20.88028 -60.99402,32.57634 L 77.108907,292.49401 C 51.498678,306.0683 27.929114,317.74426 0.69311377,334.25412 -0.87641384,334.56497 16.152976,319.65937 23.912425,312.42103 c 35.047366,-29.2908 71.592048,-52.94279 107.432635,-77.1089 25.95411,-17.33954 52.56341,-33.8055 77.62874,-52.33009 l 9.01048,-6.75786 c 8.65578,-7.62828 5.47296,-8.77606 -5.29373,-5.89147 -19.3204,5.21044 -42.59956,13.58416 -64.53748,20.79341 -16.10236,3.45968 -31.04265,9.04981 -45.74551,15.07523 -14.978173,5.32208 -31.235824,10.23454 -50.424027,14.20883 -6.918285,1.26107 -13.217031,2.05748 -17.327844,1.21295 -8.949896,-2.62435 -3.154512,-8.85264 0.71875,-13.06119 8.382585,-8.69569 15.91309,-16.07267 24.060067,-21.94106 14.57041,-9.83047 27.458536,-21.70462 39.208621,-34.82546 12.806793,-12.80052 25.279313,-28.01963 28.571693,-30.72207 3.19423,-3.51175 32.52685,-23.852559 45.19723,-33.567737 14.09629,-10.481349 29.77931,-21.073637 46.09207,-31.709955 13.62985,-9.361206 27.81781,-17.04807 42.10666,-24.43226 l 59.83063,-31.36730425 h 26.40234 C 349.88537,-0.1128813 316.625,17.998699 301,27.000001 c -20.4244,11.790725 -41.32101,23.014785 -59.5,37.5 -8.011,7.121522 -16.5347,13.803594 -23,22.25 -5.0359,7.108207 -5.1632,15.151569 5.69194,11.118718 14.86782,-6.604928 30.08623,-12.814356 42.48484,-20.015165 2.70404,-2.370857 15.82259,-9.676146 22.32322,-13.103553 24.54291,-11.85603 48.96189,-24.276174 72,-34.25 27.0543,-11.120146 52.91529,-20.6492033 79.02344,-30.50781326 z"/>
			<path d="M 674.99866,124.5625 A 96.963501,96.963501 0 0 1 -96.9635,96.9635 96.963501,96.963501 0 0 1 -96.9635,-96.9635 96.963501,96.963501 0 0 1 96.9635,-96.963501 96.963501,96.963501 0 0 1 96.9635,96.963501 Z"/>
    
   </g>
</svg>
              
            
!

CSS

              
                path {
  fill: #aa00ff;
  display: none;
}


              
            
!

JS

              
                var pathStrings = [...document.querySelectorAll("path")].map(d => d.getAttribute("d"));
d3.selectAll("path").filter((d, i) => i).remove();
d3.select("path").style("display", "block").call(animate);

function animate(sel) {
  var start = pathStrings.shift();
  var end = pathStrings[0];
  pathStrings.push(start);
  sel.datum({start, end}).transition().duration(1500)
    .attrTween("d", d => flubber.interpolate(d.start, d.end, {maxSegmentLength: 0.1}))
    .on("end", e => sel.call(animate));
}
              
            
!
999px

Console