Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <!-- 
A replica of the game "A Little to the Left" 
https://www.youtube.com/watch?v=iyYVAwDXbfI 
-->
<svg width="100%" height="100%" fill="none" id="wallpaper">
  <defs>
    <pattern id="wallpaper-pattern" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
      <path d="M15.8395 14.6841C13.5328 13.5621 13.302 10.3582 15.4241 8.91714L52.8257 -16.4814C54.9478 -17.9224 57.8312 -16.5198 58.0158 -13.9568L61.2697 31.2178C61.4543 33.7809 58.8017 35.5822 56.495 34.4601L15.8395 14.6841Z" />
      <path d="M15.8395 214.684C13.5328 213.562 13.302 210.358 15.4241 208.917L52.8257 183.519C54.9478 182.078 57.8312 183.48 58.0158 186.043L61.2697 231.218C61.4543 233.781 58.8017 235.582 56.495 234.46L15.8395 214.684Z" />
      <path d="M57.4638 125.024C54.4576 125.719 51.8189 122.896 52.7142 119.944L68.4938 67.9014C69.3891 64.9486 73.1469 64.0802 75.2579 66.3381L112.464 106.135C114.575 108.393 113.455 112.084 110.449 112.779L57.4638 125.024Z" />
      <path d="M164.389 59.1539C163.227 61.4409 160.02 61.6164 158.616 59.4698L133.866 21.6358C132.462 19.4892 133.914 16.6305 136.48 16.4901L181.703 14.0154C184.269 13.875 186.025 16.5583 184.863 18.8453L164.389 59.1539Z" />
      <path d="M163.953 182.257C164.596 183.664 166.521 183.847 167.418 182.587L222.795 135.542C223.692 134.282 222.888 132.523 221.348 132.377L140.453 124.686C138.913 124.54 137.793 126.115 138.436 127.522L163.953 182.257Z" />
      <path d="M-36.0468 182.257C-35.4037 183.664 -33.4789 183.847 -32.5822 182.587L22.7953 135.542C23.692 134.282 22.8881 132.523 21.3482 132.377L-59.5467 124.686C-61.0865 124.54 -62.2074 126.115 -61.5642 127.522L-36.0468 182.257Z" />

    </pattern>
  </defs>

  <rect fill="url(#wallpaper-pattern)" width="100%" height="100%" />
