123

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="card">
  <div class="gooLogo">
    <h2>a sticky adventure</h2>
    <svg viewBox="0 0 361 169"><use xlink:href="#goo-logo"></use></svg>
    <svg viewBox="0 0 361 169"><use xlink:href="#goo-logo"></use></svg>
  </div>
  
  <div class="brick">
    <div class="shadow"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <svg class="gooGuy" viewBox="0 0 280 222">
      <g id="goo-guy" transform="translate(2 2)" fill="none" fill-rule="evenodd">
        <path d="M52.418 164.863C48.302 182.613 59.748 197 77.97 197h83.53c54.4 0 98.5-44.1 98.5-98.5S215.9 0 161.5 0 63 44.1 63 98.5c0 26.203-10.582 66.363-10.582 66.363z" stroke="#3D3D3D" stroke-width="4" fill="url(#a)"/>
        <circle class="left-eye" fill="#FFF" cx="160" cy="72" r="8"/>
        <circle class="right-eye" fill="#FFF" cx="220" cy="72" r="8"/>
        
        <circle class="tail-circle" id="tail-circle-1" stroke="#3E3E3E" stroke-width="4" fill="#434343" id="tail-circle-2" cx="33.5" cy="185.5" r="11.5"/>
        <circle class="tail-circle" id="tail-circle-2" stroke="#3E3E3E" stroke-width="4" fill="#434343" cx="5" cy="192" r="5"/>
        <circle class="tail-circle" id="tail-circle-3" stroke="#3E3E3E" stroke-width="4" fill="#434343" cx="15" cy="177" r="2"/>
        
        <g transform="translate(0 193)" opacity=".573">
          <path d="M47.923 5.625c-1.634.207-1.613.375.044.375H161.5C215.9 6 260 4.657 260 3s-44.1-3-98.5-3S63 1.343 63 3c0 .798-15.077 2.625-15.077 2.625z" stroke="#3D3D3D" stroke-width="4" fill="url(#a)" filter="url(#b)"/>
          <ellipse fill="#FFF" filter="url(#b)" cx="160" cy="2.193" rx="8" ry=".244"/>
          <ellipse fill="#FFF" filter="url(#b)" cx="220" cy="2.193" rx="8" ry=".244"/>
          <ellipse stroke="#3E3E3E" stroke-width="4" fill="#434343" filter="url(#b)" cx="33.5" cy="5.65" rx="11.5" ry=".35"/>
          <ellipse stroke="#3E3E3E" stroke-width="4" fill="#434343" filter="url(#b)" cx="5" cy="5.848" rx="5" ry=".152"/>
          <ellipse stroke="#3E3E3E" stroke-width="4" fill="#434343" filter="url(#b)" cx="15" cy="5.391" rx="2" ry=".061"/>
        </g>
      </g>
    </svg>
  </div>
</div>

<!--  Sketch generated SVG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280 222">
  <defs>
    <radialGradient cx="71.282%" fx="71.282%" fy="50%" r="159.39%" id="a">
      <stop stop-color="#5B5B5B" offset="0%"/>
      <stop stop-color="#2C2C2C" offset="100%"/>
    </radialGradient>
    <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="b">
      <feGaussianBlur stdDeviation="6.554" in="SourceGraphic" result="blur"/>
    </filter>
  </defs>
</svg>

