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="z"> 
  <svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 250 404">
  <g transform="matrix(.7436 0 0 .7436 -63 -5)">
    <path id="rtleg" fill="#9f1e96" fill-rule="nonzero" d="M116 315v9h-4v11h-3v3h-5v6h-3v6h-3v6h-4v13H57v-19h3v-5h2v-5h3v-5h4v-6h4v-11h4v-3h39z" />
    <path id="ltleg" fill="#9f1e96" fill-rule="nonzero" d="M171 315v11h3v36h-39v-27h-2v-20h38z"/>
    <path id="pants" fill="#9f1e96" fill-rule="nonzero" d="M133 315H77l-1-26h94l1 26h-38z" transform="translate(85 14) scale(1.34483)"/>
    <path id="belt" fill="#7c1877" fill-rule="nonzero" d="M54 234h9v9h-9z" transform="matrix(13.1293 0 0 1.46262 -518 53)"/>
    <path id="ltshoe" fill="#5c1258" fill-rule="nonzero" d="M135 356h39v6h25v38h-64v-44z" transform="translate(85 11) scale(1.34483)"/>
    <path fill="#91c1a3" fill-rule="nonzero" d="M283 251h15v144h-90l-1-144h10v-27h66v27z"/>
    <path fill="#6d917b" d="M248 381h5v4h-5z"/>
    <path fill="#6d917b" fill-rule="nonzero" d="M247 269h1v1h-1zM246 270h1v1h-1zM247 268h1v1h-1zM250 268h1v1h-1zM249 269h1v1h-1zM248 267h1v1h-1zM250 267v1h-1v-1zM255 273h-1v1h1zM256 274h-1v1h1zM255 272h-1v1h1zM252 272h-1v1h1zM253 273h-1v1h1zM254 271h-1v1h1zM252 271v1h1v-1zM258 269h1v1h-1zM257 270h1v1h-1zM258 268h1v1h-1zM261 268h1v1h-1zM260 269h1v1h-1zM259 267h1v1h-1zM261 267v1h-1v-1zM245 265h-1v1h1zM246 266h-1v1h1zM245 264h-1v1h1zM242 264h-1v1h1zM243 265h-1v1h1zM244 263h-1v1h1zM242 263v1h1v-1zM258 258h-1v1h1zM259 259h-1v1h1zM258 257h-1v1h1zM255 257h-1v1h1zM256 258h-1v1h1zM257 256h-1v1h1zM255 256v1h1v-1zM240 259h-1v1h1zM241 260h-1v1h1zM240 258h-1v1h1zM237 258h-1v1h1zM238 259h-1v1h1zM239 257h-1v1h1zM237 257v1h1v-1zM237 264h-1v1h1zM238 265h-1v1h1zM237 263h-1v1h1zM234 263h-1v1h1zM235 264h-1v1h1zM236 262h-1v1h1zM234 262v1h1v-1zM246 275h-1v1h1zM247 276h-1v1h1zM246 274h-1v1h1zM243 274h-1v1h1zM244 275h-1v1h1zM245 273h-1v1h1zM243 273v1h1v-1zM255 266h1v1h-1zM254 267h1v1h-1zM255 265h1v1h-1zM258 265h1v1h-1zM257 266h1v1h-1zM256 264h1v1h-1zM258 263v2h-1v-2zM238 270h1v1h-1zM237 271h1v1h-1zM238 269h1v1h-1zM241 269h2v1h-2zM240 270h1v1h-1zM239 268h1v1h-1zM241 268v1h-1v-1zM233 275h1v1h-1zM232 276h1v1h-1zM233 274h1v1h-1zM236 274h1v1h-1zM235 275h1v1h-1zM234 273h1v1h-1zM236 273v1h-1v-1zM250 264h1v1h-1zM249 265h1v1h-1zM250 263h1v1h-1zM253 263h1v1h-1zM252 264h1v1h-1zM251 261h1v2h-1zM253 261v2h-1v-2zM244 255h1v1h-1zM243 256h1v1h-1zM244 254h1v1h-1zM247 254h1v1h-1zM246 255h1v1h-1zM245 253h1v1h-1zM247 253v1h-1v-1zM247 260h-1v1h1zM248 261h-1v1h1zM247 259h-1v1h1zM244 259h-1v1h1zM245 260h-1v1h1zM246 258h-1v1h1zM244 258v1h1v-1zM240 295h1v1h-1zM239 296h1v1h-1zM240 294h1v1h-1zM243 294h1v1h-1zM242 295h1v1h-1zM241 293h1v1h-1zM243 293v1h-1v-1zM248 299h-1v1h1zM249 300h-1v1h1zM248 298h-1v1h1zM245 298h-1v1h1zM246 299h-1v1h1zM247 297h-1v1h1zM245 297v1h1v-1zM251 295h1v1h-1zM250 296h1v1h-1zM251 294h1v1h-1zM254 294h1v1h-1zM253 295h1v1h-1zM252 293h1v1h-1zM254 293v1h-1v-1zM254 301h-1v1h1zM255 302h-1v1h1zM254 300h-1v1h1zM251 300h-1v1h1zM252 301h-1v1h1zM253 299h-1v1h1zM251 299v1h1v-1zM251 284h-1v1h1zM253 285h-2v1h2zM251 283h-1v1h1zM248 283h-1v1h1zM249 284h-1v1h1zM250 282h-1v1h1zM248 282v1h1v-1zM256 280h-1v1h1zM257 281h-1v1h1zM256 279h-1v1h1zM253 279h-1v1h1zM254 280h-1v1h1zM255 278h-1v1h1zM253 278v1h1v-1zM248 292h1v1h-1zM247 293h1v1h-1zM248 291h1v1h-1zM251 291h1v1h-1zM250 292h1v1h-1zM249 289h1v2h-1zM251 289v2h-1v-2zM256 289h1v1h-1zM255 290h1v1h-1zM256 288h1v1h-1zM259 288h1v1h-1zM258 289h1v1h-1zM257 287h1v1h-1zM259 287v1h-1v-1zM243 290h1v1h-1zM242 291h1v1h-1zM243 289h1v1h-1zM246 289h1v1h-1zM245 290h1v1h-1zM244 287h1v2h-1zM246 287v2h-1v-2zM237 281h1v1h-1zM236 282h1v1h-1zM237 280h1v1h-1zM241 280h1v1h-1zM239 281h2v1h-2zM238 279h1v1h-1zM241 279v1h-2v-1zM248 310h-1v1h1zM250 311h-2v1h2zM248 309h-1v1h1zM245 309h-1v1h1zM246 310h-1v1h1zM247 308h-1v1h1zM245 308v1h1v-1zM253 306h-1v1h1zM254 307h-1v1h1zM253 305h-1v1h1zM250 305h-1v1h1zM251 306h-1v1h1zM252 304h-1v1h1zM250 304v1h1v-1z"/>
      <path id="leisure-side-rt" fill="#b723ad" fill-rule="nonzero" d="M118 296H79V177h6v-6h10l23 62v63z" transform="translate(85 7) scale(1.34483)"/>
      <path id="leisure-btm-rt" fill="#b52dab" d="M123 245v22h-1v23h-10v19H93v8H57v-19h5v-19h7v-18h6v-16h48z"/>
    <path id="rightarm" fill="#b723ad" fill-rule="nonzero" d="M85 213H71v5H61v8h-6v9h-3v10h-4v11h-3v18h-2v14H13v-32h3v-14h3v-18h4v-11h3v-14h6v-8h10v-10h10v-10h33v42z"/>
    <path id="rthand" fill="#9cd3b3" fill-rule="nonzero" d="M25 307L0 297l11-28 36 15-1 3 4 21-9 2-2-7-12 30-11-5 9-21z"/>
    <g id="leisure-frnt-rt">
      <path fill="#c431ba" d="M123 245v12h-9v-4h-5v-9h-2v-10h-5v-14h-6v-9h-6v-12H77v-7H66v-16h9v-14h27v14h5v12h5v13h6v14h3v11h1v19h1z" transform="translate(85 11) scale(1.34483)"/>
    </g>
    <g id="rtshoe">
      <path fill="#5c1258" fill-rule="nonzero" d="M52 360v-6h9v5h33v10h-5v8h-5v16h-5v7H22v-38h22v-2h8z" transform="translate(85 11) scale(1.34483)"/>
    </g>
    <g id="leisure-side-lt">
      <path fill="#b723ad" fill-rule="nonzero" d="M151 171h10v6h6v119h-32v-74l16-51z" transform="translate(85 7) scale(1.34483)"/>
    </g>
      <path id="leisure-btm-lft" fill="#b52dab" d="M124 245l15-16h31v32h2v9h6v37h-17v5h-33v-37h-4v-30z"/>
    <g id="leisure-frnt-left">
      <path fill="#c431ba" d="M123 251v-33h1v-11h4v-14h3v-12h11v-13h28v4h5v20h-5v3h-4v4h-7v5h-4v12h-6v10h-11v14h-4v11h-11z" transform="translate(85 11) scale(1.34483)"/>
    </g>
    <g id="head">
      <path id="hair" fill="#4f2e13" d="M177 103H69l-9-20V69h-9V27h9V15h12V7h15V-3h73V7h16v8h11v12h9v42h-9v14l-10 20z" transform="translate(85 11) scale(1.34483)"/>
      <path fill="#9cd3b3" fill-rule="nonzero" d="M177 99V80h10v30h-11v29h-9v9h-9v10h-20v10h-30v-10H89v-10H79v-9H69v-29H59V80h10v19h10V60h10v-9h69v9h9v39h10z" transform="translate(85 11) scale(1.34483)"/>
      <path fill="#fbeb8e" fill-rule="nonzero" d="M99 36h9v9h-9z" transform="matrix(4.90707 0 0 4.46262 -229 -55)"/>
      <path fill="#fbeb8e" fill-rule="nonzero" d="M63 36h9v9h-9z" transform="matrix(4.35151 0 0 4.46262 -70 -55)"/>
      <path id="mouth" fill="#758b7c" fill-rule="nonzero" d="M81 90h9v9h-9z" transform="matrix(1.91188 0 0 1.46262 107 53)"/>
      <path fill="#91c1a3" fill-rule="nonzero" d="M90 54h9v9h-9z" transform="matrix(1.46262 0 0 4.35151 112 -103)"/>
      <path id="righteye" fill="#444445" fill-rule="nonzero" d="M63 45h9v9h-9z" transform="translate(125 40) scale(1.46262)"/>
      <path id="lefteye" fill="#444445" fill-rule="nonzero" d="M108 36h9v9h-9z" transform="translate(130 64) scale(1.46262)"/>
    </g>
      <path id="ltbicep" fill="#b723ad" fill-rule="nonzero" d="M230 146v12h-8v12h-10v9h-10v10h-9v10h-16v6h-12v-10h4v-5h5v-17h-5v-5h-5v-8h10v-8h10v-8h9v-9h12v5h15v6h10z"/>
    <path id="ltfore" fill="#b723ad" d="M219 150h15v-18h3v-16h3V84h-29v16h-4v17h-2v12h-4v14h18v7z"/>
    <path id="lefthand2" fill="#9cd3b3" fill-rule="nonzero" d="M212 57l37 11-7 28-38-10 2-23h5l1-6z"/>
     <path id="leftindex" fill="#9cd3b3" fill-rule="nonzero" d="M212 57l6-22 12 3-6 22-12-3z"/>
    <path id="lefthand" fill="#9cd3b3" fill-rule="nonzero" d="M212 57l37 11-7 28-38-10 2-23h5l1-6z"/>
  </g>
