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.

            
              <div class="skeleton">
  <div class="head"></div>
  <div class="neck"></div>
  <div class="right-eye"></div>
  <div class="left-eye"></div>
  <div class="nose"></div>
  <div class="mouth"></div>
  <div class="stitch1"></div>
  <div class="stitch2"></div>
  <div class="stitch3"></div>
  <div class="snake"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100"><defs>      <clipPath id="the-object">
        <path fill="currentColor" d="M 87.9 33.8 C 90.4 29.9 89.3 24.6 85.4 22.1 L 75.2 15.6 C 74.2 14.9 72.8 14.7 71.6 15.1 C 69.4 15.8 68.2 18.2 68.9 20.5 L 72.7 32 C 73.3 33.8 74.5 35.3 76.1 36.4 C 78.1 37.7 80.3 38 82.4 37.6 C 82.3 42.6 80.7 48.8 74.9 51.1 C 66.5 54.4 66.1 44.9 59.9 32.1 C 53.7 19.3 30.7 23.2 25.9 34.1 C 20.7 45.9 27.4 52.9 29.9 56.1 C 32.4 59.3 42.6 65.6 44.9 69.1 C 47.2 72.6 42.8 78.9 35.9 68.1 C 29 57.3 23.4 53.2 18 55 C 12.6 56.8 11.5 63 14 70 C 16.5 77 25.9 81.7 23 84 C 21.4 85.3 13.3 85 9 84 C 7.9 83.7 7.3 85.3 8.3 85.8 C 13.8 89 25.9 92 29 85.9 C 33 78.2 24.5 76.7 21 67.9 C 17.5 59.1 24.4 65.2 27 68.9 C 29.6 72.6 34.4 81.5 41 83.9 C 47.6 86.3 55.6 78.9 56.1 70.4 C 56.6 61.9 48.7 58.8 44 55 C 39.3 51.2 32.9 42.4 41 38 C 49.1 33.6 53.9 47.2 56 52 C 58.1 56.8 63 60.3 69 61 C 75 61.7 81.7 58.8 86 51 C 88.9 45.8 88.2 39.4 87 34.9 C 87.3 34.6 87.6 34.2 87.9 33.8 Z">
    </path>
      </clipPath><filter id="noise">
      	  <feTurbulence type="fractalNoise" baseFrequency="1.6" result="noisy" />
	        <feColorMatrix type="saturate" values="0"/>
        <feBlend in="SourceGraphic" in2="noisy" mode="multiply" />
    </filter></defs><g><g transform="translate(50 50) scale(0.69 0.69) rotate(-60) translate(-50 -50)" style="fill:#c44b35;"><svg fill="#c44b35" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 96 96" overflow="hidden" x="0px" y="0px"><path class="tongue" d=" M 63 13 L 65.6 13 L 68.3 15.7 L 69.7 14.3 L 67 11.6 L 67 9 C 67 8.4 66.6 8 66 8 C 65.4 8 65 8.4 65 9 L 65 11 L 63 11 C 62.4 11 62 11.4 62 12 C 62 12.6 62.4 13 63 13 Z"></path><path class="snake-body" filter="url(#noise)" clip-path="url(#the-object)" d=" M 87.9 33.8 C 90.4 29.9 89.3 24.6 85.4 22.1 L 75.2 15.6 C 74.2 14.9 72.8 14.7 71.6 15.1 C 69.4 15.8 68.2 18.2 68.9 20.5 L 72.7 32 C 73.3 33.8 74.5 35.3 76.1 36.4 C 78.1 37.7 80.3 38 82.4 37.6 C 82.3 42.6 80.7 48.8 74.9 51.1 C 66.5 54.4 66.1 44.9 59.9 32.1 C 53.7 19.3 30.7 23.2 25.9 34.1 C 20.7 45.9 27.4 52.9 29.9 56.1 C 32.4 59.3 42.6 65.6 44.9 69.1 C 47.2 72.6 42.8 78.9 35.9 68.1 C 29 57.3 23.4 53.2 18 55 C 12.6 56.8 11.5 63 14 70 C 16.5 77 25.9 81.7 23 84 C 21.4 85.3 13.3 85 9 84 C 7.9 83.7 7.3 85.3 8.3 85.8 C 13.8 89 25.9 92 29 85.9 C 33 78.2 24.5 76.7 21 67.9 C 17.5 59.1 24.4 65.2 27 68.9 C 29.6 72.6 34.4 81.5 41 83.9 C 47.6 86.3 55.6 78.9 56.1 70.4 C 56.6 61.9 48.7 58.8 44 55 C 39.3 51.2 32.9 42.4 41 38 C 49.1 33.6 53.9 47.2 56 52 C 58.1 56.8 63 60.3 69 61 C 75 61.7 81.7 58.8 86 51 C 88.9 45.8 88.2 39.4 87 34.9 C 87.3 34.6 87.6 34.2 87.9 33.8 Z"></path></svg></g></g></svg></div>
<div class="snake-tongue">
  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
        <path d="M6.4,206.4c7.1-7.1-5.6-19.9,1.6-27s19.9,5.6,27-1.6c7.1-7.1-5.6-19.9,1.6-27c7.1-7.1,19.9,5.6,27-1.6
          c7.1-7.1-5.6-19.9,1.6-27c7.1-7.1,19.9,5.6,27-1.6c7.1-7.1-5.6-19.9,1.6-27l0,0c7.1-7.1,19.9,5.6,27-1.6c7.1-7.1-5.6-19.9,1.6-27
          c7.1-7.1,19.9,5.6,27-1.6c7.1-7.1-5.6-19.9,1.6-27c7.1-7.1,19.9,5.6,27-1.6c7.1-7.1-5.6-19.9,1.6-27s19.9,5.6,27-1.6"></path>
        </svg>
  </div>
  <div class="s-curve"></div>
  <div class="bone"></div>
  <div class="bone-right"></div>
  <div class="bone-left"></div>
</div>
            
          
!
            
              $noise-bg: "data:image/png;base64,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";

body {
  background: black;
  background-image: url($noise-bg);
}

.skeleton {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}

.head {
  background: linear-gradient(to right, #997b5d 50%, #c1beb2 50%);
	border-radius: 50%;
  height: 175px;
	width: 175px;
  z-index: 4;
 
  &:after {
    background-image: url($noise-bg);
    border-radius: 50%;
    content: '';
    display: block;
    height: 175px;
    width: 175px;
  }
}

.neck {
  background: linear-gradient(to right, #997b5d 50%, #c1beb2 50%);
	height: 25px;
  margin-top: 170px;
  margin-left: -115px;
  position: relative;
  width: 55px;
  
  &:after {
    background-image: url($noise-bg);
    content: '';
    display: block;
    height: 25px;
    position: relative;
    width: 55px;
  }
}

.right-eye {
  animation: eye-blink 5s infinite;
  background: black;
  background-image: url($noise-bg);
  border-radius: 50%;
  height: 45px;
  margin-top: 30px;
	width: 45px;
  z-index: 5;
}

.left-eye {
  background: radial-gradient(circle at bottom left, black 20%, black 29%, #c44b35 3%, #c44b35 63%, #c44b35 33%, black 40%);
  border-radius: 50%;
  height: 45px;
  margin-top: 30px;
  margin-left: -145px;
  transform: rotate(-55deg);
	width: 45px;
  z-index: 5;

  &:after {
    background-image: url($noise-bg);
    border-radius: 50%;
    content: '';
    display: block;
    height: 45px;
    width: 45px;
  }
}

.nose {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 25px solid black;
  height: 0; 
  margin-top: 70px;
  margin-left: 17px;
  width: 0;
  z-index: 5; 
}

.mouth {
  background: black;
  height: 5px;
  margin-top: 135px;
  margin-left: -29px;
  width: 40px;
  z-index: 5;
}

.stitch1 {
  z-index: 5;
  position: absolute;
  margin-top: 68px;
  border-radius: 40%;
  margin-left: 22px;
  width: 4px;
  height: 14px;
  background: black;
}

.stitch2 {
  z-index: 5;
  position: absolute;
  margin-top: 68px;
  border-radius: 40%;
  margin-left: 34px;
  width: 4px;
  height: 14px;
  background: black;
}

.stitch3 {
  z-index: 5;
  position: absolute;
  margin-top: 68px;
  border-radius: 40%;
  margin-left: 46px;
  width: 4px;
  height: 14px;
  background: black;
}

@keyframes eye-blink
{
0% {
  transform: scaleY(1) translateY(0px) translateZ(0);
}
45% {
  transform: scaleY(1) translateY(0px) translateZ(0);
}
50% {
  transform: scaleY(0.1) translateZ(0);
}
55% {
  transform: scaleY(1) translateY(0px);
}
100% {
  transform: scaleY(1) translateY(0px) translateZ(0);
}
}

.snake {
  position: absolute;
    margin-top: -10px;
    z-index: 2;
    transform: scaleY(1) scaleX(1.2)rotate(-25deg);
    margin-left: -15px;
  
  svg {
    height: 350px;
    width: 350px;
  }
}

.s-curve {
  height: 50px;
  width: 50px;
  background: black;
   background-image: url($noise-bg);
  position: absolute;
  border-radius: 50%;
  margin-left: -40px;
  margin-top: -2px;
  z-index: 3;
}

.tongue {
  fill: #681302;
  stroke: black;
  transform: translate(3px, 3px) translate3d(0, 0, 0);;
  animation: hiss 4s cubic-bezier(.36,.07,.19,.97) both;
    backface-visibility: hidden;
  perspective: 1000px;
  animation-iteration-count: infinite;
}


@keyframes hiss {
  1%, 9% {
    transform: translate(3px, 3px) translate3d(-1px, 0, 0);
  }
  
  2%, 8% {
    transform: translate(3px, 3px)  translate3d(1px, 0, 0);
  }

  3%, 5%, 7% {
    transform: translate(3px, 3px)  translate3d(-1px, 0, 0);
  }

  4%, 6% {
    transform: translate(2px, 2px)  translate3d(1px, 0, 0);
  }
  
  10% {
    transform: translate(3px, 3px) translate3d(0, 0, 0);;
  }
}

.bone {
  height: 14px;
  width: 100px;
  background: #C1BEB2;
  position: absolute;
  margin-top: 116px;
  margin-left: 35px;
  background-image: url($noise-bg);
}

.bone-right {
  height: 13px;
  width: 13px;
  border-radius: 13px;
  background: #C1BEB2;
  position: absolute;
  margin-top: 110px;
  margin-left: 87px;
  background-image: url($noise-bg);
  &:after {
    content: '';
      height: 13px;
  width: 13px;
  border-radius: 13px;
  background: #C1BEB2;
  position: absolute;
  margin-top: 12px;
  background-image: url($noise-bg);
  }
}

.bone-left {
  height: 13px;
  width: 13px;
  border-radius: 13px;
  background: #C1BEB2;
  position: absolute;
  margin-top: 110px;
  margin-left: -18px;
  background-image: url($noise-bg);
  &:after {
    content: '';
      height: 13px;
  width: 13px;
  border-radius: 13px;
  background: #C1BEB2;
  position: absolute;
  margin-top: 12px;
  background-image: url($noise-bg);
  }
}
            
          
!
            
              



//inspiration from https://dribbble.com/shots/3045320-Club-Kiddo-Co-Halloween-Series
            
          
!
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