JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<link rel="stylesheet" href="https://codepen.io/GreenSock/pen/AHquG.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/DrawSVGPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/TextPlugin.min.js"></script>

<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="516.3px"
  height="190px"
  viewBox="0 0 516.3 190"
  style="enable-background:new 0 0 516.3 211.99;"
  xml:space="preserve"
>
  <path
    id="template"
    d="M9.13,99.99c0,0,18.53-41.58,49.91-65.11c30-22.5,65.81-24.88,77.39-24.88c33.87,0,57.55,11.71,77.05,28.47c23.09,19.85,40.33,46.79,61.71,69.77c24.09,25.89,53.44,46.75,102.37,46.75c22.23,0,40.62-2.83,55.84-7.43c27.97-8.45,44.21-22.88,54.78-36.7c14.35-18.75,16.43-36.37,16.43-36.37"
  />
  <path
    id="path"
    d="M9.13,99.99c0,0,18.53-41.58,49.91-65.11c30-22.5,65.81-24.88,77.39-24.88c33.87,0,57.55,11.71,77.05,28.47c23.09,19.85,40.33,46.79,61.71,69.77c24.09,25.89,53.44,46.75,102.37,46.75c22.23,0,40.62-2.83,55.84-7.43c27.97-8.45,44.21-22.88,54.78-36.7c14.35-18.75,16.43-36.37,16.43-36.37"
  />
</svg>

<div id="code">
  drawSVG:
  <div id="current">"100%"</div>
</div>
<button
  id="next"
  class="dark-grey-button club-demo-button"
  style="display:block; margin-bottom:20px;"
>
  Next Example
</button>
<!-- https://greensock.com/docs/v3/Plugins/DrawSVGPlugin -->

CSS

body {
  background-color: #1b1b1d;
  color: #ccc;
  text-align: center;
  padding-top: 1rem;
}

#template,
#path {
  fill: none;
}

#template {
  stroke-width: 5px;
  stroke: #444;
}

#path {
  stroke: #0ae448;
  stroke-width: 20px;
  visibility: hidden;
}

JavaScript

var values = "100%;40% 60%;0% 50%;50% 50%;true;10%".split(";"),
  currentIndex = 0;

//set the initial value
gsap.set("#path, #code", {
  visibility: "visible"
});

function next() {

  gsap.killTweensOf(next); //in case the user clicks, clear any delayed calls to this method. 

  if (++currentIndex === values.length) {
    currentIndex = 0;
  }

  if (values[currentIndex] === "true") {
    gsap.set("#current", { text: (values[currentIndex]) });
  } else {
    gsap.set("#current", { text: ('"' + values[currentIndex] + '"') });
  }
  
  gsap.to("#path", { drawSVG: values[currentIndex], duration: 1, ease: "power1.inOut" });

}

document.querySelector("#next").addEventListener("click", next);