cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

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.

            
              <div class="wrapper">
  <div class="window">
    <div class="tiles">
      <div class="scene">
        <div class="comet"></div>
      <div class="snow"></div>
        <svg width="371px" height="498px" viewBox="0 0 371 498" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group">
            <rect id="Rectangle" fill="#332A35" x="0" y="0" width="371" height="498"></rect>
            <rect id="Rectangle-Copy" fill="#7EA8A1" x="0" y="361" width="371" height="137"></rect>
            <path d="M0,188.30341 C50.7252534,291.55185 112.392368,315.518717 185.001344,260.204009 C257.61032,204.889301 319.609872,180.922435 371,188.30341 L371,406.03563 C341.050781,378.559972 294.262184,364.822142 230.634209,364.822142 C167.006234,364.822142 90.1281642,378.559972 0,406.03563 L0,188.30341 Z" id="Rectangle-2-Copy" fill="#436E7C"></path>
            <path d="M0,72 C50.7252534,154.036458 112.392368,173.079427 185.001344,129.128906 C257.61032,85.1783854 319.609872,66.1354167 371,72 L371,245 C310.961309,285.875 249.127975,306.3125 185.5,306.3125 C121.872025,306.3125 60.0386915,285.875 0,245 L0,72 Z" id="Rectangle-2" fill="#3D5366"></path>
            <g id="tree" transform="translate(226.000000, 126.000000)" fill="#7EA8A1">
                <polygon id="Rectangle-4" points="44 80 91 128 0 128"></polygon>
                <polygon id="Rectangle-4-Copy" points="44 40 91 88 0 88"></polygon>
                <polygon id="Rectangle-4-Copy-2" points="44 0 91 48 0 48"></polygon>
            </g>
            <polygon id="Rectangle-3" fill="#332A35" points="261 254 281 254 281 368 261 366.609756"></polygon>
        </g>
    </g>
</svg>
</div>
      <div class="frame frame--first"></div>
      <div class="frame frame--second"></div>
      <div class="frame frame--third"></div>
    </div>
    <div class="cat">
      <svg width="416" height="487" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M365.645 275.633c-14.921-14.042-28.274-17.582-44.084-17.582 0 0-6.384.169-1.303 6.591 6.722 8.498 55.875 72.606 55.105 125.066-.891 60.735-61.031 57.291-61.031 57.291 25.298-48.092 12.55-93.586 8.616-109.521-7.45-29.424-22.118-57.897-44.175-85.35-27.198-34.234-54.632-50.475-82.277-48.728-11.832-20.409-22.327-36.799-31.522-50.204C215.053 108.488 182.451 86.88 154.054 0c-6.598 18.43-11.852 32.065-15.799 40.823-20.063-2.496-64.571-2.495-84.624 0C49.684 32.065 44.43 18.43 37.832 0 9.361 87.113-23.349 108.099 27.309 153.054c5.389 102.186 26.465 129.361 60.56 178.729 28.058 40.626 21.066 55.093 34.234 111.271-99.67 62.788 69.299 38.717 95.5 37.423 67.471-3.281 208.15 37.062 196.977-106.548-3.237-41.593-22.105-72.819-48.935-98.296zM59.3 95.123c-30.879-2.315-26.51-19.565-11.198-19.077 8.708.277 19.524 6.37 26.993 19.077H59.3zm73.091 0h-15.796c7.47-12.707 18.287-18.799 26.994-19.077 15.315-.488 19.682 16.762-11.198 19.077z" fill="#351400" fill-rule="nonzero"/><ellipse fill="#351400" cx="57.5" cy="88.5" rx="25.5" ry="18.5"/><ellipse fill="#351400" cx="137.5" cy="88.5" rx="25.5" ry="18.5"/></g></svg>
    </div>
  </div>
  <div class="ledge"></div>
  
</div>
<div class="credits">
    Inspired by  Alex Pasquarella's <a href="https://dribbble.com/shots/3980016-Watching-Winter">illustration</a>
  </div>
            
          
!
            
              $wall_color: #FFD8C7;
$window_inner_color: #FFEDE3;
$window_outer_color: #F7C7B5;
$window_width: 23rem;
$window_height: 31em;
$gutter: 1.5rem;
$ledge_outer: rgb(163, 84, 91);

@media screen and (max-width: 480px) {
  .wrapper {
    transform: scale(.5);
  }
}

