Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <h1>Motion Periodic Table</h1>
<h2>Part 1</h2>
<p>Clone of Kazuki's Akamine Motion Periodic table </p>
<div class="container">
    <div class="block" id="orbit"><p>Orbit</p>
    <div class="circle-orbit"></div>
    <div class="small-circle-orbit"></div>
  </div>
  <div class="block" id="fractal-noise">
    <p>Fractal noise</p>
    <div class="fnstroke1 fnstroke"></div>
    <div class="fnstroke2 fnstroke"></div>
    <div class="fnstroke3 fnstroke"></div>
    <div class="fnstroke4 fnstroke"></div>
    <div class="fnstroke5 fnstroke"></div>
    <div class="fnstroke6 fnstroke"></div>
    <div class="fnstroke7 fnstroke"></div>
    <div class="fnstroke8 fnstroke"></div>
    <div class="fnstroke9 fnstroke"></div>
    <div class="fnstroke10 fnstroke"></div>
    <div class="fnstroke11 fnstroke"></div>
    <div class="fnstroke12 fnstroke"></div>
    <div class="fnstroke13 fnstroke"></div>
    <div class="fnstroke14 fnstroke"></div>
    <div class="fnstroke15 fnstroke"></div>
    <div class="fnstroke16 fnstroke"></div>
    <div class="fnstroke17 fnstroke"></div>
    <div class="fnstroke18 fnstroke"></div>
    <div class="fnstroke19 fnstroke"></div>
    <div class="fnstroke20 fnstroke"></div>
    <div class="fnstroke21 fnstroke"></div>
    <div class="fnstroke22 fnstroke"></div>
    <div class="fnstroke23 fnstroke"></div>
    <div class="fnstroke24 fnstroke"></div>
    <div class="fnstroke25 fnstroke"></div>
    <div class="fnstroke26 fnstroke"></div>
    <div class="fnstroke27 fnstroke"></div>
    <div class="fnstroke28 fnstroke"></div>
    <div class="fnstroke29 fnstroke"></div>
    <div class="fnstroke30 fnstroke"></div>
    <div class="fnstroke31 fnstroke"></div>
    <div class="fnstroke32 fnstroke"></div>
    <div class="fnstroke33 fnstroke"></div>
    <div class="fnstroke34 fnstroke"></div>
  </div>
<div class="block" id="offset">
  <p>Offset</p>
  <svg class="offset-line" version="1.1" xmlns="http://www.w3.org/2000/svg" width="70" height="80" viewbox="0 0 69.28203230275508 80" style="filter: drop-shadow(rgba(255, 255, 255, 0.5) 0px 0px 10px);"><path stroke="white" fill="transparent" d="M34.64101615137754 0L69.28203230275508 20L69.28203230275508 60L34.64101615137754 80L0 60L0 20Z"></path></svg>
  </div>
<div class="block" id="line-weight">
  <p>Line weight</p>
  <div class="line-weight-circle"></div>
  </div>
  <div class="block" id="blur">
    <p>Blur</p>
    <div class="blur-div"></div>
  </div>
<div class="block" id="move">
  <p>Move</p>
  <div class="move-div"></div>
  </div>
<div class="block" id="rotate">
  <p>Rotate</p>
  <div class="rotate-div"></div>
  </div>
<div class="block" id="scale">
  <p>Scale</p>
  <div class="scale-div"></div>
  </div>
<div class="block" id="trim-line">
  <p>Trim line</p>
  <div class="trimline-overflow">
  <div class="trimline-div"></div>
  </div>
  </div>
<div class="block" id="rough-edge"></div>
<div class="block" id="vegas">
  <p>Vegas</p>
  <div class="vegas-ball vb1"></div>
  <div class="vegas-ball vb2"></div>
  <div class="vegas-ball vb3"></div>
  <div class="vegas-ball vb4"></div>
  <div class="vegas-ball vb5"></div>
  <div class="vegas-ball vb6"></div>
  <div class="vegas-ball vb7"></div>
  <div class="vegas-ball vb8"></div>
  <div class="vegas-ball vb9"></div>
  <div class="vegas-ball vb10"></div>
  <div class="vegas-ball vb11"></div>
  <div class="vegas-ball vb12"></div>
  <div class="vegas-ball vb13"></div>
  <div class="vegas-ball vb14"></div>
  <div class="vegas-ball vb15"></div>
  <div class="vegas-ball vb16"></div>
  <div class="vegas-ball vb17"></div>
  <div class="vegas-ball vb18"></div>
  <div class="vegas-ball vb19"></div>
  <div class="vegas-ball vb20"></div>
  <div class="vegas-ball vb21"></div>
  <div class="vegas-ball vb22"></div>
  <div class="vegas-ball vb23"></div>
  <div class="vegas-ball vb24"></div>
  <div class="vegas-ball vb25"></div>
  <div class="vegas-ball vb26"></div>
  <div class="vegas-ball vb27"></div>
  <div class="vegas-ball vb28"></div>
  <div class="vegas-ball vb29"></div>
  <div class="vegas-ball vb30"></div>
  <div class="vegas-ball vb31"></div>
  <div class="vegas-ball vb32"></div>
  <div class="vegas-ball vb33"></div>
  <div class="vegas-ball vb34"></div>
  <div class="vegas-ball vb35"></div>
  <div class="vegas-ball vb36"></div>
  <div class="vegas-ball vb37"></div>
  <div class="vegas-ball vb38"></div>
  <div class="vegas-ball vb39"></div>
  <div class="vegas-ball vb40"></div>
  <div class="vegas-ball vb41"></div>
  <div class="vegas-ball vb42"></div>
  <div class="vegas-ball vb43"></div>
  <div class="vegas-ball vb44"></div>
  </div>
