Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

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

              
                <div class="container"><svg width="300px" height="300px" viewBox="0 0 270 194">
    <ellipse class="shadow tooth-fairy-shadow" fill="#D8D8D8" cx="101.026736" cy="208.5" rx="35" ry="7.5"></ellipse>
            <ellipse class="shadow tooth-shadow" fill="#D8D8D8" cx="193.526736" cy="206.5" rx="57.5" ry="12.5"></ellipse>
        <g class="tooth-fairy" transform="translate(-10.000000, 0.000000)">
            <g class="tooth" transform="translate(117.026736, 0.000000)">
                <path d="M109.5,0 C131.315248,0 149,20.1471863 149,45 C149,58.3866292 143.869138,70.4080188 135.725594,78.6510531 C136.552821,86.6246574 137,95.1464468 137,104 C137,148.735065 125.583261,185 111.5,185 C97.4167389,185 86,148.735065 86,104 C86,102.436132 86.0139523,100.882616 86.0414831,99.3406387 C82.6864416,100.423128 79.1510693,101 75.5,101 C73.6252738,101 71.7810517,100.847905 69.9759357,100.553733 C69.9923865,101.695178 70,102.844765 70,104 C70,148.735065 58.5832611,185 44.5,185 C30.4167389,185 19,148.735065 19,104 C19,97.0979158 19.2717731,90.3974612 19.7831815,84.0007208 C7.95833389,76.2263734 0,61.6719789 0,45 C0,20.1471863 17.6847524,0 39.5,0 C49.2237705,0 58.1269037,4.00279647 65.0090733,10.6409289 C68.3492934,9.57105643 71.8673814,9 75.5,9 C78.5841753,9 81.5857925,9.41163998 84.4665503,10.190316 C91.2801807,3.82205385 99.9982993,0 109.5,0 Z" fill="#68C9CB"></path>
                <path d="M99.0702294,8.99408028 C105.789416,7.41156228 112.18456,8.15451228 118.21249,11.2206596 C118.704752,11.4710521 118.900827,12.0730926 118.650434,12.5653548 C118.400042,13.057617 117.798001,13.2536912 117.305739,13.0032987 C111.701725,10.1527794 105.790445,9.46604189 99.5287289,10.9408156 C93.2839622,12.4115972 87.7842306,16.3591338 83.0158163,22.8265121 C82.725264,23.2205869 82.1921115,23.3463389 81.7560836,23.123639 C78.6584131,21.5415133 75.7697272,20.7578125 73.0872396,20.7578125 C70.4286862,20.7578125 67.878284,21.5273862 65.4174635,23.0789683 C64.9844054,23.3520175 64.4150669,23.2539008 64.0983871,22.8516457 C57.845712,14.9093319 50.1613259,10.9674479 40.9732642,10.9674479 C31.6520647,10.9674479 23.5115589,13.1516089 16.5300761,17.5159188 C16.0617662,17.8086718 15.4448028,17.6663547 15.1520499,17.1980448 C14.859297,16.7297349 15.001614,16.1127716 15.4699239,15.8200187 C22.7799928,11.2503008 31.2883297,8.96744792 40.9732642,8.96744792 C50.4527822,8.96744792 58.4762682,12.9156004 64.9789487,20.7592098 L65.117,20.929 L65.1471337,20.9111647 C67.5479615,19.554061 70.0538687,18.8356632 72.6531615,18.7638016 L73.0872396,18.7578125 C75.8201972,18.7578125 78.6948879,19.467102 81.7092479,20.8747759 L81.91,20.97 L82.0980169,20.7244582 C86.8626887,14.5809356 92.3711343,10.6966115 98.6122547,9.10634653 L99.0702294,8.99408028 Z" class="highlight" fill="#FFFFFF" fill-rule="nonzero"></path>
            </g>
            <g transform="translate(0.000000, 34.000000)">
                <ellipse class="wing wing-big" fill="#68C9CB" opacity="0.610328311" transform="" cx="47" cy="74.112622" rx="24" ry="39.5"></ellipse>
                <ellipse class="wing wing-lil" fill="#68C9CB" opacity="0.610328311" cx="63.2621026" cy="100.944004" rx="9" ry="15"></ellipse>
                <circle class="head" fill="#0FA95B" cx="97.5267358" cy="47.5" r="35.5"></circle>
                <path d="M66.5267358,12 C71.773441,12 76.0267358,16.2532949 76.0267358,21.5 C76.0267358,26.2390829 72.5566454,30.1676828 68.0187531,30.883511 C67.9092534,33.65085 66.6156338,36.1137502 64.6306988,37.7798248 C64.888574,38.6410238 65.0267358,39.5543772 65.0267358,40.5 C65.0267358,45.7467051 60.773441,50 55.5267358,50 C50.2800307,50 46.0267358,45.7467051 46.0267358,40.5 C46.0267358,37.5772887 47.3465841,34.9628445 49.4227729,33.2201752 C49.1648977,32.3589762 49.0267358,31.4456228 49.0267358,30.5 C49.0267358,25.7609171 52.4968263,21.8323172 57.0347186,21.116489 C57.235607,16.0475689 61.4084912,12 66.5267358,12 Z" class="left-ear" fill="#0FA95B"></path>
                <path d="M128.526736,1 C133.773441,1 138.026736,5.25329488 138.026736,10.5 C138.026736,15.2390829 134.556645,19.1676828 130.018753,19.883511 C129.909253,22.65085 128.615634,25.1137502 126.630699,26.7798248 C126.888574,27.6410238 127.026736,28.5543772 127.026736,29.5 C127.026736,34.7467051 122.773441,39 117.526736,39 C112.280031,39 108.026736,34.7467051 108.026736,29.5 C108.026736,26.5772887 109.346584,23.9628445 111.422773,22.2201752 C111.164898,21.3589762 111.026736,20.4456228 111.026736,19.5 C111.026736,14.7609171 114.496826,10.8323172 119.034719,10.116489 C119.235607,5.0475689 123.408491,1 128.526736,1 Z" class="right-ear" fill="#0FA95B" transform="translate(123.026736, 20.000000) rotate(-255.000000) translate(-123.026736, -20.000000) "></path>
                <path d="M136.026736,67 L136.854492,89.5605469 L127.008705,90.9459476 C128.310727,94.210068 129.026736,97.7714176 129.026736,101.5 C129.026736,103.590017 128.801763,105.627488 128.374712,107.589519 L139.041992,106.046387 L142.404297,123.489746 L109.834402,128.445498 C106.917517,129.452889 103.786019,130 100.526736,130 C92.3384434,130 84.9566814,126.546833 79.7582781,121.017327 C78.492921,122.821474 76.3974581,124 74.0267358,124 C70.1607426,124 67.0267358,120.865993 67.0267358,117 C67.0267358,113.370171 69.78954,110.385629 73.3269856,110.034538 C72.4820831,107.340483 72.0267358,104.473418 72.0267358,101.5 C72.0267358,85.7598846 84.7866205,73 100.526736,73 C103.503082,73 106.372866,73.4562446 109.069966,74.3026113 L108.510906,70.3226305 L136.026736,67 Z" class="body" fill="#0FA95B"></path>
                <circle class="eye eye-left" fill="#FFFFFF" cx="82.5267358" cy="65.5" r="2.5"></circle>
                <circle class="eye eye-right" fill="#FFFFFF" cx="114.526736" cy="61.5" r="2.5"></circle>
                <ellipse id="nose" fill="#FFFFFF" transform="translate(100.792084, 72.518467) rotate(-9.000000) translate(-100.792084, -72.518467) " cx="100.792084" cy="72.5184675" rx="4" ry="6.5"></ellipse>
            </g>
            <g class="wand" transform="translate(131.526592, 69.000000)">
                <path d="M15.1545205,20.511988 C15.6612085,20.591158 16.0192172,21.037821 15.9995122,21.5381152 L15.9881557,21.6543769 L5.9881557,85.6543769 C5.9028957,86.2000409 5.39143076,86.573272 4.84576679,86.488012 C4.33907881,86.408842 3.98107013,85.962179 4.00077511,85.4618848 L4.01213163,85.3456231 L14.0121316,21.3456231 C14.0913016,20.8389351 14.5379647,20.4809265 15.0382589,20.5006314 L15.1545205,20.511988 Z" id="wand-stick" fill="#A5B0B0" fill-rule="nonzero"></path>
              <circle class="wand-halo" fill="#FDD533" cx="16.9734078" cy="16.5" r="16.5"></circle>
                <polygon class="wand-star" fill="#FDD533" transform="translate(17.000144, 16.500000) rotate(21.000000) translate(-17.000144, -16.500000) " points="17.0001437 22.75 11.5765969 27.7621108 12.1136969 20.3968113 4.81354476 19.2815117 10.9068442 15.1092442 7.22725014 8.70637748 14.2883703 10.8689446 17.0001437 4 19.711917 10.8689446 26.7730372 8.70637748 23.0934431 15.1092442 29.1867426 19.2815117 21.8865904 20.3968113 22.4236904 27.7621108"></polygon>
            </g>
        </g>