.wrapper {
  position: relative;
  transform: perspective(500px) transformZ(1deg);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .1s ease-in-out;
}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: $wall_color;
}

.tiles {
  display: grid;
  position: relative;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  transform: translateZ(1em);
  perspective: 1000px;
}

.scene {
  position: absolute;
  z-index: 0;
  overflow: hidden;
}

.frame {
  display: flex;
  background: $window_inner_color;
  align-self: center;
  justify-content: center;
  z-index: 2;
}

.frame--first {
    height: $window_height;
    width: $gutter;
    margin: auto;
}

.frame--second {
  width: $window_width;
  height: $gutter;
  position: absolute;
  transform: translateY($window_width - $gutter * 9);
}

.frame--third {
  width: $window_width;
  height: $gutter;
  position: absolute;
  transform: translateY($window_width - $gutter * 2);
  transform: translateY(-3em);
}

.comet {
  position: absolute;
  top: 3em; left: 3em;
  width: 2.5em; height: .1em;
  background: #fff;
  z-index: 0;
  border-radius: 50%;
  box-shadow: 20px 0px 20px 10px rgba(255,255,255,1);
  animation: 6s comet linear infinite 3s;
  transform: translateX(16em) translateY(-6em) scaleX(1.4) rotateZ(-45deg);
}

@keyframes comet {
  0% { transform: translateX(16em) translateY(-6em) scaleX(1.4) rotateZ(-45deg); }
  20% {
    opacity: 0;
    transform: translateX(1em) translateY(7em) scaleX(1.4) rotateZ(-45deg);
  }
  100% {
    opacity: 0;
    transform: translateX(1em) translateY(7em) scaleX(1.4) rotateZ(-45deg);
  }
}

.window {
  position: relative;
  padding: $gutter;
  z-index: 1;
  width: $window_width;
  background: $window_inner_color;
  height: $window_height;
  position: relative;
  box-shadow: 0 0 0 1.5rem $window_outer_color;
}

.cat {
  position: absolute;
  transform: scale(.5) translateZ(2em) scaleX(-1) skewY(180deg);
  bottom: -8rem;
  left: -6rem;
  z-index: 3;
}

.ledge {
  transform: translateY(0rem) translateZ(1em) translateX(-$gutter);
  z-index: 2;
  position: relative;
  width: $window_width + ($gutter * 4);
  background: $ledge_outer;
  height: 1.5rem;
    
    &:after {
      content: "";
      left: $gutter;
      width: $window_width + ($gutter * 2);
      height: 1.5rem;
      z-index: 2;
      position: absolute;
      top: 1.5rem;
      background: #683C51;
    }
    
    &:before {
      content: "";
      left: $gutter;
      width: $window_width + ($gutter * 2);
      height: 1.5rem;
      z-index: 2;
      position: absolute;
      top: 3rem;
      background: #F7C7B5;
    }
}

.snow {
   background-image:
           url(https://image.ibb.co/k0aqx6/snow.png), 
           url(https://image.ibb.co/eCahc6/snow1.png), 
           url(https://image.ibb.co/bOboH6/snow2.png);
   width: 100%;
   height: 40em;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 0;
   animation: snow 20s linear infinite;
}

@keyframes cat {
  from { transform: scale(.5) scaleX(-1) skewY(3deg) }
  top { transform: scale(.5) scaleX(-1) skewY(1deg) }
}


@keyframes snow {
    from {background-position: 0px 0px, 0px 0px, 0px 0px;}
    to {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

.credits {
  z-index: 2;
  color: #666;

  font-family: Helvetica Neue, Helvetica, sans-serif;
  margin-top: 5em;
}
            
          
!
            
              const w = window.innerWidth / 2;
const h = window.innerHeight / 2;
let request;

const wrapper = document.querySelector('.wrapper');

document.addEventListener('mousemove', mouseMove);

function mouseMove(e) {
  const pos = { x: 0, y: 0 };
  pos.x = e.clientX;
  pos.y = e.clientY;

  cancelAnimationFrame(request);
  request = requestAnimationFrame(update.bind(this, pos));
}

function update(coords) {
  let dx = coords.x - w;
  let dy = coords.y - h;
  let tiltx = dy / h;
  let tilty = -dx / w;
  let radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2));
  let degree = radius * 10;

  const string3d = `rotate3d(${tiltx}, ${tilty}, 0, ${degree}deg)`;
  wrapper.style.transform = string3d;
}
            
          
!
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.
Loading ..................

Console