<div class="block" id="shape-transform">
  <p>Shape transform</p>
  <div class="st">
    <div class="st st-smaller"></div>
  </div>
  </div>
<div class="block" id="easing">
  <p>Easing</p>
  <div class="easing-bs">
    <div class="easing-stroke"></div>
    <div class="easing-ball"></div>
  </div>
  <div class:"easing-s">
  <div class="easing-s1"></div>
  <div class="easing-s2"></div>
  </div>
  </div> 
<div class="block" id="depth-of-field">
  <p>Depth of field</p>
  <div class="dof-block"></div>
  <div class="dof-circle"></div>
  </div>
<div class="block" id="symmetric-move">
  <p>Symmetric move</p>
  <div class="sm1 sm-div"></div>
  <div class="sm2 sm-div"></div>
  </div>
<div class="block" id="symmetric-rotate">
  <p>Symmetric rotate</p>
  <div class="sr1 sr-div"></div>
  <div class="sr2 sr-div"></div>
  </div>
<div class="block" id="symmetric-scale">
  <p>Symmetric scale</p>
  <div class="ss1 ss-div"></div>
  <div class="ss2 ss-div"></div>
  </div>
<div class="block" id="trim-circle">
  <p>Trim circle</p>
  <div class="tc-wrapper">
  <div class="tc-dial-container tc-container1">
    <div class="tc-wedge"></div>
  </div>
  <div class="tc-dial-container tc-container2">
    <div class="tc-wedge"></div>
  </div>
</div>
  </div>
<div class="block" id="turbulent-displace">
  </div>
<div class="block" id="loop">
  <p>Loop</p>
  <div class="loop-div">
    <div class="loop-hexagon lh1"></div>
    <div class="loop-hexagon lh2"></div>
    <div class="loop-hexagon lh3"></div>
   <div class="loop-hexagon lh4"></div>
   <div class="loop-hexagon lh5"></div>
  </div>
  </div>
<div class="block" id="repeat-transform">
  <p>Repeat transform</p>
  <div class="rt-shape rts1"></div>
  <div class="rt-shape rts2"></div>
  <div class="rt-shape rts3"></div>
  <div class="rt-shape rts4"></div>
  <div class="rt-shape rts5"></div>
  </div>
<div class="block" id="rhythm">
  <p>Rhythm</p>
  <div class="rhytm-div">
    <div class=""></div>
    <div class=""></div>
  </div>
  </div>
<div class="block" id="tip-shape">
  <p>Tip shape</p>
  <div class="ts-ball"></div>
  <div class="ts-hexagon tsline1"></div>
  <div class="ts-hexagon tsline2"></div>
  <div class="ts-hexagon tsline3"></div>
  <div class="ts-hexagon tsline4"></div>
  <div class="ts-hexagon tsline5"></div>
  <div class="ts-hexagon tsline6"></div>
  </div>
<div class="block" id="link">
  <p>Link</p>
  <div class="link-small-ball lsb1"></div>
  <div class="link-small-ball lsb2"></div>
  <div class="link-small-ball lsb3"></div>
  <div class="link-big-ball"></div>
  </div>
<div class="block" id="mask-wipe">
  <p>Mask wipe</p>
  <div class="mw-outside">
    <div class="mw-inside"></div>
  </div>
  </div>
<div class="block" id="spin-fade">
  <p>Spin Fade</p>
  <div class="sfblock sf1"></div>
  <div class="sfblock sf2"></div>
  </div>
<div class="block" id="seribble">
  <p>Seribble</p>
  <div class="seribble-container">
    <div class="sline sl1"></div>
    <div class="sline sl2"></div>
    <div class="sline sl3"></div>
    <div class="sline sl4"></div>
    <div class="sline sl5"></div> 
    <div class="sline sl6"></div>
    <div class="sline sl7"></div>
    <div class="sline sl8"></div>
    <div class="sline sl9"></div>
    <div class="sline sl10"></div>
    <div class="sline sl11"></div>
    <div class="sline sl12"></div>
    <div class="sline sl13"></div>
    <div class="sline sl14"></div>
    <div class="sline sl15"></div>
    <div class="sline sl16"></div>
    <div class="sline sl17"></div>
    <div class="sline sl18"></div>
    <div class="sline sl19"></div>
  </div>
  </div>
<div class="block" id="text">
  <p>Text</p>
  <div class="text-container">
    <p class="textp">A</p>
    <p class="textp t-small">a</p>
    <p class="textp">B</p>
    <p class="textp t-small">b</p>
    <p class="textp">C</p>
    <p class="textp t-small">c</p>
    <p class="textp">L</p>
    <p class="textp t-small">l</p>
    <p class="textp">M</p>
    <p class="textp t-small">m</p>
    <p class="textp">N</p>
    <p class="textp t-small">n</p>
    <p class="textp">R</p>
    <p class="textp t-small">r</p>
    <p class="textp">X</p>
    <p class="textp t-small">x</p>
    <p class="textp">Y</p>
    <p class="textp t-small">y</p>
    <p class="textp">Z</p>
    <p class="textp t-small">z</p>
  </div>  
  </div>

              
            
