Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <input id="trigger" class="toggle-checkbox" type="checkbox"><label for="trigger">Action!</label>

<div class="spotlights">
<div id="1" class="spotlight"></div>
<div id="2" class="spotlight"></div>
<div id="3" class="spotlight"></div>
<div id="4" class="spotlight"></div>
</div>
<div class="z"><svg fill-rule="evenodd" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 225 374"><g transform="translate(-888 -1246) scale(.96376)"><path id="hair" fill="#493222" fill-rule="nonzero" d="M157 37h9v23H80V37h10V27h67v10z" transform="translate(908 1265) scale(1.0376)"/><path fill="#9cd3b3" fill-rule="nonzero" d="M921 1503h40v30h10v10h14v30h-34v-10h-20v-10h-10v-50zM1154 1553h-10v10h-20v10h-34v-30h14v-10h10v-30h40v50z"/><path d="M1114 1434v10h10-163v-10h153zM940 1454h194v10H940zM1144 1474h10v9H921v-9h223zM971 1493v1h-10v9h-40v-10h50zM992 1494h89v10h-89zM1104 1493h50v10h-40v-9h-10v-1zM992 1514h89v10h-89zM992 1534h89v10h-89z"/><path fill="#e2e2e2" d="M940 1453h11v-9h173v10h10-194v-1zM931 1464h213v10H931v-10zM991 1484h-20v9h-50v-10h233v10h-50v-9h-23v9h-90v-9zM991 1504h89v10h-89zM991 1523h89v10h-89z"/><path fill="#91c1a3" fill-rule="nonzero" d="M1011 1411h51v33h-51z"/><path fill="#9cd3b3" fill-rule="nonzero" d="M1071 1323h10v20h20v30h-10v31h-10v10h-10v9h-20v11h-30v-11h-20v-9h-10v-10h-10v-31h-10v-30h20v20-40h10v-10h70v10z"/><path fill="#493222" fill-rule="nonzero" d="M981 1323h10v40h-10zM1081 1323h10v40h-10z"/><path fill="#758b7c" fill-rule="nonzero" d="M1018 1397h12v10h-12z"/><path fill="#070a0d" fill-rule="nonzero" d="M991 1545h90l-1 96h25v39h-64v-95h-10v95h-65v-39h25v-96z"/><path fill="#070a0d" d="M1050 1325v1-1 2h13v2h11v2h8v2h9v1h4v22h-5l1 3-6 1v3h-5v3h-89v-3h-5v-3l-5-1v-3h-4v-22h4v-1h8v-2h8v-2h11v-2h14v-2 1-1h28z"/><path fill="#fbeb8e" fill-rule="nonzero" stroke="#0f141c" stroke-width="2.2" d="M99 36h9v9h-9z" transform="matrix(3.34422 0 0 3.3563 710 1212)"/><path fill="#fbeb8e" fill-rule="nonzero" stroke="#0f141c" stroke-width="2.2" d="M63 36h9v9h-9z" transform="matrix(3.34422 0 0 3.3563 790 1212)"/><path fill="#444445" fill-rule="nonzero" d="M1005 1351h8v9h-8zM1059 1337h8v8h-8z"/><path fill="#91c1a3" fill-rule="nonzero" d="M1031 1353h10v30h-10z"/><path fill="#e2e2e2" d="M992 1546h89v10h-89z"/></g></svg></div>

<div class="note">* Note: Works best in Safari (That surprised me too)</div>

<div class="logo"><a href="https://undead.institute" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1804713/UndeadInsti-LogoOnWhite.png" alt="Getting Braaains should be fun"></a></div>
              
            
!

CSS

              
                .toggle-checkbox:checked ~ .spotlights { 
  animation: 10s ease-in-out 0s movespotlight forwards;
}

@keyframes movespotlight {
  0% {
    left: 5vw;
    top: 10vw;
  }
  25%, 30% {
    left: 85vw;
    top: 30vw;
  }
  60%, 65% {
    left: 2vw;
    top: 20vw;
  }
  93% {
    left: 53vw;
    top: 7vw;
  }
  100% {
    left: 44vw;
    top: 3vw;
  }
}
.spotlights{
  position: relative;
  top: 10vw;
  left: 5vw;
  z-index: 100;
}
.spotlight {
  width: 11vw;
  height: 11vw;
  background-image: url("https://assets.codepen.io/1804713/spotlight.svg");
  mix-blend-mode: overlay;
  position: absolute;
  top: 0;
  left: 0;
}
.z {
  width: 10vw;
  margin: 5vw auto 0;
  mix-blend-mode: multiply;
}

body {
  background-color: mistyrose;
  background-color: #111;
  overflow: hidden;
}

.logo {
  width: 100%;
  max-width: 400px;
  position: absolute;
  top: 0;
  right: 0;
}
.logo img {
  width: 100%;
}
input{
  display: none;
}
input:checked + label {
  box-shadow: inset 3px 3px 2px #660000;
  transform: translate(3px, 3px);
}
label {
  font-size: 1.5em;
  color: #FFF;
  background-color: #960B0B;
  width: 140px;
  height: 30px;
  text-align: center;
  font-weight: bold;
  display: block;
  border-radius: 7px;
  box-shadow: 3px 3px 0 #660000;
  cursor: pointer;
  position: relative;
  z-index: 1000;
}
.note {
  color: #FFF;
  font-style: italic;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 1vh;
}
              
            
!

JS

              
                
              
            
!
999px

Console