</svg>
<svg viewBox="0 0 1091 1078" fill="none" id="picture-frame">

  <g>
    <rect id="shadow" filter="url(#shadow-blur)" x="0" y="0" width="1051" height="1051" rx="25" fill="#232323" />
    <rect id="matte" x="54" y="52" width="951" height="955" fill="#F5EBE2" />
    <g id="portrait">
      <defs>

        <mask id="mask0_4_41" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="265" y="265" width="530" height="530">
          <rect id="mask" x="265" y="265" width="530" height="530" rx="7" fill="#FBC87B" />
        </mask>
        <mask id="glass-mask" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="100" y="100" width="900" height="900">
          <rect id="mask-2" x="100" y="100" width="900" height="900" rx="7" fill="#FBC87B" />
        </mask>
      </defs>
      <g mask="url(#mask0_4_41)">
        <rect id="background" x="265" y="265" width="530" height="530" />

        <g id="cat-image">
          <path id="Vector" d="M72.9999 346.5C83.5999 326.6 94.2999 306.6 104.9 286.7C108.6 279.6 107.5 277.1 99.7999 274.6C92.0999 272.1 84.0999 270 76.4999 267.4C74.1999 266.6 71.4999 264.8 70.3999 262.7C67.9999 258 71.6999 252.8 76.9999 253.5C88.0999 255.1 99.1999 257 110.3 259.3C115.8 260.4 118.9 259.8 121.4 254.7C122.9 251.7 124.1 248.6 124.8 245.3C126.3 238.8 124.8 236.4 118.6 233.7C111.8 230.6 105 227.5 98.2999 224.1C92.6999 221.3 91.1999 217.5 93.0999 212.8C94.9999 208.1 98.7999 206.5 104.7 208.5C110.5 210.5 116.2 212.8 122 215C128.3 217.5 130.3 216.9 132.2 210.2C133.9 204.2 135 197.9 136 191.7C144.7 141 155 90.7001 174.3 42.8001C178.9 31.5001 184.5 20.2001 191.8 10.5001C203.8 -5.39994 220.5 -2.09994 230.4 11.9001C248.2 37.0001 264.5 63.1001 281.2 88.9001C285.1 94.9001 289.8 98.3001 296.9 98.5001C314.1 98.9001 313.9 99.0001 319.7 83.1001C328.8 58.1001 339.3 33.7001 353.8 11.1001C360.1 1.40006 367.5 -1.49994 377.8 0.50006C380.6 1.10006 383.7 2.60006 385.8 4.60006C395.5 14.1001 401.4 26.0001 406.6 38.3001C413.1 53.8001 420.2 69.1001 426.2 84.7001C441 122.8 451.1 162.2 458.6 202.3C460.1 210.2 459.7 218.5 460 226.7C460.3 235.5 463.2 238.2 471.9 236.2C477.7 234.9 483.2 232.4 489 231C491.8 230.3 494.9 230.7 497.8 231.2C501.8 231.8 504.6 234.1 504.9 238.4C505.2 242.9 502.4 245.6 498.5 247C491.2 249.6 483.7 252 476.3 254.5C474.7 255 473.1 255.5 471.6 256C465.3 258.1 464.1 259.9 465 265.7C465.9 271.1 468.5 273.2 474.2 273.5C482.8 274 491.4 274.5 500 275.3C504.3 275.7 507 277.7 507.2 282.6C507.3 287.5 504.5 289.8 500.4 290.4C493.3 291.4 486.2 291.9 479.1 292.6C474.8 293 470.5 293.4 466.2 293.8C465.9 291.2 465.8 288.5 465.1 285.9C462.2 274 453.6 267.8 442.7 263.9C428.6 258.9 414.4 266.1 409.3 280.7C404.7 294 411.7 307.8 425.7 312.2C437.9 316 449.5 314.4 460.3 307.3C458.8 324 454.9 339.7 442.9 352.3C433.5 362.2 422.1 368.7 409.5 373.4C401.6 376.3 393.6 379.6 389.3 387.1C386.1 392.7 383.4 399.4 383.1 405.7C382.1 432.9 382.1 460.2 381.8 487.5C304.5 487.5 227.1 487.5 149.8 487.5C150.1 481.5 150.8 475.6 150.7 469.6C150.6 456.7 150.6 443.7 149.7 430.8C148.8 418.8 144.6 407.5 138.8 397C132.3 385.1 123.8 374.7 113 366.4C101.2 357.1 88.2999 349.3 72.9999 346.5ZM206.3 41.2001C201.9 40.8001 197.2 45.2001 194.6 51.6001C188.2 67.9001 181.7 84.3001 176.3 101C172.4 113.2 170 125.9 167.2 138.5C166 143.8 165.4 149.3 165 154.7C164.7 159.4 166.9 161.3 171.4 160.4C195.1 156.1 216.8 146.9 236.1 132.5C244 126.6 249 118 247.7 107.9C245.2 89.5001 238.5 72.3001 230 55.9001C225.9 47.8001 219.6 41.6001 206.3 41.2001ZM409.4 138.8C413.5 138.3 418.2 138.1 422.7 137.2C426.1 136.5 428.8 135.4 427 130.5C422.1 117.1 417.9 103.5 413 90.1001C405.9 70.6001 395.9 52.7001 383.2 36.3001C377.3 28.7001 369.6 26.6001 362.2 30.4001C351.3 35.9001 348.9 46.4001 347.1 56.9001C345.3 67.6001 344.1 78.5001 343.3 89.4001C341.9 106.9 344.1 117.2 359.8 125.6C374.9 133.8 391.6 137.7 409.4 138.8Z" fill="#F18DFC" />
          <path id="Vector_2" d="M73 346.5C88.3 349.4 101.2 357.1 113.2 366.4C123.9 374.7 132.4 385.1 139 397C144.8 407.6 149 418.8 149.9 430.8C150.8 443.7 150.8 456.7 150.9 469.6C151 475.6 150.3 481.5 150 487.5C100 487.5 50 487.5 0 487.5C5.6 476 11.1 464.4 16.9 453C31.1 425.4 45.3 398 59.7 370.5C63.9 362.4 68.6 354.5 73 346.5Z" fill="#DA63E9" />
          <path id="Vector_3" d="M460.5 307.3C449.7 314.4 438.1 316 425.9 312.2C411.8 307.8 404.8 294 409.5 280.7C414.6 266.1 428.8 258.9 442.9 263.9C453.8 267.7 462.4 273.9 465.3 285.9C465.9 288.5 466 291.1 466.4 293.8C464.3 298.3 462.4 302.8 460.5 307.3Z" fill="#DA63E9" />
          <path id="Vector_4" d="M206.3 41.2C219.7 41.7 225.9 47.9 230.1 55.9C238.6 72.3 245.3 89.5 247.8 107.9C249.2 118 244.1 126.7 236.2 132.5C216.9 146.9 195.2 156.1 171.5 160.4C167 161.2 164.8 159.3 165.1 154.7C165.5 149.3 166.1 143.8 167.3 138.5C170.1 125.9 172.4 113.2 176.4 101C181.8 84.3 188.3 67.9 194.7 51.6C197.1 45.2 201.9 40.8 206.3 41.2Z" fill="#DA63E9" />
          <path id="Vector_5" d="M409.4 138.8C391.6 137.7 374.9 133.8 359.8 125.6C344.1 117.1 341.9 106.9 343.3 89.4C344.2 78.5 345.4 67.7 347.1 56.9C348.8 46.4 351.3 35.8 362.2 30.4C369.6 26.7 377.3 28.7 383.2 36.3C395.9 52.7 406 70.6 413 90.1C417.8 103.5 422.1 117.1 427 130.5C428.8 135.4 426.1 136.6 422.7 137.2C418.2 138.1 413.5 138.4 409.4 138.8Z" fill="#DA63E9" />
          <path id="mouth" d="M374 289.5C360.5 288.5 342.5 288.5 336 266C338.53 287 314 287 302 291" stroke="#C03DCF" stroke-width="13" stroke-linecap="round" />
          <path id="Vector_6" d="M316.1 264.8C318.2 266.6 320.7 267.4 323 268.8C325.3 270.1 327.6 271.7 330.3 272.3C333.2 273 336.2 273.4 339.2 273.7C342.7 274.1 345 272.4 347.7 270.7C349.8 269.4 352 268.1 354.2 266.8C359 263.9 361.3 259.5 359.8 254.1C358.4 249.3 353.9 247.5 349.4 246.6C339.7 244.5 329.9 244.9 320.3 247.6C311 250.2 308.8 258.4 316.1 264.8Z" fill="#C03DCF" />
          <path id="Vector_7" d="M225.8 323.8C214.1 323.5 203.6 320.3 196.3 310.7C188.3 300.3 188.7 286.2 197.4 274C203 266 215.8 260 228 263.3C241.5 267 252.3 273.8 257.3 287.7C263 303.6 255.4 318.6 237.6 322.2C233.7 323.1 229.7 323.3 225.8 323.8Z" fill="#DA63E9" />
          <path id="eyes" d="M208 216C226 212 254 212 279 218.5M361.5 218.5C379.5 216 411.5 210.5 441 210.5" stroke="#C03DCF" stroke-width="19" stroke-linecap="round" />
        </g>
      </g>
    </g>

    <g mask="url(#glass-mask)">
      <g id="glare-group">

        <line id="glare-1" stroke-width="60" x1="700" y1="-300" x2="-400" y2="1000" stroke="white" />
        <line id="glare-2" stroke-width="20" x1="700" y1="-300" x2="-400" y2="1000" stroke="white" />
        <line id="glare-3" stroke-width="30" x1="700" y1="-300" x2="-400" y2="1000" stroke="white" />
      </g>
    </g>
    <g id="frame">
      <path id="inner-shadow" filter="url(#inner-shadow-blur)" fill-rule="evenodd" clip-rule="evenodd" d="M50.817 19C33.2449 19 19 33.245 19 50.817V1009.18C19 1026.76 33.245 1041 50.817 1041H1009.18C1026.76 1041 1041 1026.76 1041 1009.18V50.817C1041 33.2449 1026.76 19 1009.18 19H50.817ZM103.845 94.2038C98.5204 94.2038 94.2038 98.5204 94.2038 103.845V956.155C94.2038 961.48 98.5204 965.796 103.845 965.796H956.155C961.48 965.796 965.796 961.48 965.796 956.155V103.845C965.796 98.5204 961.48 94.2038 956.155 94.2038H103.845Z" fill="#6D6D6D" />
      <path id="wood" fill-rule="evenodd" clip-rule="evenodd" d="M33 0C14.7746 0 0 14.7746 0 33V1027C0 1045.23 14.7746 1060 33 1060H1027C1045.23 1060 1060 1045.23 1060 1027V33C1060 14.7746 1045.23 0 1027 0H33ZM88 78C82.4771 78 78 82.4772 78 88V972C78 977.523 82.4772 982 88 982H972C977.523 982 982 977.523 982 972V88C982 82.4772 977.523 78 972 78H88Z" fill="#D9D9D9" />
    </g>
    <path id="arrow" d="M113.435 3.66483C117.942 22 119.496 35.1236 117.942 51.1037C116.541 65.5147 113.161 78.4826 106.111 91.2182C86.1922 127.2 53.7066 138.69 15.4999 137C9.65541 136.742 2.1904 137.04 4.49995 135.5C7.91693 133.222 29.4838 116.893 25.5 118C20.2282 119.464 3.5 129.757 3.5 136C3.5 142.241 20.4205 152.065 24.9999 155.5" stroke="none" stroke-width="7" stroke-linecap="round" />
  </g>
  <filter id="shadow-blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
  </filter>

  <filter id="inner-shadow-blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
  </filter>

  <filter id='scribble'>
    <feturbulence basefrequency='0.05' id='turbulence' numoctaves='2' result='noise' seed='0'></feturbulence>
    <fedisplacementmap id='displacement' in2='noise' in='SourceGraphic' scale='3'></fedisplacementmap>
  </filter>
