cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

            
                  <div class="padding">
      <svg class="titleLogo" width="288" height="55" viewBox="0 0 300 55" xmlns="http://www.w3.org/2000/svg">
        <path id="morph" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="2"
          d="M46.364 39.758c-.893.383-1.76.888-2.597 1.517-.84.63-1.687 1.317-2.543 2.065-.857.747-1.746 1.536-2.666 2.365-.92.83-1.914 1.65-2.98 2.46-1.067.812-2.23 1.587-3.487 2.325-1.257.74-2.647 1.386-4.17 1.942-1.52.556-3.198.998-5.03 1.326-1.832.328-3.86.492-6.084.492-2.46 0-4.68-.497-6.658-1.49-1.978-.994-3.67-2.334-5.073-4.02-1.403-1.686-2.483-3.646-3.24-5.88C1.078 40.63.7 38.28.7 35.82c0-1.677.183-3.477.547-5.4.365-1.923.89-3.883 1.572-5.88.683-1.995 1.517-3.987 2.5-5.974.986-1.987 2.102-3.892 3.35-5.714 1.25-1.823 2.62-3.514 4.116-5.073 1.495-1.56 3.09-2.917 4.785-4.075 1.697-1.157 3.483-2.064 5.36-2.72C24.81.327 26.76 0 28.783 0c1.313 0 2.643.232 3.992.697 1.35.465 2.562 1.18 3.637 2.147 1.077.966 1.956 2.187 2.64 3.664.683 1.476 1.025 3.217 1.025 5.222 0 1.35-.214 2.712-.642 4.088-.43 1.377-1.017 2.698-1.764 3.965-.748 1.267-1.628 2.457-2.64 3.57-1.01 1.11-2.1 2.072-3.267 2.883-1.167.812-2.38 1.454-3.637 1.928-1.258.474-2.516.71-3.773.71-1.66 0-2.9-.222-3.72-.67-.82-.446-1.23-1.088-1.23-1.927 0-.145-.004-.32-.013-.52-.01-.2-.014-.41-.014-.628 0-.33.018-.67.055-1.026.037-.356.11-.68.22-.97.11-.293.268-.53.478-.712.21-.182.497-.274.86-.274.22 0 .41.032.576.096.164.064.346.132.546.205.2.072.442.14.725.204.283.064.643.096 1.08.096 1.167 0 2.347-.255 3.54-.766 1.195-.51 2.27-1.23 3.228-2.16.957-.93 1.74-2.037 2.35-3.322.612-1.285.917-2.703.917-4.252 0-.82-.11-1.6-.328-2.338-.22-.738-.574-1.385-1.066-1.94-.492-.557-1.126-1.004-1.9-1.34-.775-.338-1.72-.507-2.83-.507-1.313 0-2.594.287-3.843.86-1.248.576-2.447 1.355-3.595 2.34-1.15.984-2.238 2.15-3.268 3.5-1.03 1.348-1.982 2.793-2.857 4.333-.875 1.54-1.664 3.145-2.365 4.813-.702 1.67-1.3 3.332-1.792 4.99-.492 1.66-.87 3.27-1.134 4.827-.265 1.56-.397 2.994-.397 4.307 0 1.877.233 3.513.698 4.908.464 1.394 1.125 2.557 1.982 3.486.857.93 1.905 1.623 3.144 2.078 1.24.456 2.634.684 4.183.684 1.932 0 3.732-.242 5.4-.725 1.668-.483 3.26-1.116 4.772-1.9 1.513-.784 2.976-1.668 4.39-2.652 1.41-.985 2.824-1.974 4.237-2.967 1.413-.994 2.853-1.942 4.32-2.844 1.468-.902 3.022-1.663 4.662-2.283v5.878zM69.716 42.3c-.42.584-.98 1.268-1.682 2.052-.702.783-1.49 1.53-2.365 2.242-.876.71-1.815 1.312-2.817 1.804-1.003.493-2.006.74-3.008.74-1.203 0-2.206-.39-3.008-1.163-.802-.775-1.495-1.9-2.078-3.377-.44.51-.976 1.03-1.614 1.558-.638.53-1.336 1.007-2.092 1.436-.757.428-1.545.78-2.365 1.053-.822.273-1.642.41-2.462.41-.875 0-1.728-.178-2.557-.534-.828-.354-1.562-.864-2.2-1.53-.638-.665-1.15-1.476-1.53-2.433-.384-.957-.576-2.037-.576-3.24 0-1.368.192-2.77.575-4.212.38-1.44.91-2.848 1.584-4.224.675-1.375 1.472-2.674 2.393-3.896.92-1.22 1.928-2.287 3.022-3.2 1.092-.91 2.245-1.635 3.458-2.173 1.212-.536 2.447-.805 3.705-.805.42 0 .747.082.984.246.237.165.433.352.588.56.155.21.305.416.45.617.147.2.33.346.548.437.22.09.442.15.67.178.228.027.46.04.697.04.2 0 .406-.004.615-.013.21-.01.415-.015.616-.015.274 0 .53.028.766.082.237.055.447.174.63.356.18.182.323.437.423.766.1.327.15.773.15 1.338 0 .875-.092 1.846-.274 2.913-.182 1.067-.383 2.16-.602 3.282-.218 1.12-.42 2.242-.6 3.363-.184 1.12-.275 2.183-.275 3.186 0 .857.077 1.527.232 2.01.155.483.487.725.998.725.383 0 .784-.096 1.203-.287.42-.192.843-.442 1.27-.752.43-.31.858-.66 1.287-1.053.428-.392.834-.797 1.216-1.217.894-.984 1.796-2.096 2.707-3.336l1.313 6.07zm-23.352-2.16c0 .456.032.898.096 1.327.064.428.178.81.342 1.148.164.337.383.61.656.82.273.21.62.315 1.04.315.674 0 1.284-.292 1.83-.875.548-.583 1.022-1.285 1.423-2.105.402-.82.726-1.668.972-2.543.246-.875.405-1.605.478-2.188L54.868 28c-.747 0-1.476.187-2.187.56-.71.374-1.38.88-2.01 1.518-.628.638-1.207 1.367-1.735 2.188-.53.82-.985 1.68-1.368 2.584-.382.902-.68 1.81-.888 2.72-.21.912-.316 1.77-.316 2.57zm42.875 2.735c-1.75 1.02-3.31 1.914-4.676 2.68-1.368.765-2.584 1.403-3.65 1.914-1.067.51-2.015.892-2.845 1.147-.83.255-1.582.383-2.256.383-1.386 0-2.607-.42-3.665-1.258-1.058-.838-1.942-2.046-2.653-3.623-.71-1.578-1.244-3.487-1.6-5.73-.355-2.242-.533-4.766-.533-7.574 0-1.093.046-2.26.137-3.5.092-1.24.22-2.47.384-3.69-.547-.074-.97-.142-1.272-.206-.3-.064-.62-.128-.957-.19-.337-.065-.765-.134-1.285-.207-.52-.072-1.27-.164-2.256-.273-.437-.055-.774-.16-1.01-.314-.238-.155-.412-.338-.52-.547-.11-.21-.174-.43-.192-.658-.02-.227-.028-.423-.028-.587 0-.365.178-.643.534-.834.355-.19.81-.332 1.367-.423.556-.09 1.166-.142 1.832-.15.665-.01 1.303-.005 1.914.013.61.018 1.158.032 1.64.04.484.01.817-.004 1-.04.492-2.46 1.116-4.844 1.873-7.15.756-2.306 1.604-4.357 2.542-6.153.94-1.795 1.965-3.235 3.077-4.32C77.254.542 78.42 0 79.642 0c.784 0 1.5.22 2.146.656.647.438 1.2 1.02 1.654 1.75.456.73.807 1.582 1.053 2.557.246.975.37 1.99.37 3.05 0 .892-.128 1.835-.384 2.83-.254.992-.6 2.004-1.038 3.034-.437 1.03-.952 2.074-1.544 3.13-.593 1.058-1.217 2.106-1.874 3.145.165.02.438.032.82.04.384.01.826.024 1.327.042.502.02 1.045.04 1.628.07.583.026 1.148.05 1.695.067l1.53.056c.475.018.867.036 1.177.054.365.02.63.2.793.547.164.347.246.784.246 1.313 0 .638-.183 1.157-.548 1.558-.364.4-.765.602-1.203.602h-10.5c-.53.73-1.063 1.445-1.6 2.146-.538.702-1.035 1.336-1.49 1.9-.073 1.13-.137 2.243-.192 3.337l-.055 1.463-.054 1.49c-.02.492-.033.966-.042 1.422-.01.456-.014.875-.014 1.258 0 .984.09 1.813.273 2.488.183.674.447 1.226.793 1.654.347.43.77.738 1.272.93.5.19 1.062.287 1.682.287.382 0 .86-.09 1.435-.273.573-.183 1.202-.433 1.886-.752.683-.32 1.403-.698 2.16-1.135.756-.438 1.504-.916 2.242-1.436.738-.52 1.445-1.067 2.12-1.64.674-.576 1.284-1.163 1.83-1.765v7zM80.49 8.258c0-.2-.014-.424-.042-.67-.027-.246-.086-.48-.177-.697-.09-.218-.232-.4-.423-.546-.192-.146-.46-.22-.807-.22-.474 0-.952.42-1.435 1.26-.484.837-.948 1.908-1.395 3.212-.447 1.303-.866 2.74-1.258 4.306-.392 1.568-.752 3.09-1.08 4.567.274.035.547.067.82.094.274.028.556.06.848.096.547-.93 1.117-1.937 1.71-3.02.592-1.086 1.125-2.152 1.6-3.2.473-1.05.865-2.03 1.174-2.94.31-.91.465-1.66.465-2.242zm39.43 34.918c-.657.6-1.473 1.244-2.448 1.928-.976.683-2.028 1.312-3.158 1.886-1.13.574-2.284 1.053-3.46 1.436-1.175.383-2.292.574-3.35.574-.947 0-1.745-.132-2.392-.396-.647-.265-1.17-.634-1.572-1.108-.4-.474-.688-1.053-.86-1.736-.174-.684-.26-1.436-.26-2.256 0-1.15.13-2.484.395-4.006.265-1.522.588-3.1.97-4.73.384-1.632.79-3.26 1.218-4.88.428-1.624.807-3.118 1.135-4.486.127-.474.383-.88.765-1.216.383-.338.816-.61 1.3-.82.482-.21.984-.365 1.503-.466.52-.1.99-.15 1.408-.15.766 0 1.285.14 1.56.424.272.282.41.66.41 1.135 0 .4-.092.978-.274 1.735-.183.756-.41 1.613-.684 2.57-.273.957-.565 1.987-.875 3.09-.31 1.103-.6 2.206-.874 3.31-.273 1.102-.5 2.177-.684 3.225-.182 1.048-.273 1.992-.273 2.83 0 .82.09 1.472.272 1.955.183.483.556.725 1.122.725.656 0 1.385-.228 2.187-.684.803-.455 1.614-1.007 2.435-1.654.82-.647 1.622-1.317 2.406-2.01.785-.692 1.477-1.285 2.08-1.777v5.55zm-12.224-28.11c0-.42.09-.893.274-1.42.182-.53.478-1.027.888-1.492.41-.465.957-.856 1.64-1.175.685-.32 1.537-.48 2.558-.48.638 0 1.24.073 1.804.22.566.145 1.058.368 1.477.67.42.3.752.696.998 1.188s.37 1.076.37 1.75c0 .62-.1 1.22-.302 1.805-.2.583-.52 1.103-.957 1.558-.437.457-.99.826-1.654 1.11-.665.28-1.463.423-2.393.423-1.605 0-2.79-.38-3.555-1.135-.766-.757-1.15-1.764-1.15-3.022zm10.282 28.22c0-1.204.072-2.594.218-4.17.146-1.578.328-3.182.547-4.813.22-1.632.465-3.204.738-4.717.275-1.513.54-2.807.794-3.883.2-.838.588-1.54 1.163-2.105.574-.565 1.353-.848 2.337-.848.985 0 1.668.3 2.05.902.384.602.575 1.404.575 2.407 0 .272-.028.64-.083 1.106-.054.465-.123.975-.205 1.53-.082.557-.168 1.13-.26 1.724-.09.592-.177 1.14-.26 1.64-.08.502-.15.94-.204 1.313-.055.374-.082.624-.082.752h.547c.11-.2.282-.524.52-.97l.82-1.546c.31-.584.642-1.2.997-1.846.356-.647.69-1.267 1-1.86.308-.592.59-1.116.846-1.572.255-.456.447-.793.574-1.012.584-.984 1.25-1.66 1.996-2.023.748-.365 1.577-.547 2.49-.547.91 0 1.635.383 2.173 1.148.536.766.805 1.823.805 3.172 0 .2-.04.538-.123 1.012-.082.474-.187 1.04-.314 1.695l-.424 2.16c-.155.784-.296 1.586-.424 2.407-.128.82-.232 1.63-.314 2.433-.082.802-.123 1.54-.123 2.215 0 1.13.14 2.06.423 2.79.283.728.725 1.093 1.327 1.093.273 0 .587-.082.943-.246.355-.165.738-.38 1.148-.644.41-.264.83-.57 1.258-.916.43-.346.852-.702 1.272-1.066.966-.857 1.978-1.823 3.035-2.9l.464 6.126-1.368 1.04c-.747.565-1.508 1.13-2.283 1.695-.774.565-1.58 1.07-2.42 1.517-.838.447-1.713.812-2.625 1.094-.91.283-1.868.424-2.87.424-1.003 0-1.846-.725-2.53-2.174-.684-1.45-1.025-3.568-1.025-6.357 0-1.095.072-2.275.218-3.542.147-1.267.33-2.63.548-4.088h-.437l-7.163 14.22c-.365.746-.775 1.256-1.23 1.53-.457.273-.985.41-1.587.41-.747 0-1.35-.16-1.804-.48-.456-.318-.807-.746-1.053-1.284-.246-.537-.41-1.148-.492-1.832-.08-.683-.122-1.39-.122-2.12zm68.85-.985c-.418.584-.98 1.268-1.68 2.052-.702.783-1.49 1.53-2.366 2.242-.875.71-1.814 1.312-2.816 1.804-1.003.493-2.005.74-3.008.74-1.203 0-2.206-.39-3.008-1.163-.802-.775-1.495-1.9-2.078-3.377-.437.51-.975 1.03-1.613 1.558-.64.53-1.336 1.007-2.093 1.436-.756.428-1.545.78-2.365 1.053-.82.273-1.64.41-2.46.41-.876 0-1.728-.178-2.558-.534-.83-.354-1.563-.864-2.2-1.53-.64-.665-1.15-1.476-1.532-2.433-.383-.957-.574-2.037-.574-3.24 0-1.368.19-2.77.574-4.212.383-1.44.91-2.848 1.586-4.224.674-1.375 1.472-2.674 2.392-3.896.92-1.22 1.928-2.287 3.022-3.2 1.094-.91 2.247-1.635 3.46-2.173 1.21-.536 2.446-.805 3.704-.805.42 0 .747.082.984.246.237.165.433.352.588.56.155.21.305.416.45.617.147.2.33.346.548.437.22.09.442.15.67.178.228.027.46.04.697.04.2 0 .406-.004.616-.013.208-.01.413-.015.614-.015.273 0 .528.028.765.082.236.055.446.174.628.356.183.182.324.437.424.766.1.327.15.773.15 1.338 0 .875-.09 1.846-.273 2.913-.183 1.067-.384 2.16-.602 3.282-.22 1.12-.42 2.242-.602 3.363-.182 1.12-.273 2.183-.273 3.186 0 .857.077 1.527.232 2.01.155.483.488.725.998.725.383 0 .784-.096 1.203-.287.42-.192.843-.442 1.272-.752.428-.31.856-.66 1.285-1.053.428-.392.834-.797 1.217-1.217.893-.984 1.795-2.096 2.707-3.336l1.312 6.07zm-23.35-2.16c0 .456.03.898.095 1.327.064.428.178.81.342 1.148.164.337.383.61.656.82.275.21.62.315 1.04.315.675 0 1.286-.292 1.832-.875.547-.583 1.02-1.285 1.422-2.105.4-.82.725-1.668.97-2.543.247-.875.407-1.605.48-2.188L171.98 28c-.746 0-1.475.187-2.186.56-.71.374-1.38.88-2.01 1.518-.63.638-1.207 1.367-1.736 2.188-.53.82-.984 1.68-1.367 2.584-.382.902-.678 1.81-.888 2.72-.21.912-.314 1.77-.314 2.57zm33.168-27.507c-1.185 2.15-2.243 3.764-3.172 4.84-.93 1.075-1.687 1.613-2.27 1.613-.802 0-1.203-.92-1.203-2.762 0-1.786.256-3.39.767-4.812.51-1.422 1.226-2.685 2.146-3.787.92-1.103 2.014-2.042 3.28-2.817 1.268-.775 2.654-1.413 4.158-1.914 1.505-.5 3.095-.87 4.772-1.107s3.4-.356 5.168-.356c2.06 0 4.13.152 6.207.452 2.078.3 4.074.725 5.988 1.272 1.914.547 3.7 1.208 5.36 1.982 1.66.775 3.103 1.632 4.334 2.57 1.23.94 2.195 1.956 2.897 3.05.702 1.093 1.053 2.233 1.053 3.417 0 1.404-.305 2.79-.916 4.157-.61 1.367-1.568 2.602-2.87 3.705-1.305 1.103-2.973 2.01-5.005 2.72-2.034.71-4.472 1.094-7.316 1.15 1.805 0 3.382.286 4.73.86 1.35.574 2.48 1.35 3.392 2.324.91.975 1.595 2.1 2.05 3.376.456 1.276.684 2.616.684 4.02 0 1.148-.155 2.315-.465 3.5-.31 1.185-.775 2.324-1.394 3.418-.62 1.094-1.394 2.12-2.324 3.076-.93.957-2.02 1.79-3.267 2.502-1.25.71-2.658 1.272-4.226 1.682-1.568.41-3.29.615-5.168.615-1.185 0-2.433-.08-3.746-.234-1.312-.154-2.64-.364-3.978-.628-1.34-.265-2.657-.58-3.952-.944-1.294-.364-2.515-.756-3.664-1.176-.51-.127-.96-.32-1.353-.574-.392-.255-.588-.71-.588-1.367 0-3.026.077-6.125.232-9.297.155-3.172.47-6.27.944-9.297.475-3.026 1.158-5.91 2.05-8.654.895-2.745 2.08-5.2 3.556-7.37 1.294-.893 2.47-1.34 3.528-1.34 1.33 0 2.442.747 3.335 2.242-.84 1.13-1.555 2.388-2.147 3.774-.592 1.385-1.09 2.84-1.49 4.36-.4 1.523-.725 3.077-.97 4.663-.247 1.585-.443 3.134-.59 4.648-.09.856-.167 1.768-.23 2.734-.065.966-.124 1.95-.18 2.953-.054 1.003-.095 2-.122 2.994-.026.993-.04 1.945-.04 2.857 0 .145.004.346.014.6.01.256.03.52.068.794.036.275.09.525.164.753.073.228.182.397.328.506 1.112.363 2.306.673 3.582.93 1.276.254 2.552.38 3.828.38 1.55 0 3.054-.185 4.512-.56 1.458-.373 2.753-.965 3.883-1.776 1.13-.812 2.036-1.85 2.72-3.118.683-1.267 1.025-2.802 1.025-4.607 0-1.058-.2-1.938-.602-2.64-.4-.702-.925-1.29-1.572-1.763-.646-.474-1.384-.853-2.214-1.135-.83-.283-1.677-.538-2.543-.766-.866-.228-1.713-.45-2.543-.67-.83-.22-1.567-.496-2.215-.834-.647-.337-1.17-.756-1.572-1.258-.4-.5-.6-1.153-.6-1.955 0-.383.02-.716.067-1 .046-.28.155-.514.328-.696.173-.182.43-.32.766-.41.337-.09.797-.137 1.38-.137.784 0 1.5.032 2.147.096.648.064 1.345.096 2.093.096 1.75 0 3.33-.216 4.744-.644 1.413-.428 2.616-1.007 3.61-1.736.993-.73 1.76-1.582 2.296-2.557.538-.975.807-2.02.807-3.13 0-.73-.21-1.4-.63-2.01-.418-.61-1.006-1.158-1.763-1.64-.756-.484-1.645-.908-2.666-1.273-1.02-.364-2.13-.67-3.335-.916-1.203-.246-2.47-.428-3.8-.547-1.33-.118-2.68-.177-4.047-.177-1.732 0-3.44.095-5.127.287-1.685.19-3.253.483-4.702.875-1.45.392-2.735.884-3.856 1.476-1.12.593-1.973 1.28-2.556 2.065zm53.976 15.887c.53 1.057.925 2.173 1.19 3.35.264 1.175.396 2.3.396 3.376s-.118 2.16-.355 3.254c-.237 1.094-.58 2.15-1.026 3.172-.446 1.02-.993 1.978-1.64 2.87-.648.894-1.386 1.67-2.215 2.325-.83.656-1.737 1.176-2.72 1.56-.985.382-2.034.573-3.146.573-1.604 0-2.975-.35-4.115-1.053-1.138-.702-2.072-1.618-2.8-2.748-.73-1.13-1.264-2.407-1.6-3.83-.338-1.42-.507-2.86-.507-4.32 0-2.004.3-3.877.902-5.618.602-1.74 1.463-3.254 2.584-4.54 1.12-1.285 2.492-2.296 4.115-3.035 1.622-.738 3.445-1.107 5.468-1.107 1.732 0 3.355.27 4.868.807 1.514.537 2.93 1.257 4.253 2.16 1.32.902 2.552 1.937 3.69 3.103 1.14 1.167 2.202 2.37 3.186 3.61l-.52 3.855c-.492-.656-1.158-1.367-1.996-2.133-.84-.765-1.727-1.513-2.666-2.242-.94-.73-1.864-1.417-2.776-2.064-.91-.647-1.695-1.19-2.35-1.627l-.22.3zm-8.45 15.23c.62 0 1.222-.314 1.806-.943.583-.63 1.093-1.422 1.53-2.38.438-.956.79-2.014 1.054-3.17.264-1.16.396-2.266.396-3.323 0-.84-.064-1.618-.19-2.338-.13-.72-.32-1.345-.576-1.873-.255-.53-.583-.948-.984-1.258-.4-.31-.884-.465-1.45-.465-.747 0-1.457.32-2.132.957-.674.638-1.267 1.454-1.777 2.447-.512.994-.913 2.092-1.204 3.295-.292 1.202-.438 2.36-.438 3.472 0 .766.073 1.486.22 2.16.145.675.372 1.262.682 1.764.31.5.72.902 1.23 1.203.51.3 1.122.45 1.833.45zm17.446-7.492c0 .528-.01 1.043-.027 1.545-.017.5-.026.97-.026 1.408 0 .438.018.835.054 1.19.037.356.114.66.233.916.12.256.283.456.493.602.21.146.497.22.86.22.202 0 .425-.12.67-.357.247-.236.53-.573.85-1.01.318-.438.678-.957 1.08-1.56.4-.6.856-1.257 1.366-1.968-.566-1.312-1.122-2.74-1.67-4.28-.546-1.54-1.084-3.22-1.612-5.044-.037-.11-.055-.2-.055-.273 0-.33.137-.675.41-1.04.274-.364.625-.7 1.053-1.01.428-.31.893-.57 1.394-.78.502-.21.98-.315 1.436-.315.365 0 .68.064.943.19.264.13.46.32.587.576.2.474.52 1.24.957 2.297.438 1.057.94 2.25 1.504 3.582.93-.985 1.96-1.965 3.09-2.94 1.13-.975 2.38-1.92 3.746-2.83.456-.31.884-.53 1.285-.656.4-.13.765-.193 1.093-.193.42 0 .788.087 1.107.26.32.173.588.406.807.697.22.292.383.63.492 1.012.11.383.163.775.163 1.176 0 .583-.118 1.144-.355 1.682-.237.537-.602.96-1.094 1.27-1.422.894-2.766 1.892-4.033 2.995-1.266 1.102-2.474 2.255-3.622 3.458.4.802.807 1.56 1.217 2.27.41.71.806 1.33 1.19 1.86.382.528.75.942 1.107 1.243.355.302.688.452.998.452.4 0 .888-.1 1.463-.3.574-.2 1.184-.47 1.832-.807.647-.337 1.307-.72 1.982-1.15.674-.427 1.317-.878 1.928-1.352.61-.474 1.166-.943 1.668-1.408.5-.465.907-.898 1.216-1.3 0 .603.004 1.15.013 1.642.01.492.014.96.014 1.408 0 .446.004.907.013 1.38.01.475.014 1.003.014 1.587-.6.6-1.376 1.27-2.324 2.01-.948.738-2 1.43-3.158 2.077s-2.393 1.193-3.705 1.64c-1.313.447-2.625.67-3.938.67-.748 0-1.692-.506-2.83-1.518-1.14-1.01-2.366-2.647-3.68-4.908-.783.912-1.53 1.755-2.24 2.53-.712.774-1.377 1.453-1.997 2.037-.62.584-1.203 1.04-1.75 1.368-.547.328-1.048.492-1.504.492-.912 0-1.66-.237-2.243-.71-.583-.475-1.053-1.08-1.408-1.82-.357-.738-.612-1.54-.767-2.406-.155-.865-.25-1.7-.287-2.502l3.992-5.304z"
          fill="none" fill-rule="evenodd" />
      </svg>

      <div class="container" id="click">
        <div class="box">
          <div class="base">
            <div class="side side1"></div>
            <div class="side side2"></div>
          </div>
          <div class="flap flap-q1 initial-position-flap-q1"></div>
          <div class="flap flap-q2 initial-position-flap-q2"></div>
          <div class="flap flap-q3 initial-position-flap-q3"></div>
          <div class="flap flap-q4 initial-position-flap-q4"></div>

          <svg class="cat" xmlns="http://www.w3.org/2000/svg" width="128" height="134" viewBox="226 26 128 134">
            <g id="cat" fill="none" fill-rule="evenodd" transform="translate(226.593 27.888)">
              <path id="Path-2" stroke="#FFF" stroke-width="3" d="M71.8756 105.9024s11.8444 15.8348 23.2808 1.712c11.4363-14.1226 4.6935-32.854 24.832-39.2645"
              />
              <path id="Path-6" fill="#222" stroke="#FFF" d="M38.0203 11.071h17.847s7.8647-23.7233 19.0092 0c11.1445 23.7234 34.965 78.913 4.2513 110.9648 0 0-29.4956 20.133-65.52-1.6676 0 0-32.4445-39.9526 6.1707-110.9092 0 0 9.4127-20.2335 16.3474.0107.502 1.46 1.8942 1.6014 1.8942 1.6014zm-18.008 62.3742s9.3754 9.1424 7.969-4.623m46.5745 4.623s-9.3754 9.1424-7.969-4.623m-35.7972 52.9462s2.8585 12.6052 7.4222-.0193m27.2117.0195s-2.8585 12.6052-7.4223-.0193"
              />
              <ellipse id="Oval-2" cx="29.9487" cy="27.531" fill="#FFF" rx="4.0818" ry="4.0818" />
              <path id="Oval-2-Copy" fill="#FFF" d="M42.476 14.5754c1.503 0 2.7212-1.2183 2.7212-2.7212 0-1.5028-.914-.9196-2.4168-.9196-1.503 0-3.0256-.5832-3.0256.9196 0 1.503 1.2183 2.7212 2.7212 2.7212z"
              />
              <ellipse id="Oval-2" cx="63.283" cy="27.531" fill="#FFF" rx="4.0818" ry="4.0818" />
              <path id="Path-8" stroke="#FFF" d="M42.993 36.0905s-13.9064.124-17.4205 4.628" />
              <path id="Path-8-Copy-2" stroke="#FFF" d="M49.6972 36.0905s13.9065.124 17.4206 4.628" />
              <path id="Path-8-Copy" stroke="#FFF" d="M40.287 38.939s-13.522 3.249-15.933 8.428" />
              <path id="Path-8-Copy-3" stroke="#FFF" d="M52.1396 39.5144s13.7158 2.298 16.482 7.2962" />
              <path id="Oval-2-Copy-2" fill="#FFF" d="M50.6663 14.5754c1.5028 0 2.7212-1.2183 2.7212-2.7212 0-1.5028-1.1153-.9196-2.618-.9196-1.503 0-2.8244-.5832-2.8244.9196 0 1.503 1.2185 2.7212 2.7214 2.7212z"
              />
              <path id="Path-7" stroke="#FFF" d="M42.3353 31.9733s4.4626 2.0155 4.4626-5.3116c0 0-.937 5.1355 3.986 5.1355" />
            </g>
          </svg>

        </div>
      </div>
    </div>

    <button class="button">Toggle the
      <span role="img" aria-label=“kitty”>🐱</span>
    </button>

  </div>
            
          
