JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="controls">
  <button id="width">Width Increase</button>
  <button id="grow">Grow Along</button>
</div>

<svg id="map" xmlns="http://www.w3.org/2000/svg" width="1149.709" height="1080.172" viewBox="0 0 1149.709 1080.172">
  <g id="trunks" transform="translate(-482.089)">
    <path d="M975.106,489.7s12.854,16.527,11.018,26.321-3.673,67.333-3.673,80.188,6.733,67.333,3.673,80.8-3.673,56.315-3.673,64.273-.612,85.085,0,91.818-3.061,17.751-3.673,37.339,6.733,31.218,7.345,41.012,4.9,71.618,6.121,75.291,2.448,22.036-6.121,36.115-16.527,26.933-14.079,31.218,29.994,23.873,29.994,23.873" fill="none"/>
    <path d="M796.979,593.755s36.115,18.976,55.091,25.1,24.485-4.285,36.727,11.018,10.406,11.63,29.994,29.382,66.721,30.606,75.9,25.709,55.091-6.733,67.945-5.509,47.133-2.448,55.7-4.285,13.467-10.406,20.812-9.182,64.272,39.176,71.006,47.745,30.606,7.958,35.5,12.242S1285.45,767.6,1285.45,767.6" fill="none"/>
    <path d="M954.294,932.869s55.091-67.333,57.539-69.782,25.709-56.315,25.709-56.315,18.364-22.648,22.036-33.054,3.061-17.752,0-25.1-5.509-75.9-2.448-85.085,14.079-39.788,11.63-50.194-3.061-36.115-3.061-36.115,61.212-51.418,74.679-51.418,36.115-17.139,45.909,0,34.279-17.139,37.339-20.812,18.364,1.224,25.1-4.285,21.424-23.873,23.26-24.485,19.588-4.285,19.588-4.285" fill="none"/>
    <path d="M896.754,525.2c-2.448,7.345-15.915,75.9-17.139,77.739s2.448,42.848,3.061,45.3,1.224,99.775,2.448,108.345,0,91.206,0,91.206" fill="none"/>
    <path d="M1210.159,1020.4c0-1.836-25.1-37.951-25.1-37.951l-58.151-15.915s-27.545-15.915-33.054-26.933-25.709-42.848-25.709-58.151-3.673-47.745-4.285-64.885,0-53.254,0-53.254" fill="none"/>
    <path d="M1092.632,1005.1s25.1-26.933,57.539-23.261,69.169-7.958,79.575-14.691,37.339-25.709,63.048-24.485,65.5.612,74.679,0,40.4-9.794,45.3-18.364,7.345-31.218,9.794-41.012,6.733-17.139,16.527-20.812,25.709-15.3,25.709-15.3" fill="none"/>
    <path...

SCSS

$brand-dark: #0e0727;
$brand-dark-medium: #221c3a;
$brand-light: #a59fb8;
$brand-accent: #42B98B;


$motorway-width: 7px;
$trunk-width: $motorway-width - 2;


* {box-sizing: border-box;}

svg {
  max-width: 100%;
}


#motorways {
  path {
    stroke: $brand-dark;
    stroke-width: 0;
    stroke-linecap: round;
  }
}

#trunks {
  
  path {
    stroke: $brand-light;
    stroke-width: 0;
    stroke-linecap: round;
  }
}

#map.grow #motorways path {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  stroke-width: $motorway-width;
  animation: grow 2s linear forwards;
}

#map.grow #trunks path {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
 stroke-width: $trunk-width;
  animation: grow 2s linear forwards;
}

#map.width #motorways path {
  animation: width-m 0.8s cubic-bezier(.17,.67,.88,1.32) forwards;
}
#map.width #trunks path {
  animation: width-t 0.8s cubic-bezier(.17,.67,.88,1.32) forwards;
}



@keyframes grow {
    0%, 20% {stroke-dashoffset: 3000;}
    100% {
      stroke-dashoffset: 0;
    }
}

@keyframes width-m {
  0%, 20% {stroke-width: 0;}
  100% {
    stroke-width: $motorway-width;
  }
}
@keyframes width-t {
  0%, 20% {stroke-width: 0;}
  100% {
    stroke-width: $trunk-width;
  }
}


//irrelevant style

.controls {
  position: absolute;
  top:0;
  left:0;
  padding: 20px;
}

button {
  border: none;
  background: $brand-dark-medium;
  color: $brand-light;
  padding: 10px 20px;
  margin-right: 20px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.17,.67,.88,1.32) forwards;
  
  &:focus {
    color: $brand-accent;
  }
}

JavaScript

// Buttons
let growTrig = document.getElementById("grow");
let widthTrig = document.getElementById("width");

// Paths
let map = document.getElementById("map");


growTrig.addEventListener('click', event => {
  map.classList.remove('width');
  map.classList.add('grow');
});

widthTrig.addEventListener('click', event => {
  map.classList.remove('grow');
  map.classList.add('width');
});