</svg>

</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

              
                :root {
  --dance-move-duration: 1.5s;
}

.z {
  max-width: 200px;
  margin: auto;
  transform-origin: center center;
}

.toggle-checkbox:checked ~ .z #rightarm{ 
  animation: var(--dance-move-duration) ease-in-out 0s rightarm forwards infinite;
}
@keyframes rightarm {
  0%, 100% {
    transform: translate(130px, 17px) scale(1.35);
  }
  50% {
    transform: translate(120px, 17px) scale(1.35) rotate(-7deg);
  }
}
#rightarm {
  transform: translate(130px, 17px) scale(1.35);
  transform-origin: 50% 10%;  
}

.toggle-checkbox:checked ~ .z #rthand{ 
  animation: var(--dance-move-duration) ease-in-out 0s righthand forwards infinite;
}
@keyframes righthand {
  0%, 100% {
    transform: translate(130px, 17px) scale(1.35);
  }
  50% {
    transform: translate(120px, 17px) scale(1.35) rotate(-7deg);
  }
}
#rthand {
  transform: translate(130px, 17px) scale(1.35);
  transform-origin: 50% 10%; 
}

.toggle-checkbox:checked ~ .z #leftindex{ 
  animation: var(--dance-move-duration) ease-in-out 0s ltindex forwards infinite;
}
@keyframes ltindex {
  0%, 100% {
    transform: translate(128px, 29px) scale(1.35);
  }
  50% {
  transform: translate(-45px, 340px) scale(1.35);
  }
}
#leftindex {
  transform: translate(128px, 29px) scale(1.35);
  transform-origin: 50% 10%; 
}