!

CSS

              
                /**
 * index.scss
 * - Add any styles you want here!
 */
body{
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #626868;
  color: white;
}
h1{
  display:block;
  width: 100%;
  font-weight: 100;
  font-size: 2.5em;
  position: ;
}
h2{
  margin-bottom: 5%:
}
.container{
  margin-top: 5%;
  width: 1200px;
  height: 1000px;
  position: absolute;
  top: 60%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: white;
}
.block{
  width:100px;
  height:150px;
  position: absolute;
  overflow: hidden;
}
/* position & background-color all boxes*/
#orbit{
  background-color: #104974;
  color: white;
  top: 150px;
  left: 200px;
}
#fractal-noise{
  top: 300px;
 left: 1200px;
 background-color: black;
}
#offset{
  top: 150px;
  background-color: #FFBF00;
}
#line-weight{
  top: 150px;
  left: 100px;
  background-color: #7F5A83;
}
#blur{
  top: 150px;
  left: 300px;
  background-color: #E4572E;
}
#move{
  top: 150px;
  left: 400px;
  background-color: #0CA4A5;
}
#rotate{
  top: 150px;
  left: 500px;
  background-color: #403F4C;
}
#scale{
  top: 150px;
  left: 600px;
  background-color: #F4E3B2;
}
#trim-line{
  top: 150px;
  left: 700px;
  background-color: #A2D729;
}
#vegas{
  top: 300px;
  background-color: #DA5552;
}
#shape-transform{
  top:300px;
  left: 100px;
  background-color: #2CA6A4;
}
#easing{
  top: 300px;
  left: 200px;
  background-color: #F28F3B;
}
#depth-of-field{
  top: 300px;
  left: 300px;
  background-color: #D55672;
}
#symmetric-move{
  top: 300px;
  left: 400px;
  background-color: #E8985E;
}
#symmetric-rotate{
  top: 300px;
  left: 500px;
  background-color: #00A676;
}
#symmetric-scale{
  top: 300px;
  left: 600px;
  background-color: #456990;
}
#trim-circle{
  top: 300px;
  left: 700px;
  background-color: #C1666B;
}
#loop{
  top:300px;
  left: 800px;
  background-color: #2274A5;
}
#repeat-transform{
    top:150px;
  left: 800px;
  background-color: #BD4089;
}
#rhythm{
  top:150px;
  left: 900px;
  background-color: #8D5B4C;
}
#tip-shape{
  top:300px;
  left: 900px;
  background-color: #2FBF71;
}
#link{
  top: 150px;
  left: 1000px;
  background-color: #FFE066;
}
#mask-wipe{
  top: 300px;
  left: 1000px;
  background-color: #6B818C;
}
#spin-fade{
  top: 150px;
  left: 1100px;
  background-color: #76BED0;
}
#seribble{
  top: 300px;
  left: 1100px;
  background-color: #59C9A5;
}
#text{
  top: 150px;
  left: 1200px;
  background-color: #B5446E;
}
#bend{
  top: 450px;
  left: 900px;
  background-color: #E07A5F;
}




/* ORBIT */
.circle-orbit{
  width:70px;
  height:70px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
  position: absolute;
  left: 15px;
}
.small-circle-orbit{
  width:10px;
  height:10px;
  border-radius:50%;
  background-color: white;
  position:absolute;
  left: 45px;
  top: 81px;
  -webkit-animation: orbit-animation 2s linear infinite;
}
/* FRACTAL NOISE */
.fnstroke{
  display: inline-block;
  height: 100px;
  width: 3px;
  background-color: white;
  position: absolute;
  -webkit-animation: fractal-noise-animation 1s steps(5, end) infinite; 
}
.fnstroke1{
  left: 0px;
  animation-delay: 0ms;
}
.fnstroke2{
  left: 3px;
  animation-delay: 100ms;
}
.fnstroke3{
  left: 6px;
  animation-delay: 700ms;
}
.fnstroke4{
  left: 9px;
  animation-delay: 200ms;
}
.fnstroke5{
  left: 12px;
  animation-delay: 800ms;
}
.fnstroke6{
  left: 15px;
  animation-delay: 100ms;
}
.fnstroke7{
  left: 18px;
  animation-delay: 500ms;
}
.fnstroke8{
  left: 21px;
  animation-delay: 300ms;
}
.fnstroke9{
  left: 24px;
  animation-delay: 800ms;
}
.fnstroke10{
  left: 27px;
  animation-delay: 100ms;
}
.fnstroke11{
  left: 30px;
  animation-delay: 500ms;
}
.fnstroke12{
  left: 33px;
  animation-delay: 300ms;
}
.fnstroke13{
  left: 36px;
  animation-delay: 700ms;
}
.fnstroke14{
  left: 39px;
  animation-delay: 0ms;
}
.fnstroke15{
  left: 42px;
  animation-delay: 300ms;
}
.fnstroke16{
  left: 45px;
  animation-delay: 800ms;
}
.fnstroke17{
  left: 48px;
  animation-delay: 600ms;
}
.fnstroke18{
  left: 51px;
  animation-delay: 100ms;
}
.fnstroke19{
  left: 53px;
  animation-delay: 500ms;
}
.fnstroke20{
  left: 56px;
  animation-delay: 800ms;
}
.fnstroke21{
  left: 59px;
  animation-delay: 200ms;
}
.fnstroke22{
  left: 62px;
  animation-delay: 600ms;
}
.fnstroke23{
  left: 65px;
  animation-delay: 100ms;
}
.fnstroke24{
  left: 68px;
  animation-delay: 700ms;
}
.fnstroke25{
  left: 71px;
  animation-delay: 300ms;
}
.fnstroke26{
  left: 74px;
  animation-delay: 800ms;
}
.fnstroke27{
  left: 77px;
  animation-delay: 500ms;
}
.fnstroke28{
  left: 80px;
  animation-delay: 200ms;
}
.fnstroke29{
  left: 83px;
  animation-delay: 700ms;
}
.fnstroke30{
  left: 86px;
  animation-delay: 300ms;
}
.fnstroke31{
  left: 89px;
  animation-delay: 0ms;
}
.fnstroke32{
  left: 92px;
  animation-delay: 100ms;
}
.fnstroke33{
  left: 95px;
  animation-delay: 400ms;
}
.fnstroke34{
  left: 98px;
  animation-delay: 900ms;
}

