JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<svg width="640" height="120" xmlns="http://www.w3.org/2000/svg">
 <g>
   <path fill="none" stroke="#000000" stroke-width="5" d="m15,101l269,3l0,-32l19,0l15,-16l0,-28l-14,-13l-36,0l-17,17l0,25l15,14" id="svg_2"/>
  <ellipse ry="11" rx="11" id="svg_3" cy="101.5" cx="21" stroke-width="2" stroke="#000000" fill="#b2b2b2"/>
  <ellipse id="svg_4" ry="11" rx="11" cy="101.5" cx="57" stroke-width="2" stroke="#000000" fill="#b2b2b2"/>
  <ellipse id="svg_5" ry="11" rx="11" cy="101.5" cx="93" stroke-width="2" stroke="#000000" fill="#b2b2b2"/>
  <ellipse id="svg_6" ry="11" rx="11" cy="101.5" cx="128" stroke-width="2" stroke="#000000" fill="#b2b2b2"/>
  <ellipse id="svg_7" ry="11" rx="11" cy="101.5" cx="163" stroke-width="2" stroke="#000000" fill="#b2b2b2"/>
  <ellipse id="svg_8" ry="11" rx="11" cy="101.5" cx="196" stroke-width="2" stroke="#000000" fill="#b2b2b2"/>
  <ellipse id="svg_9" ry="11" rx="11" cy="101.5" cx="232" stroke-width="2" stroke="#000000" fill="#b2b2b2"/>
  <ellipse id="svg_10" ry="11" rx="11" cy="101.5" cx="268" stroke-width="2" stroke="#000000" fill="#b2b2b2"/>
  <rect fill="#ccc" x="18" y="27" width="215" height="43" id="svg_15" class="lesson"/>
  <rect fill="#ccc"  x="248" y="78" width="71" height="49" id="svg_16" class="topic"/>
 </g>
</svg>
<br/>
<svg width="640" height="120" xmlns="http://www.w3.org/2000/svg">
 <g>
   <path fill="none" stroke="#000000" stroke-width="5" d="m15,101l269,3l0,-32l19,0l15,-16l0,-28l-14,-13l-36,0l-17,17l0,25l15,14" id="svg_2"/>
  <ellipse ry="11" rx="11" id="svg_3" cy="101.5" cx="21" stroke-width="2" stroke="#000000" fill="#b2b2b2"/>
  <ellipse id="svg_4" ry="11" rx="11" cy="101.5" cx="57" stroke-width="2" stroke="#000000" fill="#b2b2b2"/>
  <ellipse id="svg_5" ry="11" rx="11" cy="101.5" cx="93" stroke-width="2" stroke="#000000" fill="#b2b2b2"/>
  <ellipse id="svg_6" ry="11" rx="11" cy="101.5" cx="128" stroke-width="2" stroke="#000000" fill="#b2b2b2"/>
  <ellipse id="svg_7" ry="11" rx="11" cy="101.5" cx="163" stroke-width="2"...

CSS

svg {
    stroke-dasharray: 317px;
    stroke-dashoffset: 319px;
    transition: all 1s ease;
}
svg.open {
    stroke-dasharray: 253px;
    stroke-dashoffset: 504px;
}

svg ellipse{
    opacity: 0;
    transition: all 0.5s 1s ease;
}

svg.open ellipse{
    opacity: 1;
}

svg .lesson{
    opacity: 0;
    transition: all 0.5s 1s ease;
}

svg.open .lesson{
    opacity: 1;
}

svg .topic{
    opacity: 1;
    transition: all 0.5s 1s ease;
}

svg.open .topic{
    opacity: 0;
}
    
}

JavaScript

$('svg').on('click', function () {
    $('svg').not(this).each(function(i,v){
        v.classList.remove('open');
    })
    if (this.classList.contains('open')) {
        this.classList.remove('open');
        return;
    }
    this.classList.add('open')
});