Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              #wrap
 %input.headNav{ :name => "head", :type => "radio"}/
 %input.headNav{:checked => "checked", :name => "head", :type => "radio"}/
 %input.headNav{ :name => "head", :type => "radio"}/
 .arrows.headNav
  -2.times do
   .arrow
 %input.bodyNav{ :name => "body", :type => "radio"}/
 %input.bodyNav{:checked => "checked", :name => "body", :type => "radio"}/
 %input.bodyNav{ :name => "body", :type => "radio"}/
 .arrows.bodyNav
  -2.times do
   .arrow
 %input.legNav{ :name => "leg", :type => "radio"}/
 %input.legNav{:checked => "checked", :name => "leg", :type => "radio"}/
 %input.legNav{ :name => "leg", :type => "radio"}/
 .arrows.legNav
  -2.times do
   .arrow
 .monsters
  .head
   .drac
    -10.times do
     .part
      .one
      .two
   .witch
    -10.times do
     .part
      .one
      .two
   .frank
    -10.times do
     .part
      .one
      .two
  .body
   .drac
    -10.times do
     .part
      .one
      .two
   .witch
    -10.times do
     .part
      .one
      .two
   .frank
    -10.times do
     .part
      .one
      .two
  .legs
   .drac
    -10.times do
     .part
      .one
      .two
   .witch
    -10.times do
     .part
      .one
      .two
   .frank
    -10.times do
     .part
      .one
      .two
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="display:none">
<defs>    
<filter id="jagged">
<feTurbulence id="turbulence" baseFrequency="0.03" numOctaves="5" result="noise" seed="0"/>
<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="2" />
</filter>
</svg>

            
          