/*  OFFSET  */
.offset-line {
  stroke-dasharray: 30;
  stroke-width: 3px;
  animation: offset-animation 5s linear infinite both;
}

/*  LINE WEIGHT*/
.line-weight-circle{
  width: 75px;
  height:75px;
  border: 5px solid red;
  border-radius: 50%;
  margin-left: 6px;
  -webkit-animation-name: line-weight;
  -webkit-animation-duration: 500ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}
/* BLUR */
.blur-div{
  width:80px;
  height:80px;
  background-color: #FFBF00;
  border-radius: 50%;
  margin-left: 10px;
  -webkit-animation: blur-animation 1s linear infinite;
}
/* MOVE */
.move-div{
  width: 30px;
  height: 30px;
  background-color: #8EB1C7;
  position: absolute;
  left: -40px;
  top: 65px;
  -webkit-animation: move-animation 1s linear infinite reverse;
}
/* ROTATE */
.rotate-div{
  width: 45px;
  height: 45px;
  border: 10px solid #3454D1;
  margin-left: 17px;
  -webkit-animation: rotate-animation 2s linear infinite;
}
/* SCALE */
.scale-div{
  background-color: #E84855;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 32px;
  top: 60px;
  -webkit-animation: scale-animation 3s linear infinite alternate;
}
/* TRIM LINE */
.trimline-overflow{
  width: 90px;
  height: 90px;
  margin-left: 5px;
  overflow: hidden;
}
.trimline-div{
  width: 98px;
  height: 10px;
  background-color: white;
  -webkit-animation: trimline-animation 2.5s ease-in-out infinite;
  margin-left: -100px;
  margin-top: 20px;
}
/* ROUGH EDGE*/
/* VEGAS */
.vegas-ball{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  left: 20px;
  -webkit-animation: vegas-animation 1.3s linear infinite;
}
.vb1{
  animation-delay:0s;
  background-color: rgba(255,255,255,1);
}
.vb2{
  animation-delay:25ms;
  background-color: rgba(255,255,255,.9);
}
.vb3{
  animation-delay:50ms;
  background-color: rgba(255,255,255,.8);
}
.vb4{
  animation-delay:75ms;
  background-color: rgba(255,255,255,.7);
}
.vb5{
  animation-delay:100ms;
  background-color: rgba(255,255,255,.6);
}
.vb6{
  animation-delay:125ms;
  background-color: rgba(255,255,255,.5);
}
.vb7{
  animation-delay:150ms;
  background-color: rgba(255,255,255,.4);
}
.vb8{
  animation-delay:175ms;
  background-color: rgba(255,255,255,.3);
}
.vb9{
  animation-delay:200ms;
  background-color: rgba(255,255,255,.2);
}
.vb10{
  animation-delay:225ms;
  background-color: rgba(255,255,255,.1);
}
.vb11{
  animation-delay:250ms;
  background-color: rgba(255,255,255,0);
}
.vb12{
  animation-delay:325ms;
  background-color: rgba(255,255,255,1);
}
.vb13{
  animation-delay:350ms;
  background-color: rgba(255,255,255,.9);
}
.vb14{
  animation-delay:375ms;
  background-color: rgba(255,255,255,.8);
}
.vb15{
  animation-delay:400ms;
  background-color: rgba(255,255,255,.7);
}
.vb16{
  animation-delay:425ms;
  background-color: rgba(255,255,255,.6);
}
.vb17{
  animation-delay:450ms;
  background-color: rgba(255,255,255,.5);
}
.vb18{
  animation-delay:475ms;
  background-color: rgba(255,255,255,.4);
}
.vb19{
  animation-delay:500ms;
  background-color: rgba(255,255,255,.3);
}
.vb20{
  animation-delay:525ms;
  background-color: rgba(255,255,255,.2);
}
.vb21{ 
  animation-delay:550ms;
  background-color: rgba(255,255,255,.1);}