!
            
              body {
  background-color: #222222;
}

.container {
  display: block;
  height: auto;
  margin: 0 auto;
  width: 227px;
  z-index: 50;
}

.padding {
  padding: 20vh 2rem 0 2rem;
}

.titleLogo {
  display: block;
  margin: 0 auto 6rem auto;
  padding-left: 1rem;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#morph {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: offset 4s forwards ease-in-out;
}

@keyframes offset {
  from {
    fill: transparent;
  }
  to {
    fill: white;
    stroke-dashoffset: 0;
  }
}

.cat {
  left: 15px;
  bottom: -25px;
  position: relative;
  margin: 0 auto 7rem auto;
  transition: all 0.5s ease;
  width: 227px;
  z-index: 2;
}

.toggle-cat {
  transform: translateY(-80px);
}

.box {
  position: relative;
}

.side {
  border: 1px solid white;
  background-color: #222222;
  height: 100.51px;
  width: 82.91px;
  position: absolute;
  top: 50px;
  z-index: 3;
}

.side1 {
  transform: skewY(25deg);
  left: 30px;
}

.side2 {
  transform: skewY(-25deg);
  right: 30px;
}

.flap {
  background-color: #222222;
  height: 66.58px;
  border: 1px solid white;
  position: absolute;
  transition: all 1s ease;
  width: 100.43px;
}