</svg>
</div>



<!-- <div class="container">
  <div class="tooth-fairy">
    <svg class="eyeball eyeball-left" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
      <circle cx="3" cy="3" r="3"/>
    </svg>
    <svg class="eyeball eyeball-right" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
      <circle cx="3" cy="3" r="3"/>
    </svg>
    <img src="https://i.ibb.co/4RZ06m9/404-tooth-fairy.png" class="tooth-fairy-img">
  </div>
  <img src="https://i.ibb.co/ZBPXzr0/404-shadows.png" class="shadow">
</div> -->
              
            
!

CSS

              
                .container {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
}

.tooth-fairy {
  animation-name: hover;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.wand-halo {
  animation-name: wand-halo;
  animation-timing-function: ease-in-out;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

.eye {
  animation-timing-function: ease-in-out;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

.eye-left {
  animation-name: blink-left;
}

.eye-right {
  animation-name: blink-right;
}

.shadow {
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.tooth-shadow {
  animation-name: hover-shadow-tooth;
}

.tooth-fairy-shadow {
  animation-name: hover-shadow-fairy;
}

.wing-big {
  animation-name: wing-big;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

.wing-lil {
  animation-name: wing-lil;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}


@keyframes hover {
  0% {
    transform: translateY(20px);
  }

  50% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(20px);
    
  }
}

@keyframes hover-shadow-fairy {
  0% {
    transform: translateX(-35px) scaleX(1.3);
    opacity: 0.3;
  }

  50% {
    transform: none;
    opacity: 0.1;
  }

  100% {
    transform: translateX(-35px) scaleX(1.3);
    opacity: 0.3;
  }
}

@keyframes hover-shadow-tooth {
  0% {
    transform: translateX(-60px) scaleX(1.3);
    opacity: 0.3;
  }

  50% {
    transform: none;
    opacity: 0.15;
  }

  100% {
    transform: translateX(-60px) scaleX(1.3);
    opacity: 0.3;
  }
}

@keyframes wand-halo {
  0% {
    opacity: 0.35;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0.35;
  }
}

@keyframes blink-left {
  0% {
    transform: none;
  }
  
  89% {
    transform: none;
  }
  
  90% {
    transform: translateY(65px) scaleY(0);
  }
  
  93% {
    transform: none;
  }

  100% {
    transform: none;
  }
}

@keyframes blink-right {
  0% {
    transform: none;
  }
  
  89% {
    transform: none;
  }
  
  90% {
    transform: translateY(62px) scaleY(0);
  }
  
  93% {
    transform: none;
  }

  100% {
    transform: none;
  }
}

@keyframes wing-big {
  0% {
    transform: translate(-40px, 78px) rotate(-62deg);
  }
  
  89% {
    transform: translate(-40px, 78px) rotate(-62deg);
  }
  
  90% {
    transform: scaleY(0.8) translate(-40px, 110px) rotate(-69deg);
  }
  
  91% {
    transform: translate(-40px, 78px) rotate(-62deg);
  }
  
  92% {
    transform: scaleY(0.8) translate(-40px, 110px) rotate(-69deg);
  }
  
  93% {
    transform: translate(-40px, 78px) rotate(-62deg);
  }
  
  100% {
    transform: translate(-40px, 78px) rotate(-62deg);
  }
}


@keyframes wing-lil {
  0% {
    transform: translate(3px, 205px) rotate(-118deg);
  }
  
  89% {
    transform: translate(3px, 205px) rotate(-118deg);
  }
  
  90% {
    transform: scaleY(0.9) translate(16px, 225px) rotate(-122deg);
  }
  
  91% {
    transform: translate(3px, 205px) rotate(-118deg);
  }
  
  92% {
    transform: scaleY(0.9) translate(16px, 225px) rotate(-122deg);
  }
  
  93% {
    transform: translate(3px, 205px) rotate(-118deg);
  }
  
  100% {
    transform: translate(3px, 205px) rotate(-118deg);
  }
}


// Round 1

// .tooth-fairy {
//   position: relative;
//   z-index: 1;
//   animation-name: hover;
//   animation-timing-function: ease-in-out;
//   animation-duration: 3s;
//   animation-iteration-count: infinite;
// }

// .tooth-fairy-img {
//   width: 285px;
//   position: relative;
// }

// .eyeball {
//   fill: white;
//   width: 5px;
//   height: 5px;
//   position: absolute;
//   z-index: 2;
//   animation-name: blink;
//   animation-timing-function: ease-in-out;
//   animation-duration: 4s;
//   animation-iteration-count: infinite;
// }

// .eyeball-left {
//   top: 104px;
//   left: 90px;
// }

// .eyeball-right {
//   top: 99px;
//   left: 123px;
// }


// .shadow {
//   position: relative;
//   width: 188px;
//   margin-left: 78px;
//   z-index: 0;
//   animation-name: hover-shadow;
//   animation-timing-function: ease-in-out;
//   animation-duration: 3s;
//   animation-iteration-count: infinite;
// }

              
            
!

JS

              
                
              
            
!
999px

Console