.vb22{
  animation-delay:575ms;
  background-color: rgba(255,255,255,0);
}
.vb23{
  animation-delay:640ms;
  background-color: rgba(255,255,255,1);
}
.vb24{
  nimation-delay:650ms;
  background-color: rgba(255,255,255,.9);
}
.vb25{
  animation-delay:675ms;
  background-color: rgba(255,255,255,.8);
}
.vb26{
  animation-delay:700ms;
  background-color: rgba(255,255,255,.7);
}
.vb27{
  animation-delay:725ms;
  background-color: rgba(255,255,255,.6);
}
.vb28{
  animation-delay:750ms;
  background-color: rgba(255,255,255,.5);
}
.vb29{
  animation-delay:775ms;
  background-color: rgba(255,255,255,.4);
}
.vb30{
  animation-delay:800ms;
  background-color: rgba(255,255,255,.3);
}
.vb31{
  animation-delay:825ms;
  background-color: rgba(255,255,255,.2);
}
.vb32{
  animation-delay:850ms;
  background-color: rgba(255,255,255,.1);
}
.vb33{
  animation-delay:875ms;
  background-color: rgba(255,255,255,0);
}
.vb34{
  animation-delay:950ms;
  background-color: rgba(255,255,255,1);
}
.vb35{
  animation-delay:975ms;
  background-color: rgba(255,255,255,.9);
}
.vb36{
  animation-delay:1000ms;
  background-color: rgba(255,255,255,.8);
}
.vb37{
  animation-delay:1025ms;
  background-color: rgba(255,255,255,.7);
}
.vb38{
  animation-delay:1050ms;
  background-color: rgba(255,255,255,.6);
}
.vb39{
  animation-delay:1075ms;
  background-color: rgba(255,255,255,.5);
}
.vb40{
  animation-delay:1100ms;
  background-color: rgba(255,255,255,.4);
}
.vb41{
   animation-delay:1125ms;
  background-color: rgba(255,255,255,.3);
}
.vb42{
   animation-delay:1150ms;
  background-color: rgba(255,255,255,.2);
}
.vb43{
   animation-delay:1175ms;
  background-color: rgba(255,255,255,.1);
}
.vb{
 animation-delay:1200ms;
  background-color: rgba(255,255,255,0);
}
/* SHAPE TRANSFORM */
.st{
  background-color: #D1FAFF;
  margin-left: 17px;
  margin-top: -5px;
  width: 65px;
  height: 70px;
 -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: shape-transform-animation 2s ease-in-out alternate infinite;
}
.st-smaller{
  width: 55px;
  height: 60px;
  position: absolute;
  top: 75px;
  left: 5px;
  background-color: #2CA6A4;
}
/* EASING */
.easing-ball{
  width:10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 85px;
  animation: ease-ball 2s infinite;
}
.easing-stroke{
  border-left: 1px dashed white;
  height: 100px;
  position: absolute;
  left: 4px;
  animation: ease-stroke 2s infinite;
}
.easing-s1{
  width: 3px;
  height: 90px;
  background-color: rgba(255,255,255, 0);
  transform: rotate(30deg);
}
.easing-s2{
  width:3px;
  height: 120px;
  background-color: rgba(255,255,255, 0);
  transform: rotate(-40deg);
  position: absolute;
  left: 60px;
  top: 42px;
}
.easing-s1, .easing-s2{
  animation: easing-background 2s infinite;
}
/* DEPTH OF FIELD */
.dof-block, .dof-circle{
  animation: depth-of-field 2.2s linear infinite;
}
.dof-block{
  width: 45px;
  height: 45px;
  background-color: #EEABC4;
  margin-top: 10px;
  margin-left: 45px;
  position: absolute;
  z-index: 2;
  animation-delay: 1.1s;
}
.dof-circle{
  width:45px;
  height: 45px;
  border: 5px solid #EEABC4;
  border-radius: 50%;
  position: absolute;
  top: 80px;
  left: 10px;
  z-index: 1;
  
}
/* SYMMETRIC MOVE */
.sm-div{
  background-color: #694A38;
  width: 30px;
  height: 30px;
  animation: symmetric-move-animation 1.5s linear infinite;
}
.sm2{
  margin-top: 15px;
}
.sm1{
  animation-direction: reverse;
}
/* SYMMETRIC ROTATE */
.sr-div{
  background-color: white;
  width: 17px;
  height: 17px;
  position: absolute;
}
.sr1, .sr2{
  left: 40px;
  top: 90px;
}
.sr1{
    animation: symmetric-rotate-animation-1 3s ease-in-out infinite;
}
.sr2{
    animation: symmetric-rotate-animation-2 3s ease-in-out infinite;
}
/* SYMMETRIC SCALE */
.ss-div{
  background-color: #ABD2FA;
  width: 60px;
  height: 60px;
  position:absolute;
  animation: symmetric-scale-animation 2s linear infinite;
}
.ss1{
  right: 2px;
}
.ss2{
  left: 2px;
  animation-delay: 1s;
}
/* TRIM CIRCLE */
.tc-wrapper {
  position: absolute;
  width: 4em;
  height: 4em;
  left: 20%;
}
.tc-dial-container {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: hidden;
  width: 2em;
}
.tc-wedge {
  background: #FFF3B0;
  height: 4em;
  width: 2em;
}
.tc-container1 {
  left: 2em;
}
.tc-container1 .tc-wedge {
  animation: trim-circle-rotate-bg-1 2s infinite ease-in;
  border-radius: 0 4em 4em 0;
  left: 0;
  transform-origin: 0 50%;
}
.tc-container2 {
  left: 0;
}
.tc-container2 .tc-wedge {
  animation: trim-circle-rotate-bg-2 2s infinite ease-out;
  border-radius: 4em 0 0 4em;
  transform-origin: 2em 2em;
}
.tc-wrapper::after {
  content: "";
  background: #C1666B;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
}