!
            
              @font-face {
font-family: 'Air Conditioner';
font-style: normal;
font-weight: normal;
src: local('Air Conditioner'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/AirConditioner.woff') format('woff');
}

$br: #f1e8d7;
$w: #eeeded;
$g: #3e9344;
$b: #181f1d;
$r: #ee3a1d;
$y: #f4c42c;
$t: transparent;
$bl: #53addd;


body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  overflow:hidden;
  background:radial-gradient(circle at center, $br 500px, darken($br, 15%));
  &:before, &:after{
    content:'Monster';
    position:absolute;
    display:inline-block;
    left:calc(50% + 15px);
    transform:translateX(calc(-50% - 25px));
    text-align:center;
    font-family:'Air Conditioner';
    filter:url(#jagged);
    font-size:60px;
    z-index:2;
    top:calc(50% + 225px);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-image: linear-gradient(45deg, $r -400px, $r 85px, #e79198 100px, #e79198 110px, $r 125px, $r 10000px);
    background-size:150% 150%;
    animation:shineText 4s ease-in-out infinite;
    @keyframes shineText{
      0%{
        background-position:-200px 50%;
      }
      10%{
        background-position:300px 50%;
      }
      50%{
        background-position:-200px 50%;
      }
      75%{
        background-position:-200px 50%;
      }
      100%{
        background-position:300px 50%;
      }
    }
  }
  &:after{
    content:'Mashup';
    margin-top:30px;
    animation-delay:-1.25s;
    transform:translateX(calc(-50% + 25px));
  }
  svg{
    position:absolute;
  }
  #wrap{
    width:400px;
    height:650px;
    filter:url(#jagged);
    position:relative;
    transform:scale(0.65) translateY(-50px);
    input{
      opacity:0;
      cursor:pointer;
    }
    .monsters{
      position:absolute;
      width:100%;
      height:100%;
      left:0;
      top:0;
    }
    .arrows{
      width:calc(100% + 300px);
      left:-150px;
      position:absolute;
      height:33.3333%;
      pointer-events:none;
      &.bodyNav{
        top:33.3333%;
      }
      &.legNav{
        top:66.6666%;
      }
      .arrow{
        position:absolute;
        top:calc(50% - 25px);
        left:0;
        width:50px;
        background:$b;
        height:50px;
        clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
        &:before{
          content:'';
          position:absolute;
          width:50%;
          height:50%;
          left:30%;
          top:25%;
          background:$r;
          opacity:0;
          clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
          border-radius:100%;
        }
        &:nth-of-type(2){
          left:auto;
          right:0;
          clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
          &:before{
            left:auto;
            right:30%;
          }
        }
      }
    }
    input{
      position:absolute;
      width:150px;
      left:-150px;
      height:33.3333%;
      z-index:8;
      opacity:0;
    }
    input.headNav{
      &:nth-of-type(3){
        &:checked{
          &~.arrows.headNav{
            .arrow{
              &:last-of-type{
                &:before{
                   opacity:1;
                 }
              }
            }
          }
        }
      }
      &:first-of-type{
        &:checked{
          &~.arrows.headNav{
            .arrow{
              &:first-of-type{
                &:before{
                   opacity:1;
                 }
              }
            }
          }
        }
      }
      &:checked{
        pointer-events:none;
        &~input.headNav{
          left:auto;
          right:-150px;
          z-index:9;
          &:hover{
            &~.arrows.headNav{
              .arrow:first-of-type{
                opacity:1;
              }
            }
          }
          &~input.headNav{
            z-index:8;
          }
        }
      }
      @for $i from 1 through 3{
        &:nth-of-type(#{$i}){
          &:checked{
            & ~ .monsters div.head > div:nth-of-type(#{$i}){
              transform:translateX(0);
              &.frank{
                transform:translateX(0) scaleX(0.8) scaleY(0.9);
              }
              & ~ div{
                transform:translateX(250%);
                &.frank{
                  transform:translateX(250%) scaleX(0.8) scaleY(0.9);
                }
              }
            }
          }
        }
      }
    }
    input.bodyNav{
      top:33.3333%;
      &:nth-of-type(6){
        &:checked{
          &~.arrows.bodyNav{
            .arrow{
              &:last-of-type{
                &:before{
                   opacity:1;
                 }
              }
            }
          }
        }
      }
      &:nth-of-type(4){
        &:checked{
          &~.arrows.bodyNav{
            .arrow{
              &:first-of-type{
                &:before{
                   opacity:1;
                 }
              }
            }
          }
        }
      }
      &:checked{
        pointer-events:none;
        &~input.bodyNav{
          left:auto;
          right:-150px;
          z-index:9;
          &:hover{
            &~.arrows.bodyNav{
              .arrow:first-of-type{
                opacity:1;
              }
            }
          }
          &~input.bodyNav{
            z-index:8;
          }
        }
      }
      @for $i from 1 through 3{
        &:nth-of-type(#{($i + 3)}){
          &:checked{
            & ~ .monsters div.body > div:nth-of-type(#{$i}){
              transform:translateX(0);
              & ~ div{
                transform:translateX(250%);
              }
            }
          }
        }
      }
    }
    
    input.legNav{
      top:66.6666%;
      &:last-of-type{
        &:checked{
          &~.arrows.legNav{
            .arrow{
              &:last-of-type{
                &:before{
                   opacity:1;
                 }
              }
            }
          }
        }
      }
      &:nth-of-type(7){
        &:checked{
          &~.arrows.legNav{
            .arrow{
              &:first-of-type{
                &:before{
                   opacity:1;
                 }
              }
            }
          }
        }
      }
      &:checked{
        pointer-events:none;
        &~input.legNav{
          left:auto;
          right:-150px;
          z-index:9;
          &:hover{
            &~.arrows.legNav{
              .arrow:first-of-type{
                opacity:1;
              }
            }
          }
          &~input.legNav{
            z-index:8;
          }
        }
      }
      @for $i from 1 through 3{
        &:nth-of-type(#{($i + 6)}){
          &:checked{
            & ~ .monsters div.legs > div:nth-of-type(#{$i}){
              transform:translateX(0);
              & ~ div{
                transform:translateX(250%);
              }
            }
          }
        }
      }
    }
    div.head, div.body, div.legs{
      position:relative;
      width:100%;
      height:33.333%;
      > div{
        position:absolute;
        width:60%;
        height:100%;
        top:0;
        left:20%;
        transform:translateX(-250%);
        transition:0.9s cubic-bezier(1,0,0,1);
        .part{
          position:absolute;
          .one, .two{
            
            position:absolute;
          }
        }
      }
    }
    .legs{
      z-index:-1;
      clip-path: polygon(0 0, 100% 0, 100% 150%, 0 150%);

      > div{
        &.drac{
          .part{
              &:first-of-type, &:nth-of-type(2){
                width:50px;
                height:120%;
                left:40px;
                .one{
                  width:100%;
                  height:100%;
                  background:$b;
                  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
                }
                .two{
                  width:110%;
                  height:120px;
                  background:$g;
                  top:100%;
                  left:-15px;
                  clip-path: polygon(61% 0, 0 0, 84% 62%);
                  animation:feet 1s ease-in-out infinite alternate;
                  transform:scaleX(-1);
                  @keyframes feet{
                    to{
                      clip-path: polygon(61% 0, 0 0, 100% 51%);
                    }
                  }
                }
            }
            &:nth-of-type(2){
              left:auto;
              right:40px;
              .two{
                left:10px;
                transform:scaleX(1);
                animation-delay:0.25s;
              }
            }
          }
        }
        &.frank{
          .part{
              &:first-of-type{
                width:60px;
                height:120%;
                background:$b;
                left:40px;
                box-shadow:100px 0 0 $b;
                top:0px;
                .one, .two{
                  position:absolute;
                  width:120px;
                  height:50px;
                  bottom:-40px;
                  background:radial-gradient(circle at bottom right, $r 30px, $b 30px, $b 32px, $t 32px), linear-gradient(to right, $r 40px, $b 40px, $b 42px, $r 42px);
                  right:0;
                  border-radius:50px 0 0 50px;
                }
                .two{
                  right:auto;
                  left:100px;
                  border-radius:0 50px 50px 0;
                  background:radial-gradient(circle at bottom left, $r 30px, $b 30px, $b 32px, $t 32px), linear-gradient(to left, $r 40px, $b 40px, $b 42px, $r 42px);
                }
            }
          }
        }
        &.witch{
          .part{
            &:first-of-type{
              width:20px;
              height:100%;
              background:$g;
              left:40px;
              box-shadow:140px 0 0 $g;
              .one, .two{
                
                position:absolute;
                width:100px;
                height:80px;
                background:$b;
                clip-path: polygon(100% 50%, 0% 100%, 100% 100%);
                bottom:0;
                left:-80px;
              }
              .two{
                left:140px;
                clip-path: polygon(0 50%, 0% 100%, 100% 100%);
              }
            }
          }
        }
      }
    }
    .body{
      z-index:1;
      clip-path: polygon(-25% -25%, 125% -25%, 125% 135%, -25% 135%);
      > div{
        &.drac{
          .part{
            &:first-of-type{
              width:100%;
              height:150%;
              top:0;
              left:0;
              background:$b;
              .one{
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 150px 80px 0 80px;
                left:40px;
                border-color: $w transparent transparent transparent;
              }
              .two{
                width:12.5px;
                height:12.5px;
                border-radius:100%;
                background:$b;
                top:35px;
                left:calc(50% - 6.25px);
                box-shadow:0 25px 0 $b, 0 50px 0 $b;
              }
            }
            &:nth-of-type(2){
              width:70px;
              height:70px;
              background:$r;
              clip-path: polygon(50% 45%, 100% 25%, 100% 75%, 50% 55%, 0% 75%, 0% 25%);

              left:calc(50% - 35px);
              top:-15px;
              animation:spin 6s ease-in-out infinite;
              @keyframes spin{
                95%{
                  transform:rotate(0deg);
                }
                100%{
                  transform:rotate(900deg);
                }
              }
            }
            &:nth-of-type(3){
              width:100%;
              height:100%;
              left:0;
              top:0;
              .one, .two{
                width:75%;
                height:75%;
                left:calc(100% - 20px);
                background:$b;
                top:-25%;
                clip-path: polygon(1% 58%, 50% 1%, 100% 59%, 86% 91%, 76% 59%, 62% 89%, 53% 60%, 41% 90%, 31% 61%);
                transform-origin:left;
                animation:flap1 0.5s ease-in-out infinite alternate;
                @keyframes flap1{
                  to{
                    transform:rotate(10deg);
                  }
                }

              }
              .two{
                left:auto;
                right:40px;
                transform:scaleX(-1);
                transform-origin:left;
                animation:flap2 0.5s ease-in-out infinite alternate;
                @keyframes flap2{
                  to{
                    transform:rotate(-10deg) scaleX(-1);
                  }
                }
              }
            }
          }
        }
        &.frank{
          .part{
            &:first-of-type{
              width:110%;
              height:140%;
              background:linear-gradient(to bottom, $t 20px, $bl 20px), linear-gradient(to right, $t 7.5%, $bl 7.5%, $bl 92.5%, $t 92.5%);
              top:-2.5px;
              border-radius:25px 25px 0 0;
              left:-5%;
              clip-path: polygon(0 0, 100% 0, 95% 87%, 100% 93%, 100% 100%, 0 100%, 0 94%, 5% 87%);

              .one{
                
                position:absolute;
                width:15px;
                height:15px;
                background:$b;
                left:calc(50% - 2.5px);
                border-radius:100%;
                top:25px;
                box-shadow:0 40px 0 $b, 0 80px 0 $b, 0 120px 0 $b;
              }
            }
            &:nth-of-type(2), &:nth-of-type(3){
              width:50px;
              top:15px;
              height:calc(100% - 10px);
              background:$bl;
              transform-origin:top;
              transform:rotate(30deg);
              left:-12.5px;
              border-radius:20px 0 0 0 / 50px 0 0 0;
              animation:swing 5s ease-in-out infinite alternate;
              @keyframes swing{
                to{
                  transform:rotate(20deg) translateY(-20px);
                }
              }
              .one{
                width:80px;
                height:80px;
                background:$y;
                top:100%;
                left:calc(50% - 35px);
                clip-path: polygon(17% 0, 3% 60%, 8% 91%, 18% 93%, 18% 64%, 26% 50%, 28% 62%, 30% 78%, 37% 91%, 48% 93%, 41% 63%, 43% 49%, 51% 48%, 54% 67%, 58% 83%, 66% 94%, 74% 88%, 68% 65%, 64% 44%, 69% 37%, 79% 41%, 80% 57%, 79% 65%, 85% 71%, 94% 63%, 92% 34%, 85% 21%, 78% 0);

              }
            }
            &:nth-of-type(3){
              transform:scaleX(-1) rotate(30deg);
              left:auto;
              right:-12.5px;
              animation:swing2 5s ease-in-out infinite alternate;
              animation-delay:-1s;
              @keyframes swing2{
                to{
                  transform:scaleX(-1) rotate(20deg) translateY(-20px);
                }
              }
            }
          }
        }
        &.witch{
          .part{
            &:first-of-type{
              width:165%;
              left:-32.5%;
              height:100%;
              background:$b;
              clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
            }
            &:nth-of-type(2), &:nth-of-type(3){
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 0 30px 100px 30px;
              border-color: transparent transparent $b transparent;
              left:-10px;
              transform-origin:top;
              transform:rotate(50deg);
              .one{
                position:absolute;
                width:40px;
                height:20px;
                background:$g;
                border-radius:0 0 100px 100px;
                top:100px;
                left:-20px;
                z-index:-1;
              }
            }
            &:nth-of-type(3){
              left:auto;
              right:-10px;
              transform:rotate(-50deg);
              animation:wave 2s ease-in-out infinite;
              @keyframes wave{
                0%{
                  transform:rotate(-50deg);
                }
                20%{
                  transform:rotate(-50deg);
                }
                35%{
                  transform:rotate(-90deg) translateY(10px);
                }
                45%{
                  transform:rotate(-95deg) translateY(5px);
                }
                50%{
                  transform:rotate(-90deg) translateY(5px);
                }
                52.5%{
                  transform:rotate(-95deg) translateY(5px);
                }
                58%{
                  transform:rotate(-90deg) translateY(5px);
                }
              }
            }
          }
        }
      }
    }
    .head{
      clip-path: polygon(0 -100%, 100% -100%, 100% 100%, 0% 100%);
      z-index:2;
      > div{
        &.frank{
          left:20%;
          transform-origin:bottom;
          .part{
            &:first-of-type{
              width:90%;
              left:5%;
              height:100%;
              background:$y;
              overflow:hidden;
              filter:url(#jagged);
              .one{
                width:115%;
                left:-12%;
                top:5px;
                height:35px;
                filter:url(#jagged);
                background:repeating-linear-gradient(to right, $t 0px, $t 20px, $y 20px, $y 28px, $t 28px, $t 45px, $t 45px),
                linear-gradient(115deg, transparent 75%, transparent 75%) 0 0,
                linear-gradient(245deg, transparent 75%, transparent 75%) 0 0,
                linear-gradient(115deg, transparent 75%, $y 75%) 21px -44px,
                linear-gradient(245deg, $b 75%, $y 75%) 21px -44px,
                $y;
                background-size: 100%, 46px 80px, 46px 80px, 46px 80px, 46px 80px, 46px 80px;
                box-shadow:0 -5px 0 $b;
              }
              .two{
                width:70%;
                left:15%;
                top:70px;
                height:15px;
                background:$b;
              }
            }
            &:nth-of-type(2), &:nth-of-type(3){
              width:50px;
              height:25px;
              border-radius:0 0 150% 150% / 0 0 250% 250%;
              box-shadow:0 0 0 5px $b, inset 0 5px 0 0 $y, inset 0 10px 0 $b;
              top:85px;
              left:50px;
              .one{
                width:12.5px;
                height:12.5px;
                background:$g;
                bottom:0;
                left:calc(50% - 7.5px);
                border-radius:100%;
              }
            }
            &:nth-of-type(3){
              left:auto;
              right:50px;
              .two{
                width:30px;
                height:50px;
                background:$y;
                left:-35px;
                box-shadow:0 0 0 5px $b;
              }
            }
            &:nth-of-type(5){
              width:120px;
              height:30px;
              left:62.5px;
              bottom:25px;
              background:$b;
              border-radius:500px 500px 0 0 / 250px 250px 0 0;
              .one, .two{
                width:92.5%;
                height:5px;
                background:$b;
                left:-37.5%;
                top:12.5px;
                transform-origin:top;
                transform:rotate(-45deg);
              }
              .two{
                left:auto;
                right:-37.5%;
                transform:rotate(45deg);
              }
            }
            &:nth-of-type(6), &:nth-of-type(7){
              width:60px;
              height:5px;
              background:$b;
              bottom:75px;
              left:20px;
              transform:rotate(-10deg);
              .one{
                width:5px;
                height:15px;
                background:$b;
                top:calc(50% - 7.5px);
                left:10px;
                box-shadow:10px 0 0 $b, 20px 0 0 $b, 30px 0 0 $b;
              }
              .two{
                width:20px;
                height:60px;
                background:$y;
                transform:rotate(10deg);
                top:-70px;
                left:-15px;
              }
            }
            &:nth-of-type(7){
              left:auto;
              right:20px;
              transform:rotate(10deg);
              .two{
                transform:rotate(-10deg);
                left:auto;
                right:-15px;
              }
            }
            &:nth-of-type(8){
              width:20px;
              height:20px;
              background:$b;
              bottom:20px;
              left:-5px;
              box-shadow:230px 0 0 $b;
              .one, .two{
                width:15px;
                height:30px;
                background:$b;
                border-radius:100px 0 0 100px;
                left:-15px;
                top:-5px;
              }
              .two{
                left:auto;
                right:-240px;
                border-radius:0 100px 100px 0;
              }
              
            }
            &:nth-of-type(9){
              width:160%;
              height:50px;
              left:-30%;
              top:140px;
              .one, .two{
                width:50px;
                height:100%;
                clip-path: polygon(4% 89%, 33% 46%, 51% 56%, 91% 9%, 57% 78%, 35% 67%);
                right:0;
                &:before{
                  content:'';
                  position:absolute;
                  width:100%;
                  height:100%;
                  background:darken($w, 30%);
                  left:-100%;
                  animation:zap 1s ease-in-out infinite;
                  @keyframes zap{
                    50%{
                      transform:translateX(0);
                    }
                    100%{
                      transform:translateX(200%);
                    }
                  }
                }
              }
              .two{
                right:auto;
                transform:scaleX(-1);
                &:before{
                  animation-delay:0.25s;
                 }
              }
            }
          }
        }
        &.witch{
          .part{
            &:first-of-type{
              width: 0;
              height: 0;
              border-style: solid;
              border-width: 0 120px 300px 120px;
              border-color: transparent transparent $g transparent;
              bottom:0;
              left:calc(50% - 120px);
              .one{
                
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 0 62.5px 150px 62.5px;
                border-color: transparent transparent $b transparent;
                left:-62.5px;
                top:0;
              }
              .two{
                
                width:250px;
                height:3px;
                background:$b;
                top:150px;
                left:calc(50% - 125px);
              }
            }
            &:nth-of-type(2){
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 140px 38px 0 38px;
                border-color: $b transparent transparent transparent;
                z-index:2;
                top:70px;
              left:calc(50% - 38px);
              .two{
                
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 130px 32.5px 0 32.5px;
                border-color: $g transparent transparent transparent;
                z-index:1;
                top:-140px;
                left:-32.5px;
              }
              .one{
                
                width:100px;
                height:100px;
                border:4px solid $b;
                border-color:$t $b $b $t;
                border-radius:100%;
                left:-50px;
                top:-135px;
                transform:rotate(45deg);
              }
            }
            &:nth-of-type(3){
              width:30px;
              height:30px;
              background:radial-gradient(circle at center, $b, $b 5px, $w 5px);
              background-position:50% 35px;
              border-radius:100%;
              top:75px;
              left:55px;
              border:4px solid $b;
              box-shadow:92.5px 5px 0 -14px $b, 92.5px 0 0 -4px $w, 92.5px 0 0 0 $b;
              animation:lookaround 3s ease-in-out infinite alternate;
              @keyframes lookaround{
                0%{
                  background-position:50% 35px;
                  box-shadow:87.5px 5px 0 -14px $b, 92.5px 0 0 -4px $w, 92.5px 0 0 0 $b;
                }
                50%{
                  background-position:calc(50% + 5px) 35px;
                  
                  box-shadow:97.5px -5px 0 -14px $b, 92.5px 0 0 -4px $w, 92.5px 0 0 0 $b;
                }
                100%{
                  background-position:calc(50% - 5px) 30px;
                  
                  box-shadow:92.5px 5px 0 -14px $b, 92.5px 0 0 -4px $w, 92.5px 0 0 0 $b;
                }
              }
            }
            &:nth-of-type(4), &:nth-of-type(5){
              width:4px;
              height:100px;
              background:$b;
              transform:rotate(35deg);
              transform-origin:top;
              top:70px;
              left:60px;
              .one, .two{
                
                width:100%;
                height:100%;
                background:$b;
                transform-origin:top;
                transform:rotate(10deg);
              }
              .two{
                transform:rotate(20deg);
              }
            }
            &:nth-of-type(5){
              transform:rotate(-35deg) scaleX(-1);
              left:auto;
              right:60px;
            }
          }
        }
        &.drac{
          .part{
            &:first-of-type{
              width:100%;
              height:100%;
              background:$g;
              border-radius:975px 975px 0px 0px / 1500px 1500px 0px 0px;
              overflow:hidden;
              .one{
                
                width:160px;
                height:150px;
                background:$b;
                border-radius:100%;
                left:calc(50% - 155px);
                top:-100px;
                box-shadow:150px 0 0 $b;
              }
              .two{
                
                width:30px;
                height:30px;
                box-shadow:5px 5px 0 0 $b;
                top:80px;
                left:105px;
                transform:rotate(45deg);
              }
            }
            &:nth-of-type(2){
              height:35px;
              width:80px;
              background:linear-gradient(to bottom, $g 50%, $y 50%);
              background-size:100% 160px;
              background-position:50% 100%;
              border-radius:0 0 200px 200px / 0 0 150px 150px;
              top:80px;
              left:35px;
              box-shadow:90px 0 0 0 $y;
              .one{
                
                width:15px;
                height:15px;
                background:$r;
                border-radius:100%;
                bottom:0;
                left:calc(50% - 7.5px);
                box-shadow:90px 0 0 0 $r;
              }
              .two{
                
                width:50px;
                height:50px;
                box-shadow:5px 5px 0 0 $b;
                top:-60px;
                left:60px;
                transform:rotate(45deg);
              }
            }
            &:nth-of-type(3){
              height:75px;
              width:150px;
              background:$b;
              border-radius:0 0 500px 500px;
              top:130px;
              left:45px;
              .one, .two{
                
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 45px 12.5px 0 12.5px;
                border-color: $w transparent transparent transparent;
                left:40px;
              }
              .two{
                left:auto;
                right:40px;
              }
            }
            &:nth-of-type(4){
              width:50px;
              height:60px;
              background:$g;
              border-radius:100%;
              z-index:-1;
              top:85px;
              left:-15px;
              box-shadow:220px 0 0 $g;
            }
            &:nth-of-type(5){
              width:15px;
              height:15px;
              left:75px;
              bottom:45px;
              .one, .two{
                left:10px;
                width:100%;
                height:100%;
                background:linear-gradient(to right, $t, $t calc(50% - 0.5px), $w calc(50% - 0.5px), $w calc(50% + 0.5px), $t calc(50% + 0.5px)), linear-gradient(to bottom, $t, $t calc(50% - 0.5px), $w calc(50% - 0.5px), $w calc(50% + 0.5px), $t calc(50% + 0.5px)), linear-gradient(45deg, $t, $t calc(50% - 0.5px), $w calc(50% - 0.5px), $w calc(50% + 0.5px), $t calc(50% + 0.5px)), linear-gradient(-45deg, $t, $t calc(50% - 0.5px), $w calc(50% - 0.5px), $w calc(50% + 0.5px), $t calc(50% + 0.5px));
                animation:shine 3s ease-in-out infinite;
                clip-path: circle(0% at 50% 50%);
                top:5px;
                @keyframes shine{
                  60%{
                    transform:rotate(0deg);
                    clip-path: circle(0% at 50% 50%);
                  }
                  80%{
                    transform:rotate(360deg);
                    clip-path: circle(50% at 50% 50%);

                  }
                  100%{
                    transform:rotate(360deg);
                    clip-path: circle(0% at 50% 50%);
                  }
                }
              }
              .two{
                top:-5px;
                left:70px;
                animation-delay:-1.25s;
              }
            }
          }
        }
      }
    }
  }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console