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

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

<div class="zicarus">
<svg width="100%" height="100%" viewBox="0 0 750 380" version="1.1" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g transform="matrix(0.978461,0,0,1.18651,-23.4742,-148.848)">
<path d="M213.106,143.95L288.977,178.881L332.741,265.015L350.096,300.296L364.182,300.296L364.182,344.83L337.087,344.83L337.087,353.431L314.471,353.431L314.471,345.333L303.269,345.333L303.269,353.341L280.653,353.341L280.653,343.918L276.736,343.918L276.736,355.855L254.121,355.855L254.121,343.918L251.668,343.91L251.668,342.712L248.585,342.72L248.585,353.155L225.97,353.155L225.97,332.784L217.394,332.784L217.394,353.155L194.778,353.155L194.778,333.442L189.173,333.442L189.173,348.975L166.558,348.975L166.558,331.495L162.834,331.495L162.834,346.021L140.219,346.021L140.219,321.584L133.433,321.584L133.433,331.336L110.818,331.336L110.818,300.172L104.996,300.172L104.996,309.881L78.582,309.881L78.582,278.617L87.65,278.617L87.65,269.669L58.571,269.669L58.571,244.504L74.323,244.504L74.323,239.14L53.667,239.14L53.667,213.975L69.747,213.975L69.747,204.069L51.569,204.069L51.569,185.378L66.513,185.317L65.859,158.421L213.106,143.95Z" style="fill:rgb(244,207,178);"/>
</g>
<g transform="matrix(-0.978461,0,0,1.18651,773.931,-148.848)">
<path d="M213.106,143.95L288.977,178.881L332.741,265.015L350.096,300.296L364.182,300.296L364.182,344.83L337.087,344.83L337.087,353.431L314.471,353.431L314.471,345.333L303.269,345.333L303.269,353.341L280.653,353.341L280.653,343.918L276.736,343.918L276.736,355.855L254.121,355.855L254.121,343.918L251.668,343.91L251.668,342.712L248.585,342.72L248.585,353.155L225.97,353.155L225.97,332.784L217.394,332.784L217.394,353.155L194.778,353.155L194.778,333.442L189.173,333.442L189.173,348.975L166.558,348.975L166.558,331.495L162.834,331.495L162.834,346.021L140.219,346.021L140.219,321.584L133.433,321.584L133.433,331.336L110.818,331.336L110.818,300.172L104.996,300.172L104.996,309.881L78.582,309.881L78.582,278.617L87.65,278.617L87.65,269.669L58.571,269.669L58.571,244.504L74.323,244.504L74.323,239.14L53.667,239.14L53.667,213.975L69.747,213.975L69.747,204.069L51.569,204.069L51.569,185.378L66.513,185.317L65.859,158.421L213.106,143.95Z" style="fill:rgb(244,207,178);"/>
</g>
<g transform="matrix(0.978461,0,0,1,-23.4742,-122)">
<path d="M354.542,316.13L343.093,316.13L343.093,305.985L335.286,305.985L335.286,290.976L328.872,290.976L328.872,277.905L318.83,277.905L318.83,265.825L310.017,265.825L310.017,243.611L301.17,243.611L301.17,225.442L293.199,225.442L293.199,214.525L284.354,214.525L284.354,204.048L272.372,204.048L272.372,192.186L257.731,192.186L257.731,182.617L245.578,182.617L245.578,177.065L227.997,177.065L227.997,171.187L208.321,171.187L208.321,166.741L178.975,166.741L178.975,168.738L155.214,168.738L155.214,171.135L132.899,171.135L132.899,173.205L113.889,173.205L113.889,175.392L92.184,175.392L92.184,178.881L42.181,178.881L42.181,174.587L24.411,174.587L24.411,153.165L42.181,153.165L42.181,148.905L51.651,148.905L51.651,144.896L70.86,144.896L70.86,141.197L100.038,141.197L100.038,135.244L122.353,135.244L122.353,133.174L134.897,133.174L134.897,129.796L214.351,129.796L214.351,133.226L241.181,133.226L241.181,139.104L260.857,139.104L260.857,144.656L278.438,144.656L278.438,154.225L290.591,154.225L290.591,166.087L305.232,166.087L305.232,176.564L317.214,176.564L317.214,187.481L326.059,187.481L326.059,205.65L334.03,205.65L334.03,227.864L342.877,227.864L342.877,239.944L351.69,239.944L351.69,253.015L361.732,253.015L361.732,268.024L368.146,268.024L368.146,278.168L375.953,278.168L375.953,293.353L387.402,293.353L387.402,302.278L402.894,302.278L402.894,340.24L370.034,340.24L370.034,331.314L354.542,331.314L354.542,316.13Z" style="fill:rgb(238,181,135);"/>
</g>
<g transform="matrix(-0.978461,0,0,1,773.931,-122)">
<path d="M354.542,316.13L343.093,316.13L343.093,305.985L335.286,305.985L335.286,290.976L328.872,290.976L328.872,277.905L318.83,277.905L318.83,265.825L310.017,265.825L310.017,243.611L301.17,243.611L301.17,225.442L293.199,225.442L293.199,214.525L284.354,214.525L284.354,204.048L272.372,204.048L272.372,192.186L257.731,192.186L257.731,182.617L245.578,182.617L245.578,177.065L227.997,177.065L227.997,171.187L208.321,171.187L208.321,166.741L178.975,166.741L178.975,168.738L155.214,168.738L155.214,171.135L132.899,171.135L132.899,173.205L113.889,173.205L113.889,175.392L92.184,175.392L92.184,178.881L42.181,178.881L42.181,174.587L24.411,174.587L24.411,153.165L42.181,153.165L42.181,148.905L51.651,148.905L51.651,144.896L70.86,144.896L70.86,141.197L100.038,141.197L100.038,135.244L122.353,135.244L122.353,133.174L134.897,133.174L134.897,129.796L214.351,129.796L214.351,133.226L241.181,133.226L241.181,139.104L260.857,139.104L260.857,144.656L278.438,144.656L278.438,154.225L290.591,154.225L290.591,166.087L305.232,166.087L305.232,176.564L317.214,176.564L317.214,187.481L326.059,187.481L326.059,205.65L334.03,205.65L334.03,227.864L342.877,227.864L342.877,239.944L351.69,239.944L351.69,253.015L361.732,253.015L361.732,268.024L368.146,268.024L368.146,278.168L375.953,278.168L375.953,293.353L387.402,293.353L387.402,302.278L402.894,302.278L402.894,340.24L370.034,340.24L370.034,331.314L354.542,331.314L354.542,316.13Z" style="fill:rgb(238,181,135);"/>
</g>
<g transform="matrix(1.03417,0,0,1,267.946,7)">
<g id="rarm" transform="matrix(1.09476,0,0,2.22855,-2.58199e-32,-330.66)">
<rect x="0" y="187.581" width="39.123" height="24.682" style="fill:rgb(145,193,163);"/>
</g>
<g id="rarm1" serif:id="rarm" transform="matrix(-1.09476,0,0,2.22855,206.445,-330.66)">
<rect x="0" y="187.581" width="39.123" height="24.682" style="fill:rgb(145,193,163);"/>
</g>
<g id="rarm2" serif:id="rarm" transform="matrix(1.09476,0,0,2.22855,-10.643,-382.237)">
<rect x="0" y="187.581" width="39.123" height="24.682" style="fill:rgb(145,193,163);"/>
</g>
<g id="rarm3" serif:id="rarm" transform="matrix(-1.09476,0,0,2.22855,217.088,-382.237)">
<rect x="0" y="187.581" width="39.123" height="24.682" style="fill:rgb(145,193,163);"/>
</g>
<g id="shirt" transform="matrix(0.966962,0,0,1,-259.094,-7)">
<path d="M329.206,194.882L308.786,194.882L308.786,185.01L298.576,185.01L298.576,175.137L288.366,175.137L288.366,165.264L278.157,165.264L278.157,155.392L267.946,155.392L267.946,145.519L299.008,145.366L299.008,135.785L318.428,135.618L318.565,145.259L329.206,145.218L420.857,145.19L431.527,145.185L431.527,135.618L451.424,135.785L451.424,145.34L482.054,145.491L482.054,155.364L471.843,155.364L471.843,165.236L461.634,165.236L461.634,175.109L451.424,175.109L451.424,184.982L441.546,184.982L441.546,194.882L420.857,194.882L420.857,257.379L329.206,257.379L329.206,194.882Z" style="fill:rgb(112,80,61);"/>
</g>
<g id="rboot" transform="matrix(0.995356,0,0,1,-6.59985e-17,0)">
<path d="M99.188,315.641L99.188,373L59.512,373L59.512,372.999L34.491,372.999L34.491,335.637L59.512,335.637L59.512,315.641L99.188,315.641Z"/>
</g>
<g id="lboot" transform="matrix(0.995356,0,0,1,-6.59985e-17,0)">
<path d="M108.919,315.641L148.594,315.641L148.594,335.637L173.614,335.637L173.614,372.999L148.594,372.999L148.594,373L108.919,373L108.919,315.641Z"/>
</g>
<g id="shorts--Curve---Curve-" serif:id="shorts (Curve) (Curve)" transform="matrix(0.995356,0,0,1,0,-5.68434e-14)">
<path d="M59.512,251.627L148.549,251.627L148.549,276.558L148.593,276.558L148.593,326.529L108.973,326.529L108.973,285.954L99.073,285.954L99.073,326.529L59.512,326.529L59.512,251.627Z" style="fill:rgb(61,80,112);"/>
</g>
<rect id="neck" x="78.982" y="128.345" width="49.363" height="19.623" style="fill:rgb(145,193,163);"/>
<g id="hair" transform="matrix(0.995356,0,0,1,-6.59985e-17,0)">
<path d="M60.499,9.873L69.431,9.873L69.431,0L138.123,0L138.123,9.873L148.782,9.873L148.782,29.496L60.499,29.496L60.499,9.873Z" style="fill:rgb(58,58,58);"/>
</g>
<g id="face" transform="matrix(0.995356,0,0,1,-6.59985e-17,0)">
<path d="M152.294,25.43L153.708,128.531L53.576,124.626L53.576,23.903L152.294,25.43Z" style="fill:rgb(156,211,179);"/>
</g>
<g id="lefteye" transform="matrix(0.850965,0,0,1,16.1852,-7.10543e-15)">
<rect x="108.6" y="39.491" width="33.123" height="30.123" style="fill:rgb(251,235,142);"/>
</g>
<rect id="righteye" x="69.109" y="39.491" width="29.373" height="30.123" style="fill:rgb(251,235,142);"/>
<rect id="mouth" x="88.854" y="98.727" width="29.618" height="9.873" style="fill:rgb(117,139,124);"/>
<rect id="nose" x="98.727" y="59.236" width="9.873" height="29.373" style="fill:rgb(145,193,163);"/>
<g id="rightpupil" transform="matrix(1,0,0,1,8.86341,-9.622)">
<rect x="69.109" y="49.363" width="9.873" height="9.873" style="fill:rgb(68,68,69);"/>
</g>
<g id="leftpupil" transform="matrix(1,0,0,1,8.4415,10)">
<rect x="118.472" y="39.491" width="9.873" height="9.873" style="fill:rgb(68,68,69);"/>
</g>
<g id="belt" transform="matrix(1,0,0,1.07833,-1.2326e-32,-30.8788)">
<rect x="59.236" y="256.69" width="88.623" height="9.873" style="fill:rgb(122,122,122);"/>
</g>
<g transform="matrix(0.707061,0,0,0.719515,-72.8267,-66.7093)">
<path d="M174.032,111.397L326.014,111.397L326.014,126.593L339.798,126.593L339.514,260.899L325.84,260.899L325.84,280.157L293.788,280.157L293.788,296.243L206.085,296.243L206.085,280.157L174.032,280.157L174.032,260.899L160.358,260.899L160.249,126.593L174.032,126.593L174.032,111.397ZM300.936,143.815L198.936,143.815L198.936,160.189L185.262,160.189L185.262,228.786L198.325,228.786L198.325,241.641L217.797,241.641L217.797,257.728L282.076,257.728L282.076,241.641L301.548,241.641L301.548,228.786L314.611,228.786L314.611,160.189L300.936,160.189L300.936,143.815Z" style="fill:rgb(220,220,220);stroke:rgb(61,61,61);stroke-width:1.84px;"/>
</g>
<g transform="matrix(0.762301,0,0,0.787512,-86.2175,-74.2038)">
<path d="M164.87,147.031L171.99,147.031L171.99,119.011L180.648,119.011L180.648,96.068L189.263,96.068L189.263,84.067L310.915,84.067L310.915,94.02L319.352,94.02L319.352,116.963L328.01,116.963L328.01,144.983L335.13,144.983L335.13,173.005L325.692,173.005L325.692,164.139L318.572,164.139L318.572,141.196L309.915,141.196L309.915,131.243L190.085,131.243L190.085,143.244L181.428,143.244L181.428,166.187L174.308,166.187L174.308,175.053L164.87,175.053L164.87,147.031Z" style="fill:rgb(61,46,15);stroke:rgb(65,65,65);stroke-width:1.69px;"/>
</g>
<g id="righthand" transform="matrix(1.12392,-2.38009e-17,2.23581e-17,-1.31797,-24.1375,310.081)">
<path d="M9.919,227.072L9.919,197.454L59.512,197.454L59.512,207.327L49.225,207.327L49.225,227.072L39.674,227.072L39.674,236.944L19.652,236.944L19.652,227.072L9.919,227.072Z" style="fill:rgb(156,211,179);"/>
</g>
<g id="lefthand" transform="matrix(1.10257,-2.65042e-17,2.48974e-17,-1.31797,-0.10322,310.117)">
<path d="M148.488,197.482L198.082,197.482L198.082,227.1L188.347,227.1L188.347,236.972L168.325,236.972L168.325,227.1L158.776,227.1L158.776,207.355L148.488,207.355L148.488,197.482Z" style="fill:rgb(156,211,179);"/>
</g>
</g>
<g transform="matrix(54.3601,0,0,54.3601,347.82,235.088)">
<path d="M0.5,-0.375L0.375,-0.375L0.375,-0.125L0.75,-0.125L0.75,-0.25L0.875,-0.25L0.875,-0.375L1,-0.375L1,0L0,0L0,-0.125L0.125,-0.125L0.125,-0.375L0.25,-0.375L0.25,-0.5L0.375,-0.5L0.375,-0.75L0.5,-0.75L0.5,-0.875L0.625,-0.875L0.625,-1.125L0.25,-1.125L0.25,-1L0.125,-1L0.125,-0.875L0,-0.875L0,-1.25L1,-1.25L1,-1.125L0.875,-1.125L0.875,-0.875L0.75,-0.875L0.75,-0.75L0.625,-0.75L0.625,-0.5L0.5,-0.5L0.5,-0.375Z" style="fill:white;fill-rule:nonzero;"/>
</g>
</svg>
</div>
<svg id="cloud1" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 288 155">
  <path fill="#ebebeb" d="M192.53 8.3h13.29v8.66h18.07v5.08h20.62v7.67h16.07v7.42h6.4v12.58h7.85v12.35h5.86v18.57H288v42.38h-7.3v11.95h-7.64v5.84h-76.18v7.58h-42.94V155H76.37v-5.08H38.76v-4.5H22.93v-5.22H9.38v-6.52h-7.3v-9.2H0v-17.2h2.08V83.52H15.9V66.46h10.72v-5.31h8.9v-8.8h12.85V46.5h6.31v-5.73h12.8v-3.65h12.27v-6.07h13.7V21.9h13.36v-6h6.5V8.3h15.33V0h63.9v8.3z"/>
