JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.1.0/anime.min.js"></script>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430 330">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }
      
      .cls-1,
      .cls-2,
      .cls-3,
      .cls-4 {
        stroke: #00a1c6;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2px;
      }
      
      .cls-2 {
        fill: #f3f5f7;
      }
      
      .cls-3 {
        fill: #a1f2ff;
      }
      
      .cls-4 {
        fill: none;
      }
      
      .screw {
        transform-origin: center;
      }

    </style>
    <clipPath id="clip-file">
      <rect x=0 y=0 width=215 height=600 />
      <rect x=308 y=0 width=215 height=600 />
    </clipPath>
  </defs>
  <title>Artboard 1 copy</title>
  <path class="cls-1" d="M307.93,119.56a7.66,7.66,0,0,0-7.66-7.66H158.5a7.66,7.66,0,0,0-7.66,7.66v92.07l96,61.33h61.13V119.56Z" />
  <polyline class="cls-2" points="216.22 211.3 216.22 142.14 169.55 142.14 169.55 211.3" />
  <path class="cls-1" d="M307.93,211.3h25a30.83,30.83,0,0,1,30.83,30.83h0A30.83,30.83,0,0,1,333,273H109a30.83,30.83,0,0,1-30.83-30.83h0A30.83,30.83,0,0,1,109,211.3H216.23" />
  <path class="cls-1" d="M307.93,211.3h25a30.83,30.83,0,0,1,30.83,30.83h0A30.83,30.83,0,0,1,333,273H155.34a30.83,30.83,0,0,1-30.83-30.83h0a30.83,30.83,0,0,1,30.83-30.83h54.31" />
  <line class="cls-1" x1="89.45" y1="265.99" x2="135.81" y2="265.99" />
  <line class="cls-1" x1="89.45" y1="218.73" x2="135.27" y2="218.73" />
  <line class="cls-1" x1="82.61" y1="258.11" x2="128.7" y2="258.11" />
  <line class="cls-1" x1="79.24" y1="250.24" x2="125.59" y2="250.24" />
  <line class="cls-1" x1="78.14" y1="242.36" x2="124.51" y2="242.36" />
  <line class="cls-1" x1="82.61" y1="226.61" x2="128.7" y2="226.61" />
  <line class="cls-1" x1="79.24" y1="234.48" x2="125.47" y2="234.48" />
  <circle class="cls-1" cx="154.87" cy="242.13" r="12.98" />
  <line...

CSS

body {
  /* background: white; */
}

JavaScript

anime({
  targets: '.bulb',
  fill: [{
    value: '#ffffff',
    duration: 0,
  }, {
    value: '#a1f2ff',
    duration: 5000,
  }],
  duration: 5000,
  easing: 'linear',
  loop: true
});

anime({
  targets: '.file',
  translateX: ['160', '-55'],
  duration: 5000,
  easing: 'linear',
  loop: true
});

anime({
  targets: '.screw',
  rotate: -180,
  duration: 5000,
  easing: 'linear',
  loop: true,
})