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

Auto Save

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

              
                <link href='//fonts.googleapis.com/css?family=Lato:400,900,400italic,700italic' rel='stylesheet'>

<h1>We got you a thing!</h1>

<button id="gimme">Gimme.</button>

<div id="reveal-gift">
  <a href="https://codepen-other.s3.amazonaws.com/CodePen.saver.zip" download class="button" id="download">Download</a>
  
  <p>Don't have a Mac? The screensaver (created by <a href="https://twitter.com/bdkjones" target="_blank">Bryan Jones</a>) is actually just loading a new view on CodePen we call "CodePen TV". Load it up at <a href="https://codepen.io/tv/" target="_blank">https://codepen.io/tv/</a> or pass it a Collection slug like <a href="https://codepen.io/tv/AZMgeN/" target="_blank">https://codepen.io/tv/AZMgeN/</a></p>
</div>

<svg id="all-presents" viewBox="-155 -20 600 275.41"><g id="top"><rect x="94.58" y="44.63" width="87.19" height="57.7" fill="#6dbf9e"/><rect x="90.88" y="33.21" width="94.6" height="16.61" fill="#5da387"/><line x1="139.82" y1="101.76" x2="139.34" y2="33.09" fill="none" stroke="#eda022" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.08"/><path d="M161.32,102.4c4.31-11.95,12.31-22,22.13-27.71,3.47-2,7.3-3.57,11.16-3.17a10.45,10.45,0,0,1,9.06,7.42,13.39,13.39,0,0,1-.17,7.83,17.4,17.4,0,0,1-3.85,6.47A24.33,24.33,0,0,1,188,100a62.46,62.46,0,0,1-13,1.7q-6.53.37-13.06,0.66h-0.56" transform="translate(-21.81 -70.55)" fill="none" stroke="#eda022" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.82" fill-rule="evenodd"/><path d="M160.17,103.52a38.22,38.22,0,0,1-4.65,5.74,27.21,27.21,0,0,1-11.78,7.31,18.22,18.22,0,0,1-13.16-1.13c-5.55-2.8-9.81-9-11-16" transform="translate(-21.81 -70.55)" fill="none" stroke="#eda022" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.82" fill-rule="evenodd"/><path d="M161,102.18q2.09,2.5,4.28,4.86c3.11,3.35,6.44,6.53,10.29,8.53s8.31,2.74,12.28,1.12a13.81,13.81,0,0,0,6.53-5.82,18,18,0,0,0,2.41-9.26" transform="translate(-21.81 -70.55)" fill="none" stroke="#eda022" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.82" fill-rule="evenodd"/><path d="M160.85,102.09A51.51,51.51,0,0,0,147.57,79.3a23.61,23.61,0,0,0-8.47-5.66,11.31,11.31,0,0,0-9.54.72,12,12,0,0,0-5.39,8.39,14.79,14.79,0,0,0,1.64,9,16.2,16.2,0,0,0,5.91,6.16c4.72,2.86,10.21,3.21,15.51,3.49l13.06,0.66h0.56" transform="translate(-21.81 -70.55)" fill="none" stroke="#eda022" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.82" fill-rule="evenodd"/></g><g id="middle-left"><rect x="30.28" y="110.33" width="54.45" height="78.04" fill="#f24366"/><rect x="27.56" y="103.02" width="59.89" height="19.06" fill="#d63b5a"/><line x1="57.11" y1="187.61" x2="57.55" y2="102.11" fill="none" stroke="#ab80c7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.46"/><path d="M79.48,171.92a22,22,0,0,1,15.35-22.42,12.91,12.91,0,0,1,6-.61,7.94,7.94,0,0,1,2.82,1,6.33,6.33,0,0,1,2.13,2.1,6.94,6.94,0,0,1,.87,4.27,11.66,11.66,0,0,1-1.36,4.19,20,20,0,0,1-6.81,7.36A26.23,26.23,0,0,1,89,171.53a31.12,31.12,0,0,1-9.17.39H79.48" transform="translate(-21.81 -70.55)" fill="none" stroke="#ab80c7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.28" fill-rule="evenodd"/><path d="M78.67,172.59Q77,174.24,75.4,176c-1.23,1.36-2.43,2.76-3.77,4a14.53,14.53,0,0,1-4.56,3,8.21,8.21,0,0,1-5.39.31A6.14,6.14,0,0,1,59.33,182a5.28,5.28,0,0,1-1.44-2.31,4.9,4.9,0,0,1,7.58-5.37" transform="translate(-21.81 -70.55)" fill="none" stroke="#ab80c7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.28" fill-rule="evenodd"/><path d="M79.25,171.79a33.08,33.08,0,0,1,3,2.88c1.71,1.86,3.21,3.91,4.95,5.75a15.26,15.26,0,0,0,6.18,4.26,8.81,8.81,0,0,0,3.74.4,6.89,6.89,0,0,0,3.47-1.41,5.67,5.67,0,0,0,2-3.13,4.82,4.82,0,0,0-.61-3.64,4.42,4.42,0,0,0-6.34-1.16" transform="translate(-21.81 -70.55)" fill="none" stroke="#ab80c7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.28" fill-rule="evenodd"/><path d="M79.15,171.74A22,22,0,0,0,63.8,149.32a12.91,12.91,0,0,0-6-.61,7.94,7.94,0,0,0-2.82,1,6.33,6.33,0,0,0-2.13,2.1,6.94,6.94,0,0,0-.87,4.27,11.66,11.66,0,0,0,1.36,4.19,20,20,0,0,0,6.81,7.36,26.23,26.23,0,0,0,9.38,3.69,31.12,31.12,0,0,0,9.17.39h0.39" transform="translate(-21.81 -70.55)" fill="none" stroke="#ab80c7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.28" fill-rule="evenodd"/></g>
  <g id="middle-middle">
    <rect id="box" x="91.8" y="110.81" width="74.33" height="85.28" fill="#a2bd3e"/>
    <line id="tie" x1="129.7" y1="195.78" x2="129.34" y2="103.57" fill="none" stroke="#cc3126" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/>
    <g id="lid">
      <rect x="88.19" y="102.33" width="80.87" height="16.08" fill="#4f7e38"/>
      <path d="M151.29,173.22a27,27,0,0,1,18.84-27.51,15.84,15.84,0,0,1,7.3-.75,9.74,9.74,0,0,1,3.46,1.26,7.77,7.77,0,0,1,2.61,2.58,8.52,8.52,0,0,1,1.06,5.24,14.31,14.31,0,0,1-1.66,5.15,24.5,24.5,0,0,1-8.36,9A32.19,32.19,0,0,1,163,172.73a38.19,38.19,0,0,1-11.26.48h-0.48" transform="translate(-21.81 -70.55)" fill="none" stroke="#cc3126" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/><path d="M150.35,173.18a25,25,0,0,0-9-22.23,13.15,13.15,0,0,0-3.6-2.2,6.79,6.79,0,0,0-4.15-.3,5.92,5.92,0,0,0-2.89,1.86,7.11,7.11,0,0,0-1.52,3.09,10.29,10.29,0,0,0,1.06,6.75c1.82,3.65,5.1,6.36,8.61,8.43a40.68,40.68,0,0,0,11.5,4.6" transform="translate(-21.81 -70.55)" fill="none" stroke="#cc3126" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/><path d="M150.29,174a7.72,7.72,0,0,1-4,4.17,11.43,11.43,0,0,1-5.88.65c-2-.22-3.93-0.71-5.91-1a12,12,0,0,0-5.9.51,6.76,6.76,0,0,0-2.46,1.66,5.25,5.25,0,0,0-1.34,2.63,4.69,4.69,0,1,0,9.3,1.12" transform="translate(-21.81 -70.55)" fill="none" stroke="#cc3126" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/><path d="M151,173.06q1.92,1.69,3.69,3.53c1.92,2,3.7,4.13,5.73,6a18.71,18.71,0,0,0,7,4.37,11.29,11.29,0,0,0,4.1.52,9,9,0,0,0,3.94-1.18,7.42,7.42,0,0,0,2.84-3,6.34,6.34,0,0,0,.62-4,5.86,5.86,0,0,0-9.14-3.69" transform="translate(-21.81 -70.55)" fill="none" stroke="#cc3126" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/>
    </g>
  </g>
  <g id="bottom-center"><rect x="92.28" y="207.22" width="89.67" height="67.13" fill="#e72927"/><rect x="87.66" y="196.01" width="98.92" height="16.08" fill="#c82421"/><line x1="136.48" y1="274.51" x2="136.9" y2="195.45" fill="none" stroke="#457b7b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/><path d="M158.7,266.86a28.55,28.55,0,0,1,24.93-26.55,19.76,19.76,0,0,1,8,.46,12.26,12.26,0,0,1,6.54,4.39,10.22,10.22,0,0,1,1.94,5.91,10.1,10.1,0,0,1-1.9,5.92,12.56,12.56,0,0,1-6.81,4.49,24.84,24.84,0,0,1-8.24.67c-5.53-.32-11.19-1.57-16.53-0.1a16.86,16.86,0,0,0-7.89,4.81h0" transform="translate(-21.81 -70.55)" fill="none" stroke="#457b7b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/><path d="M158.14,266a30,30,0,0,0-14.63-20.31,21,21,0,0,0-9.63-2.89,13.32,13.32,0,0,0-9.35,3.27,10.11,10.11,0,0,0-3,5,8.49,8.49,0,0,0,.6,5.75A9.51,9.51,0,0,0,127,261.1a16.29,16.29,0,0,0,6.47,1.15c4.41,0,8.79-1.18,13.19-.89a20.2,20.2,0,0,1,11.5,4.6" transform="translate(-21.81 -70.55)" fill="none" stroke="#457b7b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/><path d="M157.86,265.91a20.72,20.72,0,0,1-4,4.17,23.65,23.65,0,0,1-10.25,4.5,32.58,32.58,0,0,1-11.25,0,40.15,40.15,0,0,1-4.33-1" transform="translate(-21.81 -70.55)" fill="none" stroke="#457b7b" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/><path d="M158.34,266.07A18.42,18.42,0,0,0,162,269.6a22.84,22.84,0,0,0,11.76,4,42.75,42.75,0,0,0,12.46-1.24q3.24-.74,6.42-1.76" transform="translate(-21.81 -70.55)" fill="none" stroke="" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/></g>
  <g id="middle-right"><rect x="175.26" y="115.36" width="68.66" height="53.9" fill="#fccc4e"/><rect x="171.74" y="108.94" width="75.72" height="18.61" fill="#fcbc4e"/><line x1="209.78" y1="169.33" x2="209.41" y2="108.88" fill="none" stroke="#9964b2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/><path d="M231.62,179.17a27,27,0,0,1,18.84-27.51,15.84,15.84,0,0,1,7.3-.75,9.74,9.74,0,0,1,3.46,1.26,7.77,7.77,0,0,1,2.61,2.58,8.52,8.52,0,0,1,1.06,5.24,14.31,14.31,0,0,1-1.66,5.15,24.5,24.5,0,0,1-8.36,9,32.19,32.19,0,0,1-11.51,4.53,38.19,38.19,0,0,1-11.26.48h-0.48" transform="translate(-21.81 -70.55)" fill="none" stroke="#9964b2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/><path d="M230.68,179.13a25,25,0,0,0-9-22.23,13.15,13.15,0,0,0-3.6-2.2,6.79,6.79,0,0,0-4.15-.3,5.92,5.92,0,0,0-2.89,1.86,7.11,7.11,0,0,0-1.52,3.09,10.29,10.29,0,0,0,1.06,6.75c1.82,3.65,5.1,6.36,8.61,8.43a40.68,40.68,0,0,0,11.5,4.6" transform="translate(-21.81 -70.55)" fill="none" stroke="#9964b2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/><path d="M230.62,180a7.72,7.72,0,0,1-4,4.17,11.43,11.43,0,0,1-5.88.65c-2-.22-3.93-0.71-5.91-1a12,12,0,0,0-5.9.51,6.76,6.76,0,0,0-2.46,1.66,5.25,5.25,0,0,0-1.34,2.63,4.69,4.69,0,1,0,9.3,1.12" transform="translate(-21.81 -70.55)" fill="none" stroke="#9964b2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/><path d="M231.33,179q1.92,1.69,3.69,3.53c1.92,2,3.7,4.13,5.73,6a18.71,18.71,0,0,0,7,4.37,11.29,11.29,0,0,0,4.1.52,9,9,0,0,0,3.94-1.18,7.42,7.42,0,0,0,2.84-3,6.34,6.34,0,0,0,.62-4,5.86,5.86,0,0,0-9.14-3.69" transform="translate(-21.81 -70.55)" fill="none" stroke="#9964b2" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/></g><g id="bottom-left"><rect x="4.05" y="199.44" width="75.5" height="74.98" fill="#6f98cb"/><rect y="188.34" width="82.52" height="21.75" fill="#6489b8"/><line x1="41.64" y1="274.58" x2="41.62" y2="187.79" fill="none" stroke="#c0c643" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.56"/><path d="M63.51,258a28.71,28.71,0,0,1,6-17.53,23.59,23.59,0,0,1,14.94-8.76,14.68,14.68,0,0,1,6.77.47,10,10,0,0,1,5.44,4.33,11.2,11.2,0,0,1,1.43,5.83,15,15,0,0,1-1.39,5.88,19,19,0,0,1-10.06,9.48,29.81,29.81,0,0,1-13.29,1.88A49.6,49.6,0,0,1,63.51,258h0" transform="translate(-21.81 -70.55)" fill="none" stroke="#c0c643" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.36" fill-rule="evenodd"/><path d="M62.85,257.52a29.66,29.66,0,0,0-12.32-20.1,16,16,0,0,0-8.14-3,10.25,10.25,0,0,0-4.25.73,9.18,9.18,0,0,0-3.58,2.62,10.74,10.74,0,0,0-2.23,5,14,14,0,0,0,.22,5.61A16.41,16.41,0,0,0,39,257.88a19.11,19.11,0,0,0,10.38,3.34,23.68,23.68,0,0,0,13.47-3.7" transform="translate(-21.81 -70.55)" fill="none" stroke="#c0c643" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.36" fill-rule="evenodd"/><path d="M62.71,258.25a17.1,17.1,0,0,1-3.92,7.15,14.9,14.9,0,0,1-8.05,4.51,14.66,14.66,0,0,1-9-1.18,16.28,16.28,0,0,1-4.19-2.86" transform="translate(-21.81 -70.55)" fill="none" stroke="#c0c643" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.36" fill-rule="evenodd"/><path d="M63,257.63a42.46,42.46,0,0,0,3.11,3.49A26.83,26.83,0,0,0,74.39,267a14.88,14.88,0,0,0,9.7.92,13.78,13.78,0,0,0,7.83-5.88" transform="translate(-21.81 -70.55)" fill="none" stroke="#c0c643" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.36" fill-rule="evenodd"/></g><g id="bottom-right"><rect x="194.62" y="181.58" width="69.42" height="93.47" fill="#9f6daa"/><rect x="191.67" y="169.33" width="75.32" height="21.78" fill="#8c6095"/><line x1="230.03" y1="274.51" x2="230.57" y2="169.59" fill="none" stroke="#cc9c26" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/><path d="M252.53,239.24a27,27,0,0,1,18.84-27.51,15.84,15.84,0,0,1,7.3-.75,9.74,9.74,0,0,1,3.46,1.26,7.77,7.77,0,0,1,2.61,2.58A8.52,8.52,0,0,1,285.8,220a14.31,14.31,0,0,1-1.66,5.15,24.5,24.5,0,0,1-8.36,9,32.19,32.19,0,0,1-11.51,4.53,38.19,38.19,0,0,1-11.26.48h-0.48" transform="translate(-21.81 -70.55)" fill="none" stroke="#cc9c26" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/><path d="M251.53,240q-2.06,2-4,4.17c-1.51,1.67-3,3.38-4.62,4.92a17.83,17.83,0,0,1-5.6,3.71,10.07,10.07,0,0,1-6.61.38,7.54,7.54,0,0,1-2.9-1.68,6.48,6.48,0,0,1-1.77-2.83,6,6,0,0,1,9.3-6.59" transform="translate(-21.81 -70.55)" fill="none" stroke="#cc9c26" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/><path d="M252.24,239.07a40.6,40.6,0,0,1,3.69,3.53c2.1,2.28,3.94,4.8,6.07,7.05a18.73,18.73,0,0,0,7.58,5.22,10.81,10.81,0,0,0,4.59.49,8.46,8.46,0,0,0,4.26-1.73,7,7,0,0,0,2.47-3.84,5.91,5.91,0,0,0-.74-4.47,5.43,5.43,0,0,0-7.78-1.42" transform="translate(-21.81 -70.55)" fill="none" stroke="#cc9c26" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/><path d="M252.12,239a27,27,0,0,0-18.84-27.51,15.84,15.84,0,0,0-7.3-.75,9.74,9.74,0,0,0-3.46,1.26,7.77,7.77,0,0,0-2.61,2.58,8.52,8.52,0,0,0-1.06,5.24,14.31,14.31,0,0,0,1.66,5.15,24.5,24.5,0,0,0,8.36,9,32.19,32.19,0,0,0,11.51,4.53,38.19,38.19,0,0,0,11.26.48h0.48" transform="translate(-21.81 -70.55)" fill="none" stroke="#cc9c26" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.57" fill-rule="evenodd"/></g></svg>
              
            