</svg>
<svg id="cloud2" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 360 175">
  <path fill="#ebebeb" d="M123.13 5.14h17.96v5.25h15.68v4.48h8.07v8.81h9.37v6.66h8.62v5.7h23.08v3.79h5.4v-4.56h13.03v-3.74h16.1v-6.1h44.97v6.1h15.27v3.74h5.6v6.19h6.1v.65h8.78v11.8h13.66v8.44h10.61v6.25h.47v.34h7.71v9.66H360v30.75h-6.39V119h-7.71v12.84h-13.8v9.04h-9.46v9.26h-13.13v7.61h-14.27v6.78h-54.98v5.9h-22.64V175h-67.33v-2.96h-20.74v-1.25H71.93v-2.95H51.18v-7.12h-20.1v-7.24h-5.04v-7.14h-9.5v-9.7H3.34v-15.82H0V85.55h3.33V73.39h3.91V57.57h5.63V38.35h5.92V29.6h9.91v-9.8h8.9v-9.4h24.3V-.02h61.23v5.15z"/>
</svg>



<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 ~ .zicarus { 
  animation: 5s cubic-bezier(.54,.01,.2,1.01) 0s flying forwards;
}
.toggle-checkbox:checked ~ .zicarus svg { 
  animation: 5s linear 0s rotate forwards;
}
.toggle-checkbox:checked ~ .zicarus #rightpupil { 
  animation: 5s ease-in-out 0s eyedrop forwards;
}