.toggle-checkbox:checked ~ .z #lefthand{ 
  animation: var(--dance-move-duration) ease-in-out 0s lthand forwards infinite;
}
@keyframes lthand {
  0%, 100% {
    transform: translate(128px, 28px) scale(1.35) rotateX(0deg) rotateZ(0deg);
  }
  50% {
    transform: translate(-40px, 340px) scale(1.35) rotateX(180deg) rotateZ(-12deg);
  }
}
.toggle-checkbox:checked ~ .z #lefthand2{ 
  animation: var(--dance-move-duration) ease-in-out 0s lthand2 forwards infinite;
}
@keyframes lthand2 {
  0%, 100% {
    transform: translate(128px, 28px) scale(1.35) rotateZ(0deg);
  }
  50% {
    transform: translate(-2px, 300px) scale(1) rotateZ(-20deg);
  }
}
#lefthand{
  transform: translate(128px, 28px) scale(1.35);
  transform-origin: 50% 10%; 
}
#lefthand2 {
  transform: translate(128px, 28px) scale(1.35);
  transform-origin: 50% 10%; 
}

.toggle-checkbox:checked ~ .z #ltfore{ 
  animation: var(--dance-move-duration) ease-in-out 0s ltforearm forwards infinite;
}
@keyframes ltforearm {
  0%, 100% {
    transform: translate(126px, 22px) scale(1.35) rotateX(0deg) rotateZ(0deg) rotateY(0);
  }
  50% {
  transform: translate(-40px, 285px) scale(1.35) rotateX(180deg) rotateZ(-35deg) rotateY(20deg);
  }
}
#ltfore {
  transform: translate(126px, 22px) scale(1.35) rotateX(0deg) rotateZ(0deg);
  transform-origin: 50% 10%; 
}
.toggle-checkbox:checked ~ .z #ltbicep{ 
  animation: var(--dance-move-duration) ease-in-out 0s ltbicep forwards infinite;
}
@keyframes ltbicep {
  0%, 10%, 90%, 100% {
    transform: translate(126px, 25px) scale(1.35) rotateX(0deg) rotateZ(0deg);
  }
  25%, 75% {
  transform: translate(45px, 65px) scale(1.35) rotateX(0deg) rotateZ(-20deg);
  }
  50% {
  transform: translate(35px, 75px) scale(1.35) rotateX(12deg) rotateZ(-10deg);
  }
}
#ltbicep {
  transform: translate(126px, 25px) scale(1.35) rotateX(0deg) rotateZ(0deg);
  transform-origin: 50% 10%; 
}
.toggle-checkbox:checked ~ .z #head{ 
  animation: var(--dance-move-duration) ease-in-out 0s head forwards infinite;
}
@keyframes head {
  0%, 100% {
    transform: translate(0px, 2px);
  }
  50% {
    transform: translate(-10px, 2px);
  }
}
#head {
  transform-origin: 50% 10%; 
}

.toggle-checkbox:checked ~ .z #leisure-btm-rt, .toggle-checkbox:checked ~ .z #leisure-btm-lft {
  animation: var(--dance-move-duration) ease-in-out 0s hipsdontlie forwards infinite;
}
@keyframes hipsdontlie {
  0%, 100% {
    transform: translate(85px, 11px) scale(1.35);
  }
  50% {
    transform: translate(75px, 11px) scale(1.35);
  }
}
#leisure-btm-rt, #leisure-btm-lft, #ltleg, #rtleg {
  transform: translate(85px, 11px) scale(1.35);
}

.toggle-checkbox:checked ~ .z #rtleg, .toggle-checkbox:checked ~ .z #ltleg {
  animation: var(--dance-move-duration) ease-in-out 0s hipsdontlie2 forwards infinite;
}
@keyframes hipsdontlie2 {
  0%, 100% {
    transform: translate(85px, 11px) scale(1.35);
  }
  50% {
    transform: translate(80px, 11px) scale(1.35);
  }
}
body {
  background-color: mistyrose;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.logo {
  width: 100%;
  max-width: 400px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.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: realtive;
  z-index: 10001;
}
              
            
!

JS

              
                
              
            
!
999px

Console