!

CSS

              
                @font-face{font-family:"Telefon Black";src:url(//s.codepen.io/assets/telefon/black/3f32b1c9-8e26-465e-ae02-ff82a378b670-3.woff) format("woff"),url(//codepen.io/assets/telefon/black/3f32b1c9-8e26-465e-ae02-ff82a378b670-3.woff2) format("woff2")}

body {
  background: #3C2A42;
  color: white;
  font-family: "Lato", "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
  padding: 20px;
  text-align: center;
  font-size: 16px;
}

h1 {
  font-family: "Telefon Black";
  font-size: 6vmin;
  text-shadow: 
    1px 1px 0 #3C2A42,
    2px 2px 0 #3C2A42,
    3px 3px 0 #3C2A42;
}

a {
  color: inherit;
}

button, .button {
  font-family: "Telefon Black";
  background: white;
  color: #3C2A42;
  padding: 15px 25px;
  border-radius: 50px;
  border: 0;
  text-decoration: none;
  font-size: 26px;
  box-shadow: 
    1px 1px 0 #3C2A42,
    2px 2px 0 #3C2A42,
    3px 3px 0 #3C2A42;
}

#reveal-gift {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  opacity: 0;
  p {
    max-width: 500px;
    padding: 20px;
    margin: 0 auto;
    background: lighten(#3C2A42, 20%);
  }
}

#all-presents {
  z-index: -1;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
              
            
!

JS

              
                var tl = new TimelineMax({
  paused: true
}),
  topTopp = $("#top"),
  midLeft = $("#middle-left"),
  midMidd = $("#middle-middle"),
  midRigh = $("#middle-right"),
  botLeft = $("#bottom-left"),
  botMidd = $("#bottom-center"),
  botRigh = $("#bottom-right"),
  box     = $("#box"),
  tie     = $("#tie"),
  lid     = $("#lid"),
  dl      = $("#reveal-gift");

tl
  .to(midLeft, 0.25, { x: -500 })
  .to(botRigh, 0.25, { x:  500 })
  .to(botLeft, 0.25, { x: -500 })
  .to(midRigh, 0.25, { x:  500 })
  .to(topTopp, 0.25, { x:  500, y: 50 })
  .to(botMidd, 0.25, { x: -500, y: -50 })
  .to(midMidd, 0.25, { scale: 2, transformOrigin: "50% 50%" })
  .to(tie, 0.25, { opacity: 0 })
  .to(lid, 0.25, { rotate: -5, transformOrigin: "0 0", onComplete: done })
  .to(lid, 1.25, { x: 500, opacity: 0 })
  .to(box, 0.5, { y: 100 }, "-=1.25")
  .to(dl, 1, { y: -200, opacity: 1, scale: 1 });

$("#gimme").on("click", function() {
  tl.play();
  $(this).remove();
});

function done() {
  $("h1").text("It's an OS X screensaver!");
}
              
            
!
999px

Console