/* LOOP */
.loop-hexagon {
        position: absolute;
        overflow: hidden;
        background: transparent;
        width: 60px;
        height: 60px;
        transform: rotate(-30deg) skewX(30deg) scaleY(.866);
    }
    .loop-hexagon:before {
        position: absolute;
        right: 6.7%;
        bottom: 0;
        left: 6.7%;
        top: 0;
        transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
        background: #9DC3C2;
        content: '';
    }    
.lh1{left: -400px;}
.lh2{left: -300px; }
.lh3{left: -200px; }
.lh4{left: -100px;}
.lh5{left: 0px;}
.loop-div{
  display:inline-block;
    animation: loop-animation 1.3s infinite;
}
/* REPEAT TRANSFORM */
.rt-shape{
  background-color: rgba(255,255,255,.3);
  width: 65px;
  height: 70px;
  position: absolute;
  top: 70px;
  left: 19px;
 -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: repeat-transform-animation 3s ease-in-out alternate infinite;
} 
.rts2{
  animation-delay: 200ms;
}
.rts3{
  animation-delay: 400ms;
}
.rts4{
  animation-delay: 600ms;
}
.rts5{
  animation-delay: 800ms;
}
/* RHYTHM */
.rhytm-div{
  width: 50px;
  height: 50px;
  border: 5px solid #D5A18E;
  position: absolute;
  left: 20px;
  top: 60px;
  transform: rotate(45deg);
  animation: rhytm-rotate-animation 3s ease infinite;
}
.rhytm-div:before{
  content: "";
  width: 25px;
  height: 55px;
  border: 5px solid red;
  border-radius: 50%;
  position: absolute;
  left: 7px;
  top: -8px;
  transform: rotate(45deg);
}
.rhytm-div:after{
  content: "";
  width: 25px;
  height: 55px;
  border: 5px solid red;
  border-radius: 50%;
  position: absolute;
  left: 7px;
  top: -6px;
  transform: rotate(-45deg);
}
.rhytm-div:before,
.rhytm-div:after{
  animation:  rhytm-change-animation 3s steps(1,end) infinite reverse;
}
/* TIP SHAPE */
.ts-ball{
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  left: 46px;
  top: 56px;
  animation: tip-shade-ball-animation 6s linear infinite reverse;
}
.ts-hexagon{
  border: 2px solid transparent;
  width: 0px;
  height: 30px;
  position: absolute;
}
.tsline1{
  left: 35px;
  transform: rotate(-120deg);
}
.tsline2{
  transform: rotate(120deg);
  left: 64px;
}
.tsline3{
  left: 20px;
  top: 76px;
}
.tsline4{
  top: 76px;
  left: 78px;
}
.tsline5{
  transform: rotate(120deg);
  top: 101px;
  left: 35px;
}
.tsline6{
    transform: rotate(-120deg);
  top: 100px;
  left: 64px;
}
.ts-hexagon{
  animation:  tip-shade-hexagon-animation 6s infinite alternate-reverse;
}
.tsline1{
  animation-delay: 0ms;
}
.tsline2{
  animation-delay: 2500ms;
}
.tsline3{
  animation-delay: 300ms;
}
.tsline4{
  animation-delay: 1600ms;
}
.tsline5{
  animation-delay: 100ms;
}
.tsline6{
  animation-delay: 900ms;
}
/* LINK */
.link-small-ball{
   width: 7px;
  height: 7px;
  background-color: #CF5C36;
  border-radius: 50%;
  position: absolute;

}
.link-big-ball{
     width: 12px;
  height: 12px;
  background-color: #CF5C36;
  border-radius: 50%;
  position: absolute;
  left: 45px;
  top: 85px;
  animation: link-big-ball 2s infinite;
}
.lsb1{
  top: 120px;
  left: 30px;
  animation: link-small-ball-1 2s infinite;
}
.lsb2{
  top: 120px;
  left: 80px;
  animation: link-small-ball-2 2s infinite;
}
.lsb3{
  top: 70px;
  left: 70px;
  animation: link-small-ball-3 2s infinite;
}
/* MASK WIPE */
.mw-outside{
  width: 70px;
  height: 70px;
  background-color: #CCDAD1;
  border-radius: 50%;
  margin-left: 14px;
  animation: move-wipe-animation-1 2s ease-out infinite;
}
.mw-inside{
  position: absolute;
  left: -1px;
  top:-1px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #6B818C;
  animation: move-wipe-animation-2 2s ease-in infinite;
}
/* SPIN FADE */
.sfblock{
  background-color: white;
  width: 60px;
  height:10px;
  position: absolute;
  top: 80px;
  left: 20px;
  animation: spin-fade-animation 2s ease-in infinite;
}
.sf2{
  animation-delay: 1s;
}