@keyframes rotate {
  0% {
    transform: translateY( 1500px ) rotate(0);
  }
  50% {
    transform: rotate(0);
  }
  58% {
    transform: rotate(0);
  }
  65% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(80deg);
  }
}
@keyframes flying {
  0% {
    transform: translateY( 1320px );
  }
  54% {
    transform: translateY( -30vh );
  }
  55% {
    transform: translateY( -30.1vh );
  }
  56% {
    transform: translateY( -30vh );
  }
  100% {
    transform: translateY( 500px );
  }
}

/* #rightpupil {
    transform: translate( 10px, -10px );
} */

@keyframes eyedrop {
  0% {
    transform: translate( 10px, -10px );
  }
  42% {
    transform: translate( 10px, -10px );
  }
  51% {
    transform: translate( 10px, 10px );
  }
  100% {
    transform: translate( 10px, 10px );
  }
}
#cloud1 {
  position: absolute;
  top: 10vh;
  left: 10vw;
  width: 400px;
  z-index: -1;
}
#cloud2 {
  position: absolute;
  bottom: 30vh;
  right: 10vw;
  width: 500px;
  z-index: -1;
}

body {
  background-color: lightblue;
  overflow: hidden;
}
.zicarus {
  width: 100%;
  max-width: 600px;
  margin: auto;
  position: absolute;
  left: calc(50% - 300px);
  bottom: 0;
  transform: translateY( 320px );
  transform-origin: center 60%;
}
.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;
}
              
            
!

JS

              
                
              
            
!
999px

Console