</svg>
              
            
!

CSS

              
                * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: hsl(205, 9%, 59%);
  display: grid;
  place-items: center;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  opacity: 0;
}

#wallpaper {
  fill: hsl(60, 18%, 60%);
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  filter: url(#scribble);
}

#picture-frame {
  max-width: 70vw;
  max-height: 70vh;
  overflow: visible;
  transform-origin: center 15%;
  filter: url(#scribble);
}

#shadow {
  opacity: 0.3;
}

#inner-shadow {
  opacity: 0.5;
}

#wood {
  fill: hsl(30, 42%, 70%);
}

#glare-group {
  opacity: 0.35;
}
#cat-image {
  filter: saturate(0.5);
}

#background {
  fill: hsl(76, 21%, 32%);
}

body,
#background,
#mouth,
#eyes,
#wallpaper,
#cat-image {
  transition: 1s ease-in-out all;
}

.win {
  background-color: hsl(120, 27%, 53%);

  #wood {
    fill: hsl(30, 62%, 70%);
  }

  #wallpaper {
    fill: hsl(60, 84%, 74%);
  }

  #background {
    fill: hsl(76, 41%, 32%);
  }

  //   Change the SVG path to make the cat smile
  #mouth {
    d: path("M388.5 292C376 320.5 341 307.5 336 266C342 300 311 330 288 297");
  }

  #eyes {
    d: path(
      "M208 216C229 208 247 196 279 218.5M361.5 218.5C379.5 208 407 187 441 210.5"
    );
  }

  #cat-image {
    filter: saturate(1);
  }
}

              
            