.flap-q1 {
  top: -55px;
  left: 25px;
  transform-origin: bottom;
  z-index: 2;
}

.flap-q2 {
  top: -58px;
  right: 20px;
  z-index: 1;
  transform-origin: bottom center;
}

.flap-q3 {
  top: 51px;
  transform-origin: top;
  right: 21px;
  z-index: 5;
}

.flap-q4 {
  top: 50px;
  transform-origin: top;
  left: 21px;
  z-index: 5;
}

/* flap-q1 */
.initial-position-flap-q1 {
  transform: rotate3d(0, 0, 1, -30deg) rotate3d(0, 1, 0, 33deg) rotate3d(1, 0, 0, -130deg)
  translate(0px, 12px);
}

.ending-flap-q1 {
  transform: rotate3d(0, 0, 1, -25deg) rotate3d(0, 1, 0, 25deg) rotate3d(1, 0, 0, 40deg);
}

/* flap-q2 */
.initial-position-flap-q2 {
  transform: rotate3d(0, 0, 1, 25deg) rotate3d(0, 1, 0, -25deg) rotate3d(1, 0, 0, -140deg);
}

.ending-flap-q2 {
  transform: rotate3d(0, 0, 1, 25deg) rotate3d(0, 1, 0, -25deg) rotate3d(1, 0, 0, 40deg);
}