/* SERIBBLE */
.seribble-container{
  width: 80px;
  height: 80px;
  overflow: hidden;
  margin-left: 10px;
  z-index: 2;
}
.sline{
  width: 100px;
  border: 1px solid white;
  transform: rotate(-30deg);
  margin-left: -20px;
  margin-top: 4px;
  animation: seribble-animation 2s linear  infinite reverse;
}
.sl1{ /*3*/
  position: absolute;
  width: 35px;
  left: 26px;
  top: 54px;
  animation-delay: 50ms;
}
.sl2{ /**/
  position: absolute;
  width: 25px;
  left: 27px;
  top: 50px;
  animation-delay: 0ms;
}
.sl3{animation-delay: 100ms;}
.sl4{animation-delay: 150ms;}
.sl5{animation-delay: 200ms;}
.sl6{animation-delay: 250ms;}
.sl7{animation-delay: 300ms;}
.sl8{animation-delay: 350ms;}
.sl9{animation-delay: 400ms;}
.sl10{animation-delay: 450ms;}
.sl11{animation-delay: 500ms;}
.sl12{animation-delay: 550ms;}
.sl13{animation-delay: 600ms;}
.sl14{animation-delay: 650ms;}
.sl15{animation-delay: 700ms;}
.sl16{animation-delay: 750ms;}
.sl17{animation-delay: 800ms;}
.sl18{animation-delay: 850ms;}
.sl19{animation-delay: 900ms;}

/* TEXT */
.text-container{
  width: 95px;
  margin-left: 2px;  
  height: 30px;
  border-bottom: 2px solid white;
  overflow: hidden;
  padding-bottom: 15px;
}
.textp{
  display: inline-block;
  font-size: 2em;
  width: 30px;
  margin-top: 5px;
  animation: text-animation 1s infinite;
}
.t-small{
  animation-delay: 140ms;
}

/* 
 * Animations
*/

@keyframes orbit-animation{
0%{transform: rotate(0deg) translateX(35px);}
	100%{transform: rotate(360deg) translateX(35px);}
}

@keyframes offset-animation {
  from{}
  to { stroke-dashoffset: 1000;  }
}

@keyframes line-weight{
  from { border: 8px solid #D1BCE3;
    margin-top: -9px;}
  to {border: 0px solid #D1BCE3;
  margin-left: 15px;}
}
@keyframes fractal-noise-animation{
  from{background-color: rgba(255,255,255, .8);}
  to{ background-color: rgba(255,255,255, .1); }
}
@keyframes blur-animation{
  0%{filter: blur(0px);}
  30%{filter: blur(0px);}
  100%{  filter: blur(40px);}
}
@keyframes move-animation{
  from{transform: translateX(0px);}
  to{transform: translateX(150px);}
}
@keyframes rotate-animation{
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg);}
}
@keyframes scale-animation{
  0%{}
  33%{width: 90px;
  transform: translateX(-26px);}
  65%{width: 90px;
  transform: translateX(-26px);}
  66%{width: 90px;
    height: 90px;
   transform: translateX(-26px)
     translateY(-20px);}
  95%{width: 0px;
  height:0px;
    transform: translateX(20px)
     translateY(20px);}
  100%{width: 0px;
  height:0px;
    transform: translateX(20px)
     translateY(20px);
  }
}
@keyframes trimline-animation{
  0%{transform: translateX(0px);}
  50%{transform: translateX(100px);}
  55%{transform: translateX(100px);}
  100%{transform: translateX(200px);}
}

@keyframes vegas-animation{
  0%{transform: translateX(0px);}
  25%{transform: translateX(50px);}
  50%{transform: translateX(50px) translateY(50px);}
  75%{transform: translateX(0px) translateY(50px);}
  100%{transform: translateX(0px) translateY(0px);}
}