!

JS

              
                // Set up Timeline for wallpaper triangles
let triangleTL = gsap.timeline({
  paused: true,
  repeat: -1,
  yoyo: true
});

function getShadowXY(rotation, inner = false) {
  /* 
  Figures out shadow positions based on
  the rotation of the picture frame.
  Uses different values for inner and outer shadows.
  
  Thanks to Lucie Haberer for figuring out these values!
  
  returns [xPosition, yPosition]
*/
  if (inner) {
    return [
      Math.sin(rotation / (180 / Math.PI)) * 10,
      Math.cos(rotation / (180 / Math.PI)) * 10
    ];
  } else {
    return [
      Math.sin(rotation / (180 / Math.PI)) * 45 + 15,
      Math.cos(rotation / (180 / Math.PI)) * 45
    ];
  }
}

function adjustPicture(rotation, duration = 0) {
  /* 
  Updates shadows and glare when the picture rotates.
  */
  const [outerShadowX, outerShadowY] = getShadowXY(rotation, false);

  gsap.to("#shadow", {
    x: outerShadowX,
    y: outerShadowY,
    duration
  });

  const [innerShadowX, innerShadowY] = getShadowXY(rotation, true);

  gsap.to("#inner-shadow", {
    x: innerShadowX,
    y: innerShadowY,
    duration
  });

  // Keep the white glare lines constant
  gsap.to("#glare-group", {
    duration,
    rotate: -1 * rotation,
    transformOrigin: "center center"
  });
}