/* flap-q3 */
.initial-position-flap-q3 {
  transform: rotate3d(0, 0, 1, -25deg) rotate3d(0, 1, 0, 25deg) rotate3d(1, 0, 0, 240deg);
  z-index: 20;
}

.ending-flap-q3 {
  transform: rotate3d(0, 0, 1, -25deg) rotate3d(0, 1, 0, 25deg) rotate3d(1, 0, 0, 15deg);
  z-index: 20;
}

/* flap-q4 */
.initial-position-flap-q4 {
  transform: rotate3d(0, 0, 1, 25deg) rotate3d(0, 1, 0, -25deg) rotate3d(1, 0, 0, 240deg);
  z-index: 20;
}

.ending-flap-q4 {
  transform: rotate3d(0, 0, 1, 25deg) rotate3d(0, 1, 0, -25deg) rotate3d(1, 0, 0, 40deg);
  z-index: 20;
}

.button {
  background-color: transparent;
  color: white;
  display: block;
  margin: 0 auto;
  padding: 1rem;
  width: 250px;
}

.button:hover {
  background-color: white;
  color: black;
}
            
          
!
            
              document.addEventListener('DOMContentLoaded', function() {
  var button = document.querySelector('.button')
  var flap1DOM = document.querySelector('.flap-q1'),
    flap2DOM = document.querySelector('.flap-q2'),
    flap3DOM = document.querySelector('.flap-q3'),
    flap4DOM = document.querySelector('.flap-q4')
  var cat = document.querySelector('.cat')

  button.addEventListener('click', () => {
    cat.classList.toggle('toggle-cat')

    var flap1 = flap1DOM.classList
    var flap2 = flap2DOM.classList
    var flap3 = flap3DOM.classList
    var flap4 = flap4DOM.classList

    var flaps = [flap1, flap2, flap3, flap4]

    var index = flaps.length

    flaps.map((flap, index) => {
      flap.toggle(`ending-flap-q${index + 1}`)
    })
  })
})
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console