JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="light">
  <div class="logo"><svg class="icon" viewbox="0 0 200 200" x="0px" y="0px"><g><defs><path d="M105,65.361V35.21c33.56,2.556,60,30.575,60,64.79c0,10.055-2.286,19.576-6.362,28.075L132.5,112.987 c1.607-4.017,2.5-8.397,2.5-12.987C135,82.368,121.96,67.788,105,65.361z M65,100c0-17.632,13.04-32.212,30-34.639V35.21 C61.44,37.766,35,65.786,35,100c0,10.055,2.286,19.576,6.362,28.075L67.5,112.987C65.893,108.97,65,104.591,65,100z M100,135 c-11.156,0-21.086-5.226-27.495-13.356l-26.131,15.083C58.088,153.797,77.733,165,100,165s41.912-11.203,53.625-28.273 l-26.131-15.083C121.086,129.774,111.156,135,100,135z" id="dash_1_"/></defs><clippath id="dash_2_"><use overflow="visible" xlink:href="#dash_1_"></use></clippath><path class="dash" clip-path="url(#dash_2_)" d="M100.005,50.006 C82.74,50.021,65.952,58.973,56.699,75C42.892,98.915,51.085,129.494,75,143.301c23.915,13.807,54.494,5.613,68.301-18.301 c13.807-23.915,5.613-54.494-18.301-68.301C117.113,52.145,108.501,49.999,100.005,50.006" fill="none" stroke-miterlimit="10" stroke-width="20"/></g><circle class="point" cx="100" cy="100" r="20" /><path class="ping outer" d="M124.993,56.702C139.938,65.347,150,81.493,150,100h10c0-22.208-12.075-41.583-30.008-51.958L124.993,56.702 z"/><path class="ping inner" d="M130,100h10c0-14.805-8.05-27.722-20.006-34.639l-4.999,8.66C123.963,79.208,130,88.896,130,100z"/></svg><svg class="text" viewbox="0 0 872 200" x="0px" y="0px"><g class="bike"><path class="letter" d="M261.304,64.998c13.901,0,19.201,5.5,19.201,16.701v4.8c0,5.4-2.101,9.601-5.9,12.401 c4.301,2.8,6.4,7.1,6.4,12.701v5.7c0,10.701-4.4,17.701-17.601,17.701H203c-2,0-3-1-3-3V67.998c0-2,1-3,3-3H261.304z M218.201,93.199h38.702c4.5,0,6.101-1.5,6.101-4.5v-2.9c0-3.1-1.7-4.5-5.601-4.5h-38.002c-0.8,0-1.2,0.5-1.2,1.4V93.199z M218.201,106v11.301c0,1,0.4,1.4,1.2,1.4h38.103c3.899,0,5.6-1.4,5.6-4.601v-3.2c0-3.2-1.7-4.9-6.2-4.9H218.201z"/><path class="letter" d="M307.899,64.998c1.7,0,2.601,0.9,2.601,2.6v64.804c0,1.7-0.9,2.6-2.601,2.6h-13...

SCSS

$trac-orange   : #fc4c01;
$trac-black    : #100d14;
$trac-white    : #ffffff;

$size : 100;

HTML,
BODY {
  height: 100%;
  position: relative;
}

.light {
  position: relative;
  background: $trac-white;
  height: 50%;

  .icon {
    .dash {
      stroke: $trac-black;
      animation: dash-light 3s ease-in;
    }
    .point {
      fill: $trac-orange;
    }
    .ping {
      fill: $trac-orange;
    }
  }
  .text {
    .bike .letter {
      fill: $trac-orange;
    }
    .trac .letter {
      fill: $trac-black;
    }
  }

}

.dark {
  position: relative;
  height: 50%;
  background: $trac-black;

  .icon {
    .dash {
      stroke: $trac-white;
      animation: dash-dark 3s ease-in;
    }
    .point {
      fill: $trac-orange;
    }
    .ping {
      fill: $trac-orange;
    }
  }
  .text {
    .bike .letter {
      fill: $trac-orange;
    }
    .trac .letter {
      fill: $trac-white;
    }
  }

}


// logo

.logo {
  display: block;
  height: $size + px;
  width: $size + px;
  overflow: hidden;
  animation: logo-grow 1s ease-in-out 2s forwards;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

  .text {
    display: block;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    animation: logo-reveal 1s ease-in-out 2.5s forwards;

  }

  .icon {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
    transition: all 0.5s ease;
    animation: rotate 3s ease-in;
    transform: rotate(0deg);
    //transform-origin: 0% 0%;

    .dash {
      stroke-dasharray: 315;
      stroke-dashoffset: 105;
    }

    .point {
      transform: scale(0, 0);
      transform-origin: 50% 50%;
      animation: point 1.5s ease-in 1.5s forwards;
    }

    .ping {

      &.inner {
        opacity: 0;
        animation: ping 1.98s ease-in 1.8s 1 forwards;
      }

      &.outer {
        opacity: 0;
        animation: ping 1.98s ease-in 2.1s 1 forwards;
    ...