function handleMoveEnd(rotation) {
  /*
    Called when dragging or inertia is complete. 
    Applies gravity and 'win' states.
  */

  // If picture is high up, apply fake gravity.
  if (rotation > 45 || rotation < -45) {
    const sign = Math.sign(rotation);
    const newRotation = gsap.utils.random(15, 25, 1) * sign;
    gsap.to("#picture-frame", {
      rotation: newRotation,
      duration: 2
    });
    adjustPicture(newRotation, (duration = 2));
  }

  // Check for 'win' state
  const body = document.querySelector("body");
  if (rotation > -1 && rotation < 1) {
    body.classList.add("win");
    triangleTL.resume();
  } else {
    body.classList.remove("win");
    triangleTL.pause();
  }
}

function init() {
  const initialRotation =
    gsap.utils.random(8.5, 16, 0.1) * gsap.utils.random([1, -1]);

  gsap.set("#cat-image", { x: 275, y: 315 });
  gsap.set("#glare-2", {
    x: 60,
    y: 60
  });
  gsap.set("#glare-3", {
    x: 760,
    y: 360
  });

  gsap.set("#wallpaper path", { transformOrigin: "center" });

  triangleTL.to("#wallpaper path", {
    rotate: 60,
    ease: "back.inOut(2.5)",
    duration: 0.6
  });

  gsap.set("#picture-frame", {
    rotation: initialRotation
  });

  adjustPicture(initialRotation, 0);

  const rotationSign = Math.sign(initialRotation);
  gsap.set("#arrow", {
    stroke: "hsl(200, 20%, 20%)",
    y: 1010,
    scaleX: rotationSign * -1,
    x: () => (initialRotation > 0 ? 5 : 1050),
    drawSVG: "0%",
    opacity: 0.5,
    rotate: 40 * rotationSign
  });

  // Create arrow to give users a hint
  gsap
    .timeline({ delay: 2, repeat: -1, repeatDelay: 2 })
    .to("#arrow", {
      duration: 0.8,
      drawSVG: "0% 100%",
      ease: "power2.inOut",
      rotate: 0
    })
    .to(
      "#arrow",
      {
        drawSVG: "100% 100%",
        duration: 0.4
      },
      1.5
    )
    .set("#arrow", { drawSVG: "0% 0%", rotate: 40 * rotationSign });

  gsap.to("body", {
    opacity: 1,
    duration: 0.2
  });

  /*
    Draggable handles the click/drag logic for us.
    Intertia makes it keep moving if we toss it.
    Rotation point is based on the transform-origin.
  */
  Draggable.create("#picture-frame", {
    type: "rotation",
    inertia: true,
    bounds: { minRotation: -110, maxRotation: 110 },
    onDrag: function () {
      adjustPicture(this.rotation);
      gsap.to("#arrow", { opacity: 0, duration: 0.2 });
    },
    onDragEnd: function () {
      handleMoveEnd(this.rotation);
    },
    onThrowUpdate: function () {
      adjustPicture(this.rotation);
    },
    onThrowComplete: function () {
      handleMoveEnd(this.rotation);
    }
  });
}

init();

              
            
!
999px

Console