JSFiddle - React, Tailwind, and code Playground

by Dominic Myers

HTML

<div>
    <svg width="86" height="94" version="1.1" viewBox="0 0 86 94" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
        <path id="Frame" d="m0 0v94h86v-94zm2 2h82v90h-82z" />
        <g id="TheTeaSet">
            <path id="T" d="m4 4h78v14h-32v72h-14v-72h-32z" />
            <g id="tHe">
                <rect id="tHel" x="52" y="20" width="6" height="22" />
                <rect id="tHer" x="60" y="20" width="6" height="22" />
            </g>
            <g id="thE">
                <rect id="theEt" x="68" y="20" width="14" height="6" />
                <rect id="theEm" x="68" y="28" width="14" height="6" />
                <rect id="theEb" x="68" y="36" width="14" height="6" />
            </g>
            <g id="tEa">
                <rect id="tEat" x="52" y="44" width="14" height="6" />
                <rect id="tEam" x="52" y="52" width="14" height="6" />
                <rect id="tEab" x="52" y="60" width="14" height="6" />
            </g>
            <g id="teA">
                <path id="teAl" d="m72 44-4 22h5l4-22z" />
                <path id="teAr" d="m73 44 4 22h5l-4-22z" />
            </g>
            <g id="Set">
                <path id="Sett" d="m18 80h-7l-7 10h7z" />
                <path id="Setb" d="m18 68h-7l-7 10h7z" />
            </g>
            <g id="sEt">
                <rect id="sEtt" x="20" y="68" width="14" height="6" />
                <rect id="sEtm" x="20" y="76" width="14" height="6" />
                <rect id="sEtb" x="20" y="84" width="14" height="6" />
            </g>
        </g>
    </svg>
</div>

SCSS

$main-duration: 10s;
$base-percentage: 3%;
@mixin animate_movement($initial, $id, $main-duration, $delay, $duration) {
  $animation-name: unique-id() !global;
  @keyframes #{$animation-name} {
    
    0%, 
    #{$delay * $base-percentage} {
      transform: $initial;
    }
    
    #{($delay + $duration) * $base-percentage}, 
    100% {
      transform: translate(0px, 0px);
    }
  }
  ##{$id} {
    transform: $initial;
    animation: $animation-name  $main-duration linear infinite alternate;
  }
}

@include animate_movement(translateY(-88px), TheTeaSet, $main-duration, 1, 5);
@include animate_movement(translateX(-16px), tHe, $main-duration, 9, 3);
@include animate_movement(translateX(-32px), thE, $main-duration, 6, 6);
@include animate_movement(translateX(-16px), tEa, $main-duration, 15, 3);
@include animate_movement(translateX(-32px), teA, $main-duration, 12, 6);
@include animate_movement(translateX(32px), Set, $main-duration, 18, 6);
@include animate_movement(translateX(16px), sEt, $main-duration, 21, 3);