<svg viewBox="0 0 361 169" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="goo-logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g transform="translate(-412.000000, -108.000000)">
        <g transform="translate(412.000000, 108.000000)">
          <path d="M0.412109375,60.0253906 C0.412109375,42.1932702 4.65523101,27.8346898 13.1416016,16.9492188 C21.6279721,6.06374766 33.0682874,0.62109375 47.4628906,0.62109375 C60.2103502,0.62109375 70.1288708,4.98953965 77.21875,13.7265625 L78.5078125,2.76953125 L106.652344,2.76953125 L106.652344,115.132812 C106.652344,125.302134 104.342797,134.146447 99.7236328,141.666016 C95.1044691,149.185584 88.6055106,154.914694 80.2265625,158.853516 C71.8476144,162.792337 62.0365146,164.761719 50.7929688,164.761719 C42.2707907,164.761719 33.9635821,163.060889 25.8710938,159.65918 C17.7786054,156.25747 11.6556197,151.871121 7.50195312,146.5 L21.2519531,127.59375 C28.9863668,136.259158 38.3677834,140.591797 49.3964844,140.591797 C57.6322026,140.591797 64.0416438,138.38967 68.625,133.985352 C73.2083562,129.581033 75.5,123.332723 75.5,115.240234 L75.5,109.009766 C68.3385059,117.102254 58.9212823,121.148438 47.2480469,121.148438 C33.2831333,121.148438 21.9860458,115.68788 13.3564453,104.766602 C4.72684487,93.845323 0.412109375,79.3614184 0.412109375,61.3144531 L0.412109375,60.0253906 Z M31.4570312,62.28125 C31.4570312,72.8086464 33.5696403,81.0621446 37.7949219,87.0419922 C42.0202034,93.0218398 47.8209267,96.0117188 55.1972656,96.0117188 C64.6504379,96.0117188 71.4179483,92.4668323 75.5,85.3769531 L75.5,36.5 C71.3463334,29.4101208 64.6504368,25.8652344 55.4121094,25.8652344 C47.9641555,25.8652344 42.1097218,28.9088237 37.8486328,34.9960938 C33.5875438,41.0833638 31.4570312,50.1783249 31.4570312,62.28125 L31.4570312,62.28125 Z M125.666016,59.8105469 C125.666016,48.2805413 127.886046,38.0039514 132.326172,28.9804688 C136.766298,19.9569861 143.157836,12.9746341 151.500977,8.03320312 C159.844117,3.09177217 169.529893,0.62109375 180.558594,0.62109375 C193.333364,0.62109375 202.284172,5.97507334 213.145511,10.1711831 C224.00685,14.3672928 217.122266,13.2357492 218.961914,15.015625 C228.880583,24.6120271 234.412755,37.645751 235.558594,54.1171875 L235.773438,62.0664062 C235.773438,79.8985267 230.796274,94.2033966 220.841797,104.981445 C218.732971,107.264743 233.687587,106.873789 214.057344,111.105763 C194.427101,115.337738 193.981224,121.148438 180.773438,121.148438 C164.015541,121.148438 150.641652,115.777397 140.651367,105.035156 C130.661083,94.292915 125.666016,79.6836861 125.666016,61.2070312 L125.666016,59.8105469 Z M156.710938,62.0664062 C156.710938,73.0951072 158.78774,81.5276401 162.941406,87.3642578 C167.095073,93.2008755 173.039024,96.1191406 180.773438,96.1191406 C188.293006,96.1191406 194.165343,93.2366825 198.390625,87.4716797 C202.615907,81.7066769 204.728516,72.4863915 204.728516,59.8105469 C204.728516,48.9966907 202.615907,40.6178683 198.390625,34.6738281 C194.165343,28.729788 188.221392,25.7578125 180.558594,25.7578125 C172.96741,25.7578125 167.095073,28.7118845 162.941406,34.6201172 C158.78774,40.5283499 156.710938,49.6770214 156.710938,62.0664062 L156.710938,62.0664062 Z M250.060547,59.8105469 C250.060547,48.2805413 252.280577,38.0039514 256.720703,28.9804688 C260.402963,21.4971662 261.739755,13.5058476 271.793913,10.7418783 C281.84807,7.97790909 293.924424,0.62109375 304.953125,0.62109375 C320.636797,0.62109375 333.437776,5.41922285 343.356445,15.015625 C353.275115,24.6120271 358.807286,37.645751 359.953125,54.1171875 L360.167969,62.0664062 C360.167969,79.8985267 355.190805,94.2033966 345.236328,104.981445 C335.281851,115.759494 321.925865,121.148438 305.167969,121.148438 C291.594977,121.148438 290.684891,114.138985 271.108633,110.577942 C251.532376,107.0169 266.944592,107.076762 265.045898,105.035156 C255.055614,94.292915 250.060547,79.6836861 250.060547,61.2070312 L250.060547,59.8105469 Z M281.105469,62.0664062 C281.105469,73.0951072 283.182271,81.5276401 287.335938,87.3642578 C291.489604,93.2008755 297.433555,96.1191406 305.167969,96.1191406 C312.687538,96.1191406 318.559875,93.2366825 322.785156,87.4716797 C327.010438,81.7066769 329.123047,72.4863915 329.123047,59.8105469 C329.123047,48.9966907 327.010438,40.6178683 322.785156,34.6738281 C318.559875,28.729788 312.615924,25.7578125 304.953125,25.7578125 C297.361941,25.7578125 291.489604,28.7118845 287.335938,34.6201172 C283.182271,40.5283499 281.105469,49.6770214 281.105469,62.0664062 L281.105469,62.0664062 Z" id="goo" fill="#F4F4F4"></path>
          <path d="M181.930082,0.157826375 C181.930082,0.157826375 235.176222,29.7673978 308.440855,0.49516064 L269.486178,56.2677679 L290.983754,106.021854 L307.889884,120.858684 C307.889884,120.858684 246.299444,91.9760103 179.848219,121.755577 L216.950552,74.3463073 L214.766941,39.8672383 L187.552409,12.5061545 L181.366488,3.12542083 L181.930082,0.157826375 Z" fill="#F3F3F3"></path>
        </g>
      </g>
    </g>
  </defs>
