JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="logo-container">
<div id="logo-wrap">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="logo-svg" x="0px" y="0px" viewBox="0 0 793.186 793.186" style="enable-background:new 0 0 793.186 793.186;" xml:space="preserve">
<ellipse class="svg_base" transform="matrix(1 -0.0025 0.0025 1 -0.9727 0.9751)" cx="396.593" cy="396.592" rx="396.593" ry="396.593"/>
<g class="svg_group_1 svg_anim_from-left">
	<path style="fill:#FFFFFF;" d="M61.881,254.817l42.879-114.829l31.082,0.047l42.617,114.958l-29.145-0.044l-7.21-22.248   l-43.97-0.066l-7.109,22.227L61.881,254.817z M105.412,210.239l29.481,0.045l-14.583-48.54L105.412,210.239z"/>
	<path style="fill:#FFFFFF;" d="M203.412,140.136l29.65,0.045l24.885,87.472l25.149-87.396l29.65,0.044l-38.92,114.835   l-31.756-0.048L203.412,140.136z"/>
	<path style="fill:#FFFFFF;" d="M324.618,255.213l0.173-114.894l28.302,0.043l-0.173,114.894L324.618,255.213z"/>
	<path style="fill:#FFFFFF;" d="M376.168,255.291l0.173-114.894l71.598,0.107l-0.034,22.406l-43.296-0.065l-0.035,23.164   l41.189,0.063l-0.033,22.405l-41.189-0.063l-0.037,24.512l43.801,0.066l-0.033,22.406L376.168,255.291z"/>
	<path style="fill:#FFFFFF;" d="M458.974,140.522l28.976,0.044l17.652,79.712l21.516-79.652l31.264,0.047l21.281,79.733   l17.959-79.674l28.976,0.044l-31.929,114.846l-28.809-0.044l-23.195-86.582l-23.545,86.512l-28.647-0.044L458.974,140.522z"/>
</g><g class="svg_group_2 svg_anim_from-top">
	<path style="fill:#FFFFFF;" d="M128.623,271.275l18.645,0.001v11.729h-3.636v-7.136l-4.238-0.001v6.808h-3.636v-6.808h-7.135   V271.275z"/>
	<path style="fill:#FFFFFF;" d="M128.623,285.655l18.645,0.001v5.933c0,1.585-0.21,2.978-0.629,4.176   c-0.419,1.198-1.08,2.155-1.982,2.87c-0.902,0.716-2,1.073-3.294,1.073c-1.23,0-2.313-0.35-3.246-1.047   c-0.935-0.697-1.652-1.674-2.153-2.932l-7.34,6.138v-5.659l6.466-5.126v-0.834h-6.466V285.655z M138.506,290.247v1.121  ...

SCSS

html,
body{
  background: #fff;
  margin: 0;
  padding: 0;
}

.logo-container{
  position: relative;
  overflow: hidden;
  max-width: 1280px;
  margin: 15px auto;
  
  &:after{
    content: '';
    position: relative;
    display: block;
    padding-top: 10%;
    background: -webkit-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -moz-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
  }
  
}

#logo-wrap{
  transform-origin: center center;
  transform: rotate(-7deg);
  //width: 110%;
  //margin-left: -5%;
}

$group-count: 9;
$base-delay-ms: 150;
$delay-increment-ms: 100;
$base-easing: cubic-bezier(.46,.2,.39,1.16);
$base-duration: 1s;
#logo-svg{
  overflow: visible;
  
  //-- Loop delays --//
  $i: 0;
  @while $i < $group-count{
    $i: $i + 1;
    .svg_group_#{$i}{
      animation-delay: #{($base-delay-ms + ($delay-increment-ms * ($i - 1)))}ms;
    }
  }
  
  //-- Apply animations --//
  %core-svg_anim{
    animation-iteration: 1;
    animation-fill-mode: forwards;
    animation-duration: $base-duration;
    animation-timing-function: $base-easing;
  }
  .svg_base{
    @extend %core-svg_anim;
    transform-origin: center center;
    animation-name: svg_anim_base;
    animation-duration: 600ms;
  }
  .svg_anim_from-top{
    @extend %core-svg_anim;
    transform: translateY(-100vmax);
    animation-name: svg_anim_from-top;
  }
  .svg_anim_from-bottom{
    @extend %core-svg_anim;
    transform: translateY(100vmax);
    animation-name: svg_anim_from-bottom;
  }
  .svg_anim_from-left{
    @extend %core-svg_anim;
    transform: translateX(-100vmax);
    animation-name: svg_anim_from-left;
  }
  .svg_anim_from-right{
    @extend...

JavaScript

/**
 * OOJ Logo Animation Demo
 */