@keyframes shape-transform-animation {
  0% {clip-path: polygon(50% 0%, 50% 0, 100% 0, 50% 100%, 0 0, 50% 0);}
  10%{clip-path: polygon(50% 0%, 50% 0, 100% 0, 50% 100%, 0 0, 50% 0);}
  40%{clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
  50% {clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
  90%{clip-path: polygon(50% 0%, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%);}
  100% {clip-path: polygon(50% 0%, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 0 100%);}
}
/*ease*/
@keyframes ease-ball{
  0%{}
  50%{transform: translateX(20px) translateY(-30px);}
  100%{transform: translateX(130px) translateY(100px);}
}
@keyframes ease-stroke{
    0%{}
  50%{transform: translateX(20px);}
  100%{transform: translateX(130px);}
}
@keyframes easing-background{
  0%{background-color: rgba(255,255,255,0);}
  60%{background-color: rgba(255,255,255,0);}
  100%{background-color: rgba(255,255,255,.7);}
}
/*ease end*/
/* depth of field */
@keyframes depth-of-field{
  0%{filter: blur(0px);
    transform: scale(1.1);}
  10%{filter: blur(0px);
  transform: scale(1.1);}
  40%{filter: blur(4px);}
  50%{filter: blur(4px);}
  90%{filter: blur(0px);
    transform: scale(1.1);}
  100%{  filter: blur(0px);
    transform: scale(1.1);}
}
@keyframes symmetric-move-animation{
  from{transform: translateX(-50px);}
  to{transform: translateX(150px);}
}
@keyframes symmetric-rotate-animation-1{
  0%{transform: rotate(0deg) translateY(30px);}
  50%{transform: rotate(180deg) translateY(30px);}
  100%{transform: rotate(0deg) translateY(30px);}
}
@keyframes  symmetric-rotate-animation-2{
    0%{transform: rotate(-180deg) translateY(30px);}
   50%{transform: rotate(0deg) translateY(30px);}
  100%{transform: rotate(-180deg) translateY(30px);}
}
@keyframes symmetric-scale-animation {
  0%{transform: scale(0);}
  50%{transform: scale(1);}
  100%{transform: scale(0);}
}
/* TRIM CIRCLE animations*/
@keyframes trim-circle-rotate-bg-1 {
  50%, 100% {
    transform: rotateZ(180deg);
  }
}
@keyframes trim-circle-rotate-bg-2 {
  0%, 50% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(180deg);
  }
}
/*TRIM CIRCLE animations end*/

@keyframes loop-animation{
  0%{transform: translateX(0px);}
  80%{transform: translateX(370px);}
  100%{transform: translateX(370px);}
}

@keyframes repeat-transform-animation{
  0%{clip-path: polygon(50% 25%, 50% 25%, 100% 25%, 50% 100%, 0 25%, 0% 25%);}
  20%{clip-path: polygon(50% 25%, 50% 25%, 100% 25%, 50% 100%, 0 25%, 0% 25%);}
  40%{clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
  60%{clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);}
  80%{clip-path: polygon(50% 0%, 100% 75%, 50% 75%, 50% 75%, 50% 75%, 0 75%);}
  100%{clip-path: polygon(50% 0%, 100% 75%, 50% 75%, 50% 75%, 50% 75%, 0 75%);}
}
/* animation rhytm */
@keyframes rhytm-rotate-animation{
  0%{transform: rotate(45deg);}
  25%{transform: rotate(135deg);}
  26%{transform: rotate(135deg); border-radius: 20%;}
  50%{transform: rotate(225deg); border-radius: 20%;}
  75%{transform: rotate(315deg); border-radius: 0%;}
  100%{transform: rotate(405deg);}
}
@keyframes rhytm-change-animation{
  0%{border-color: transparent;}
  25%{border-color: transparent;}
  45%{border-color: transparent;}
  50%{border-color: #D5A18E;}
  75%{border-color: #D5A18E;}
  76%{border-color: #D5A18E;}
  100%{border-color: transparent;}
}
/* tip shape */
@keyframes tip-shade-ball-animation{
  0%{}
  2%{transform: translateX(-28px) translateY(15px);}
  4%{transform: translateX(-28px) translateY(50px);}
  6%{transform: translateX(0px) translateY(65px);}
  8%{transform:  translateX(0px) translateY(65px);}
  10.5%{transform: translateX(28px) translateY(50px);}
  12.5%{transform: translateX(28px) translateY(15px);}
  15%{transform: translateX(0px) translateY(0px);}
  25%{transform: translateX(0px) translateY(0px);}
  37.5%{transform: translateX(28px) translateY(15px);}
  50%{transform: translateX(28px) translateY(50px);}
  62.5%{transform: translateX(0px) translateY(65px);}
  75%{transform: translateX(-28px) translateY(50px);}
  87.5%{transform: translateX(-28px) translateY(15px);}
  100%{}
}
@keyframes tip-shade-hexagon-animation{
    0%{height: 0px;}
  6%{height:0px;
   border-color: transparent;}
  8%{height:0px;
   border-color: transparent;}
  10.5%{height:0px;
   border-color: transparent;}
  12.5%{;}
  15%{height:0px;}
  25%{height:30px;}
  37.5%{height: 30px;}
  50%{height: 30px;}
  62.5%{height: 30px;
  border-color: white;}
  75%{height: 30px;
  border-color: white;}
  87.5%{height:0px;
  border-color: transparent;}
  100%{height:0px;
  border-color: transparent;}
}
@keyframes move-wipe-animation-1{
  0%{transform: scale(0);}
  50%{transform: scale(1);}
  100%{transform: scale(1);}
}
@keyframes move-wipe-animation-2{
  0%{transform: scale(0);}
  50%{transform: scale(0);}
  100%{transform: scale(1);}
}
@keyframes spin-fade-animation{
  0%{}
  25%{background-color: white;}
  50%{background-color: transparent;}
  75%{transform: rotate(180deg);}
  100%{transform: rotate(180deg);}
}
@keyframes seribble-animation {
  0%{border-color: transparent;}
  2%{border-color: white;}
  68%{border-color: white;}
  70%{border-color: transparent;}
  100%{border-color: transparent;}
}
@keyframes text-animation{
  0%{transform: translateY(-670px);}
  80%{transform: translateY(0px);}
  100%{transform: translateY(0px);}
}
/* LINK */
@keyframes link-big-ball{
  0%{transform: translateX(0px) translateY(0px);}
  25%{transform: translateX(28px) translateY(-20px);}
  50%{transform: translateX(0px) translateY(0px);}
  100%{transform: translateX(0px) translateY(0px);}
}
@keyframes link-small-ball-1{
  0%{}
  25%{transform: translateX(-10px) translateY(10px);}
  50%{transform: translateX(-5px) translateY(-50px);}
  100%{transform: translateX(0px) translateY(0px);}
}
@keyframes link-small-ball-2{
  0%{}
  20%{transform: translateX(-50px) translateY(0px);}
  30%{transform: translateX(0px) translateY(-50px);}
  40%{transform: translateX(0px) translateY(0px);}
  100%{transform: translateX(0px) translateY(0px);}
}
@keyframes link-small-ball-3{
  0%{}
  25%{transform: translateX(-50px) translateY(0px);}
  50%{transform: translateX(0px) translateY(0px);}
  75%{transform: translateX(0px) translateY(0px);}
  100%{transform: translateX(-50px) translateY(50px);}
}
              
            
!

JS

              
                
              
            
!
999px

Console