</svg>

            
          
!
            
              html, body {
  height: 100vh;
  width: 100vw;
  display: flex;
  perspective: 80rem;
  font-family: 'Roboto', sans-serif;
}

html, body, .card, .brick {
  transform-style: preserve-3d;
}

.card {
  will-change: transform;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 30rem;
  height: 25rem;
  border-radius: .4rem;
  background-image: radial-gradient(circle at 50% 0% , #9099A2 0%, #717C89 15rem);
  &:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    filter: blur(.5rem);
    transform: translateZ(-2rem);
  }

}

.brick {
  margin: auto;
  margin-bottom: 7em;
  width: 8rem;
  height: 3.4rem;
  background: #FF6B6B;
  transform: translateZ(4rem);
  position: relative;
  .side, .shadow {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #E45A5A;
    transform-origin: 50% 0;
    transform: rotateX(-90deg);
    &:nth-of-type(2),
    &:nth-of-type(3) {
      transform-origin: 0 50%;
      transform: rotateY(90deg);
      width: 3.4rem;
    }
    &:nth-of-type(3) {
      left: 100%;
      transform: rotateY(90deg);
    }
    &:nth-of-type(4) {
      transform: rotateX(-90deg) translateZ(3.4rem);
    }
  }
  .shadow {
    background: #000;
    opacity: .25;
    transform: translateZ(-3.9rem);
    filter: blur(.4rem);
  }
}

.gooGuy {
  position: abolute;
  margin: auto;
  left: 0;
  right: 0;
  width: 7em;
  transform: translateX(15%) translateY(-91%) translateZ(-1em);
  
}

.gooLogo {
  margin: auto;
  margin-top: 3em;
  width: 10rem;
  transform-style: preserve-3d;
  h2 {
    position: absolute;
    transform: translateZ(.1rem);
    font-size: .8rem;
    font-weight: 200;
    top: 3.4rem;
    left: 3.5rem;
    color: #F3F3F3;
    text-shadow: 0 .1rem 0 rgba(0,0,0,.2);
  }
  svg {
    transform: translateZ(1rem);
    position: absolute;
    top: 0;
    left: 0;
    &:last-child {
      transform: translateZ(.1rem);
      filter: blur(.4rem) brightness(0) opacity(.2);
    }
  }
}

.tail-circle {
  animation: tail 1s infinite alternate-reverse;
}

#tail-circle-1 {
  animation-delay: -.5s;
}

#tail-circle-3 {
  animation-delay: -.8s;
}

@keyframes tail {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-.4rem);
  }
}
            
          
!
            
              let card = document.querySelector('.card')
function update(elem, event) {
  let xpos = event.layerX || event.offsetX
  let ypos = event.layerY || event.offsetY
  
  let ax = -(window.innerWidth / 2 - xpos) / 20
  let ay = (window.innerHeight / 2 - ypos) / 10
  
  elem.style.transform = `rotateY(${ax}deg) rotateX(${ay}deg)`
}

document.addEventListener('mousemove', e =>
  window.requestAnimationFrame(_ =>
    update(card, e)))
            
          
!
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