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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="album">
	<svg id="andy-warhol" viewBox="0 0 500 500">
		<path d="M277 419l-1 7 4-5c0-2 2-3 3-2 2 1 1 2 1 3 2 5-2 7-3 11l-4 6c-1 1-2 2-4 1s-2-3-1-5l6-6c-3 0-6 3-6-2-1-5 2-8 5-8zm-35 2c-6 0-5 4-6 7s0 3-2 4c-2 0-3-2-4-4v-1c-3-5-3-5-7-1-5 5-10 9-18 8-1 0-3 0-2-2s1-3 3-2c7 2 11-2 15-6 6-6 9-14 14-22 1-1 2-5 5-4 3 2 2 5 2 8l-3 11c-1 3-2 4 3 4zm7 1c-3 3-3 5-4 7s-2 3-4 3v-4l1-4c1-2 1-6 5-3l2-1h3l1 9a3 3 0 0 1-4 2l-1-4 1-5zm21 5c-2 2-3 5-7 2-1-2-1 0-2 0 0 1-2 2-4 1s-2-3-1-5c0-3 3-6 7-6 2 0 3-1 3-2l4-13 2-3 3-1v3l-7 21c-1 3 0 3 2 3zm122-3c3-4 3-8 4-12 2-4 4-9 7-12 1-1 1-3 3-2s2 2 2 4c-1 5-3 10-7 14-2 3-4 7-4 11 1 1 2-2 3 0s-1 2-3 3c-1 0-3 2-5-1v-5zm-1 0c-2 5-5 7-9 6-2 0-4-3-3-5 0-2 2-5 5-6 3 0 6 1 7 5zm-27-2l6-18 2-3c1-1 2-2 4-1 1 1 0 2-1 3l-6 17c3 0 4-3 6-1s1 4 0 5v2s3 0 1 2c-3 2-3 3-5 2l-1-5v-1l-3 4c-1 2-2 2-3 2-2-1-1-2-1-3 0-2 2-4 1-5zm-53 4c5-4 7-10 10-15l4-12c1-1 2-3 4-2 2 0 1 2 1 4l-5 19c0 2-1 5 1 6 3 1 3-2 5-3 5-6 8-14 9-22l3-4c3 0 3 0 2 3-3 9-7 19-14 26-2 3-4 5-8 3-3-1-3-5-2-8v-6l-5 8-3 5c-2 1-3 2-5 1l-2-4c0-6 3-12 4-17l1-9c-3 1-3 4-4 6l-2 3c-2-1-3-2-2-4 1-3 3-5 5-6 2-3 6-2 7 2 1 3 0 6-1 9-1 6-3 11-3 17zm53-4c-3 2-7 3-8 7h-1c-2-2-5 1-7 0h-7c-2 1-3 0-3-2s1-6 4-8c3-1 6-2 9 0 2 0 0 2 0 3-1 2-2 3 1 4 2 1 2-1 2-2 1-1 1-6 4-5 3 0 5-1 6 3zm22-1c-3 1-3 4-3 7 3-2 4-4 3-7zm-122 1l-1-1c-2 1-3 3-3 5-1 2 0 2 1 1s3-3 3-5zm82-2c-2 2-4 3-3 6 2-1 3-3 3-6zm45 4v-1l1 1h-1zm-154-21l-8 14c-1 1-3 3 0 3 3 1 4 2 5-1 1-5 3-10 3-16z" fill="#161413"/>
</svg>
	<svg id="peel" viewBox="0 0 500 500">
    <path d="M373.6 56.4v7.2l-5.2-3.5 5.2-3.7z"/>
    <g fill-rule="nonzero"><path d="M378.2 60.9h.7c0 .2 0 .4.2.6l.5.4.8.1.6-.1c.2 0 .4-.2.5-.3l.1-.4-.1-.5a1 1 0 0 0-.5-.3l-.9-.2-1-.3-.5-.5-.2-.6c0-.3.1-.5.3-.7.1-.2.3-.4.6-.5l1-.2c.3 0 .6 0 .9.2a1.4 1.4 0 0 1 1 1.3h-.7a1 1 0 0 0-.4-.7l-.9-.2c-.4 0-.7 0-.8.2-.2.2-.3.3-.3.5s0 .4.2.5l1 .3 1.1.4.7.5.2.7c0 .3-.1.5-.3.8-.1.2-.3.4-.6.5l-1 .2c-.5 0-.8 0-1.1-.2-.4-.1-.6-.3-.8-.6l-.3-.9zM386.8 60.8l.6.1c-.1.6-.4 1-.7 1.3a2 2 0 0 1-1.4.4c-.5 0-1-.1-1.3-.3a2 2 0 0 1-.8-1 3.4 3.4 0 0 1 0-2.7c.3-.4.6-.7 1-.9.3-.2.7-.3 1.2-.3s.9.1 1.2.4c.4.2.6.6.7 1l-.6.2-.5-.8-.9-.2c-.3 0-.7 0-1 .2l-.5.8a3 3 0 0 0-.1 1c0 .4 0 .8.2 1 0 .4.3.6.5.8.3.2.6.2.9.2.4 0 .7 0 1-.3.2-.2.4-.5.5-1zM388.3 62.5v-5h2.2l1 .1c.3.1.4.3.6.5l.2.8c0 .3-.1.6-.4.9-.2.2-.5.4-1 .4l.4.3.5.7.9 1.3h-.8l-.7-1-.5-.7-.3-.4a1 1 0 0 0-.3 0l-.4-.1h-.8v2.2h-.6zm.6-2.8h2.2l.4-.4.1-.4c0-.3 0-.5-.3-.6-.1-.2-.4-.3-.8-.3H389v1.7zM393.1 60c0-.8.3-1.4.7-1.9.5-.5 1-.7 1.7-.7.5 0 1 .1 1.3.3.4.2.7.6.9 1 .2.4.3.8.3 1.3s-.2 1-.4 1.4c-.2.4-.5.7-.8.9a2.5 2.5 0 0 1-2.5 0c-.4-.3-.7-.6-.9-1l-.3-1.2zm.7 0c0 .7.2 1.2.5 1.5.3.4.7.5 1.2.5s1-.1 1.3-.5c.3-.3.5-.8.5-1.5l-.2-1a1.6 1.6 0 0 0-1.6-1c-.4 0-.8.1-1.2.5-.3.3-.5.8-.5 1.6zM398.8 62.5v-5h.7v4.4h2.4v.6h-3.1zM402.7 62.5v-5h.7v4.4h2.4v.6h-3.1zM408.1 60.9h.6l.2.6.6.4.7.1.7-.1c.2 0 .3-.2.4-.3l.2-.4c0-.2 0-.3-.2-.5a1 1 0 0 0-.4-.3l-1-.2-.9-.3-.5-.5-.2-.6c0-.3 0-.5.2-.7l.7-.5.9-.2c.3 0 .7 0 1 .2a1.4 1.4 0 0 1 .9 1.3h-.7a1 1 0 0 0-.3-.7l-.9-.2c-.4 0-.7 0-.9.2-.2.2-.3.3-.3.5l.2.5 1 .3 1.2.4c.3.1.5.3.6.5.2.2.2.4.2.7 0 .3 0 .5-.2.8l-.7.5-1 .2c-.4 0-.8 0-1-.2-.4-.1-.6-.3-.8-.6l-.3-.9zM413 62.5v-5h.7v4.4h2.5v.6H413zM416.7 60c0-.8.3-1.4.7-1.9.5-.5 1-.7 1.8-.7l1.2.3c.4.2.7.6.9 1 .2.4.3.8.3 1.3s-.1 1-.3 1.4c-.3.4-.5.7-1 .9a2.5 2.5 0 0 1-2.4 0c-.4-.3-.7-.6-.9-1l-.3-1.2zm.7 0c0 .7.2 1.2.5 1.5.3.4.8.5 1.2.5.6 0 1-.1 1.3-.5.3-.3.5-.8.5-1.5l-.2-1a1.6 1.6 0 0 0-1.5-1c-.5 0-1 .1-1.3.5-.3.3-.5.8-.5 1.6zM423.3 62.5l-1.3-5h.6l.8 3.3.2 1 .3-1 1-3.3h.7l.7 2.5c.2.7.4 1.3.4 1.8l.3-1 .8-3.3h.6l-1.3 5h-.7l-1-3.8-.2-.6-.2.6-1 3.8h-.7zM429 62.5v-5h.7v4.4h2.5v.6H429zM433.9 62.5v-2.1l-2-3h.8l1 1.6.6.9.5-1 1-1.4h.8l-2 2.9v2.1h-.7zM438 62.5l2-5h.7l2 5h-.7l-.6-1.5h-2.1l-.6 1.5h-.7zm1.5-2h1.7l-.5-1.4-.4-1-.3.9-.5 1.5zM443.3 62.5v-5h.7l2.6 4v-4h.6v5h-.6l-2.7-4v4h-.6zM448.4 62.5v-5h2.6l.7.4c.3.2.5.5.6.9.2.3.2.7.2 1.2l-.1 1c0 .3-.2.5-.3.7l-.5.5-.6.2-.8.1h-1.8zm.6-.6H451l.4-.3.4-.7.1-1c0-.5 0-.9-.2-1.2l-.6-.5-.9-.1h-1v3.8zM455.2 60.9h.6l.2.6.5.4.8.1.7-.1c.2 0 .3-.2.4-.3l.2-.4c0-.2 0-.3-.2-.5a1 1 0 0 0-.4-.3l-1-.2-1-.3-.4-.5c-.2-.2-.2-.4-.2-.6 0-.3 0-.5.2-.7.1-.2.3-.4.6-.5l1-.2c.3 0 .7 0 1 .2a1.4 1.4 0 0 1 .8 1.3h-.6a1 1 0 0 0-.3-.7l-1-.2c-.3 0-.6 0-.8.2-.2.2-.3.3-.3.5s0 .4.2.5l1 .3 1.1.4.7.5.2.7c0 .3 0 .5-.2.8l-.7.5-1 .2c-.4 0-.8 0-1.1-.2-.3-.1-.6-.3-.7-.6l-.3-.9zM460.1 62.5v-5h3.7v.6h-3v1.5h2.8v.6h-2.8V62h3v.6h-3.7zM464.8 62.5v-5h3.7v.6h-3v1.5h2.8v.6h-2.8V62h3v.6h-3.7z"/></g>
    </svg>
	<svg id="peeled" viewBox="0 0 500 500">
  <g fill-rule="nonzero">
    <path d="M220 380l-7 4c-13 6-25 12-39 17-14 4-29 6-44 3-10-2-18-9-19-17-2-7 0-16 4-24 4-7 13-15 21-21 18-14 37-26 56-39 10-7 20-13 29-21a325 325 0 0 0 95-139l13-33c3-6 8-12 15-16 11-5 25-2 33 8 10 12 15 27 16 43 4 34-6 65-22 94-11 19-23 36-37 52l-14 16-26 23c-15 13-32 25-49 36l-25 14z" fill="#f9a789"/>
    <path d="M268 321c0-1 0 0 0 0h1c1 1 2 4 5 1l-13 12-14 10-4 3c-4 4-11 5-15 9l-15 9-26 13c-2 1-2 2-1 4l4 5 1 1c-1 1 1 3-1 2-3 0-4 0-4-2s-1-3-3-3h-1l1-1v1-1c0-1 0-4-3-2l-21 9c-2 1-3 2-2 3 1 2 1 4 3 4 2 1 5 0 6-3 3 4 2 5-3 6l-15 2c-2 0-4 0-4-2 0-3-2-3-3-3-2 0 0 2-1 2l-2 2c-2 1-2-1-3-2-1 3-4 1-6 1-3-1-7-3-9-6l-1-1c2-3-2-4-3-6-2-2-1-5 0-8 5-15 15-27 29-35l17-13 15-9 16-12h1l1 1v-2l17-12 8-6a353 353 0 0 0 75-87c7-10 12-22 16-34l19-50c3-8 9-13 16-16 3-1 4 0 5 2s2 4-1 5-2 3-2 4c-1 1 1 1 1 1h2l-1 2c-5 1-6 6-7 10l-1 4c0 1-4 2-1 4l4 4v1c-3-2-7 1-10-1h-2a1 1 0 0 0-1 2c1 1 2 2 0 3v8h4l1-5c0-2 1-4-2-4 3-3 5 0 7 0-2 3 0 7 3 9-2 1-4 1-3 4 1 2 1 4 3 5-1 2-3 1-4 2 3 1 3 5 0 7-2 1-1-1-2-1-2 0-4-3-5-1s3 1 4 2c1 0 2 0 2 3-1 2 1 0 1 1-3 1-4 2-1 5h-5l1 2c1 0 3 2 0 3v2s1 4-3 3c-3-1-3 1-1 4-2 2-4-1-6 0-1 2 2 3 1 5s-4-2-6 1c-1 4 2 2 2 3-3 1-10 13-9 16-1 1-2-1-3-1 0 3 0 6-4 6 1 2-1 5-1 6 1 1 1 2-1 3l-4 5-7 9c-1 1-2-2-3 0 0 3-1 6-5 8s-8 7-12 10c-2 2-2 2-2 0-1-2-3-3-6-3 3 2 2 4 1 5-2 2-3 2-5 1s-2 1-3 2l2 1a1 1 0 0 1 1 1c1 1-1 1-2 1 0 1-2 1-2 3l2 1 2-2c2 3-1 4-2 6h-2l-1-2c1-1-1-2-2-4 0 3-3 4-4 6-2 2-2 0-3-1l-2 1 1 1c1 0 2 2 1 3v2h2c1-1 2-2 3-1 1 2-1 2-2 3h-8c-1 2-1 3 1 3 2 1 0 1 0 2l-4 2c2-3-1-3-2-4-2-2-2 0-4 1v4c-1-1-5-1-4-5h-5c3 0 4 2 4 4-1 2-3 0-5 0-1 1 3 1 2 3-2 2-4 3-7 2v4c0 2 0 3-1 2-2-1-2 0-3 1 0 1-1 2-2 0-2-2-3 0-3 0 3 4-3 4-2 7-3-1-3-5-8-6 3 3 1 6 3 9l-1 1c-3 0-5 1-6 4-2 3-3 0-4-1l-3-3c1 3-1 5 1 7 1 2 0 2-1 2l-2-1-1-4-4 10c-2 0-2-2-3-3l-2-1v3l1 3c-2 1-2-2-4-1 1 4 1 4 5 2l22-14 6-3c0 2-1 3-2 3-5 3-9 5-13 9-1 1-2 3-4 3s-4 1-4 4l-4 2c-1 0-5-1-4 3-4 0-3 2-3 4l-3-1h-4c-1 1 0 3 1 4v2h-2c-3-1-6 1-6 5l-2-2c-1 0-4 6-2 9l1 2c-2-5-6-5-10-5h-1l1 1 1 4c-2-3-4-1-6-1 2 3-4 1-3 4 2 3 2 4 5 5-2 2-3 2-4 0s-1-4-3-3c-3 2-3 1-2 3 0 1-1 4 2 4 1-1 1 0 1 1 0 3 0 6 2 9 1 3 2 4 5 4l-3-9v-3l3 1c1 1 3 1 3 4v1c3-1 5 2 8 3-1-4-3-6-7-8 3 0 4 0 6 3l5 2h1c-1-2 0-2 2-1l5-2c-1-2-4-2-6-5 3 2 7 2 9 4s3 0 4 0l2-2-2-1-1-2v-1 1c2 1 5-1 6 1l2-1c1-1-1-1-1-3 2-1 5 1 5-3l2-1c3 3 7 3 10-1l6-2c2-1 2-3 2-5 2 1 4 2 5 1 1-2-1-3-1-6 3 5 6 3 9 2s4-3 1-6h3c2 2 9-1 9-3 1-2-1-1-1-2l-3-4 5 2c3 2 5 1 7 0 2-2 0-4 0-6v-1l1 1c2 5 6 3 7 1s4-3 6-4c2-2 3-4 1-7l-1-1c1-1 3 2 4 1 2 0 1 0 1 1 0 0-3 0-1 2 3 1 3-1 3-3 0-1 1-2 3-2 5-2 6-3 6-8h-1zm-115 73c0 1-2 2 0 3a1 1 0 0 0 2 0c1-2-2-2-2-3zm21 1v1h-6c-2-2 0-1 0-2 3-1 4 1 6 1zm-9 0v-1-1 2h1-1zm-28-1v-2c-3-4-5-8-6-13 0-2-1-4-3-4-1 7 3 12 4 19 2-4 3-3 5 0zm28-3v-1 1zm27-5l-1-4c3 2 6 0 9-1-1 3-5 7-8 6l-1 1-1-1 2-1zm13-1l-4-5c1-1 3 1 4-1s2 0 2 0v2l-2 4zm11-4c-5 0-7-4-9-9 3 2 4 4 7 3l1 2c0 1 0 3 2 4h-1zm-76-3h-1v-1l1 1zm125-37v-2l7-3v5c0-1 0-2-2-2v1l1 1c1 0 1 4-1 4s-4 0-3-3l-2-1c-1 4-2 8-7 8l-2 1c-1 5-6 6-10 8l-2 1c0 2-5 1-3 5h-8c-2 5-7 5-10 8-1 2-3 1-4-1-1-1 1-2 2-2l10-6 15-11c3-2 6-5 10-5l2-1c0-5 4-4 7-5zm-121 17c3 0 5-1 5-3l-1-1c-2 0-3 2-4 4zm9-8c0 2-3 0-3 2a2 2 0 0 0 1 2c2 0 3-2 2-4zm11-5h-4c-2-1-2 2-4 2l1 2c2 1 3 0 4-1l3-3zm63 0c-2 0-2-2-2-3 2 1 1 2 2 3zm-62-7c1 8 1 8 6 5l2-2c1 0 2-1 1-2-1 0-2-4-5-4v8l-4-5zm107-1v-5c4 2 6-2 8-4 1 0 1-1-1-2v-2l3-1 1 2h-1l-1 1 1 1 1-1 1-1c3-1 4-3 2-6l1 1c2 2 3 2 4-1l11-10 14-12c4-5 8-6 9-11 0-1 1-2 3-2l1 1v4l-3 3c-1 2-3 0-5 2-1 2-2 1-1 3 0 2 0 4-3 2-3-1-2 2-2 2 2 4-1 5-3 7l-9 10-7 5c-1-1-3 4-3 0h-2c-1 4-7 4-4 10l-3-4c-2 0-3 2-2 4 0 2 1 3-1 3-2 1 0-1 0-2s-1-2-2-1c-1 0-3 0-3 2-1 1 1 0 1 1 3 2 1 3 0 5-2-1-2-5-5-4zm-33 3h-1 1zm33-22c5 2 7-1 9-2l9-7-14 12c-2 2-2-1-4-3zm-75 1c2-2 1-4 0-5a1 1 0 0 0-1-1c-2 2 1 3 0 4l1 2zm19-5l5-3-5 4c-1 1-1 2-3 1l3-2zm7-5l-1 4c0-2-3-3 1-4zm0 0l9-7c1-1 3-2 2-4 2 1 2-1 4-3-2 5 3 6 3 9-2-3-4-2-6-2-3 0-5 2-6 4-1 3-4 2-6 3zm70-3l-1 2v-2h1zm10-10l2-1-2 2-7 8-1-1c3-2 3-7 8-8zm4-3c0-2 1-4 4-4l-4 4zm6-7c3-2 3-5-1-6l9-2c-1 4-5 6-8 9l-1 1h-1l2-2zm25-10c-2-3 1-5 1-7s3-4 5-5c1 6-2 9-6 12h-1l-2 5c-1 1-3 1-3 4-3-4-3-4 0-6l1-2c1-3 3-2 5-1zm-17 2c2-4 3-8 7-10-2 3-3 7-7 10zm11-16c0 2-2 3-3 5 1-2 1-4 3-5zm17-8c2-1 4-1 3-4-1-1 0-2 1-3l3 1v3c-3 2-4 5-5 8s-4 4-6 7l-1-2c-1-3 1-5 4-6l1-4zm-59-20v6l-11 14-1 1c-3-1-3 2-4 4l-1 2c-1 1-2-1-2 1l1 2 3-2 13-14c11-12 20-27 27-42 2-4 1-8 1-11 0-2-2-3-3-2-2 0 0 2-1 2-1 2 4 6-1 7v1l-1 2c-3 2-4 5-4 8l-1 2c-3 2-4 6-5 10l-1 1c-3 2-4 4-5 7 0 2-1 3-4 1zm44 25c0-2 2-3 3-4 0 2-2 3-3 4v1c0 1 0 2-2 2l2-2v-1zm3-4l3-5v-2h-2l-1 2c-1 3-2 2-3 0l-2-2 3-1c3 1 2-2 2-4 1-1 0-3 3-4l2 1c-1 2 1 1 2 2l3-4c0-2-2-2-3-1l-2-2c-1-1 0-1 1-1 0 0 2-2 3 0h4c-3 7-6 14-12 20l-1 1zm12-1zm0 0zm0 0c-2 0-3-1-4-3 2 1 3 0 4-1v4zm5-12c4 0 4-4 5-6 2-2 1-2 2-1 2 0 1 1 1 2s1 4-1 6c-1 2-2 4-5 1l-2-2v-1c-2 0-2-1-3-2 2 0 3 1 3 2v1zm14-8c-6-3-6-3-3-8l2-4c1-1 1-2 2-1 2 1 3 1 2 2 0 2-1 2-2 1h-1c2 4-3 6 0 10zm-5-27c-3 8-6 16-11 23 4-8 6-16 11-23zm-14 13l3 2-1 1c-1 0-3 0-3-2l1-1zm28-6c-3 2-4 3-4 5-1 3-2-1-3-1-2 1-1-1-1-1 3 1-1-5 3-3h5zm-32-5c4 1 9 0 12 6-5-1-8-4-12-6zm30-7c2 1 4-2 5 1l-2 2-3-3zm-57-1c3-5 3-5-1-7 1 2-1 4 1 7zm68-12l-1-2h-1c-1 0-2 1-1 2 0 1 0 4 2 5l-5 2-2-1c2-1 0-5 2-6 3-1 3-2 1-3-2-2 1-3 1-5l2 1c5 0 3 2 2 5v2zm-69-2l1 2c1 4 1 5 4 2 4-4-1-3 0-4 1 0 4 2 3-2-1-1-2-6 3-5 0 0 1 1 2-1-4-1-2-6-6-8 2 2-1 3 0 5l1 1 1 1c-1 1-2 0-2-1h-1c-2 0 0 2-1 3-2 2-2 5 0 7h-5zm68-15l1 3c2 0 2 1 2 2 0 2-2 1-3 1-1 1-3 0-3-1 0-2-1-3 1-4l1-1s-2-2 0-2c3 0 0 2 1 2zm-3-3l-1 1-2-2h1c1-1 2 0 2 1zm4-1l-2-2c-1-1 0-1 1-1l2 2c0 2-1 1-1 1zm-13-20c2 4 0 7 1 10-2-3-2-6-1-10zm-23-8l4 3 2 3c2 2 2 3 1 5h-1l-7-10 1-1zm24 4c-3-2-2-5-2-8 2 2 1 5 2 8zm-39-9l3-1c-2-3 2-4 1-7v-4l-1-2h-3a2 2 0 0 0 0 3c3 3 0 7 0 11zm19-31l8 3 2 1-2 4-2-2c-3-1-5-4-6-6z" fill="#f41235"/>
  </g>
</svg>
	<svg id="unpeeled" viewBox="0 0 500 500">
		<path d="M244 378l-25 14c-12 7-24 13-38 17-19 6-39 12-60 10-5 0-10 0-15 2-9 2-14-3-20-8l-7-3c-3 0-4-2-3-6 2-5 7-7 10-10 7-6 13-11 17-19 8-16 21-28 36-38l61-43a281 281 0 0 0 103-131c8-19 18-37 23-57l5-9c4-5 4-10 1-16-7-14-14-27-24-39l-7-7c-3-2-5-7-4-12 0-2 1-4 3-5 2 0 1 3 2 3 2 0 3 5 4 0l1-1c4 4 12 1 16 8 1 2 6 3 9 3l6 4 14 25c-1 0 4 3 4 6 5 2 7 7 11 9v1c7 5 15 8 20 16 5 3 8 9 10 15a368 368 0 0 1 9 29c3 8 3 17 2 26-1 3 1 6-3 9 1 4 1 8-1 12-3 15-9 29-16 42v-3 4c-7 19-18 35-30 51l-8 9c0 1 0 1 0 0l-1 3c-20 23-42 44-67 62l-38 27z" fill-rule="nonzero"/>
		<path d="M281 352c-3-2-5 5-9 1 6-4-2-7 0-11h-2l-3 3c-8 12-19 19-32 23-3 2-9 5-10 1-2-3 2-7 5-11h1c2-2 6-5 2-9-1-2-1-4 1-5s3-2 2-4h-4c-1 2-1 0-1 0-5 1-5-5-8-7-2 3 3 6-1 10-7 6-14 10-22 14-1 0-7 1-1 3l1 1c1 6-2 8-8 7-3-1-4-1-5 2s-4 7-9 5c-3-1-7 1-7 6s-5 8-9 7-8 4-13 4v1c4 7-1 4-3 3h-4c-2 1 2 2 0 4-1-1-4 0-6 2l-8 4v2c3 2 3 7 7 5l2 2-1 1c-4 0-9 1-12-2-4-5-11-5-15-10h-3l2-4c3 0 4-3 5-6v-2c-1-1-1 0-2 1-1 4-4 0-6 0l-1-3c1-2 3-6 7-5l5-2c5-5 11-8 17-10 24-12 48-23 72-37l19-11 24-16 8-6c-4 0-8-1-10-3 3 5 3 7-3 10-11 4-20 11-29 17-2 1-4 4-7 3-5-1-7 2-9 5l-5 4-24 11c-3 1-7 4-12 3 5-8 13-10 20-15 4-2 8-3 11-6 6-7 15-11 23-16 7-5 12-11 20-14 2 0 4-3 5-5l6-5c4-3 9-5 12-9l8-9 13-13c5-5 8-12 13-18 2-2 5-4 5-6a71 71 0 0 1 9-23l-1-2-4 4c-2 4-4 5-8 1-3-4-3 0-4 2-2 3-4-1-6-1-2-1-1-3 0-4 7-6 11-15 15-23 2-2 2-3 4-1s3 3 2 5-2 3 1 3c2 0 4 3 4 5l4-4c4-6 7-13 9-19 1-7 4-8 7-10 4-2 6-5 5-8-1-8 6-14 5-22-1-2 3-6 1-7-3-1-2 4-3 5l-13 29c-2 3-1 7-7 6-4 0-5 3-2 6 3 4 1 5 1 8 0 2-2 3-4 2l-10-5 8-20 7-16c5-11 11-22 14-35 1-4 2-8 5-11 1-2 4-5 7-4 3 0 0 4 1 6h2c3-6 2-13 7-18-1 0 1-3-1-3-2 1-1 0-2-1-1-6 2-11 0-17-1-1-1-3 1-3 1-1 1 0 2 1l3 1c1-1-2-3 0-4 2 2 4 3 4 6 1 5 5 8 9 11 1 1 2 0 2-1 7 5 15 8 20 16-4 1-2 4 0 4 7 4 7 12 11 19-5-3-7-2-9 0 0 3 3 2 2 5v2h3c3-4 4 0 7 1 2 1 1 8 5 10v3l-1 35c1 4 1 8-1 12-5 6-6 13-9 20l-4 12c-2 4-4 6-3 10v1l-4 6c-4 9-9 18-15 26-7 8-9 13-12 20l-7 8-2 1-29 31c-11 9-21 20-33 28-3 1-4 3-5 6zm-111 57l3-5c1-1 1-3 3-2s0 2 0 4l10-2c-5 3-10 5-16 5zm31-11c-3 4-7 5-11 2 4 1 7-5 11-2zm12-6c3-2 5-4 9-4-3 2-5 4-9 4zm33-16c-2 0-3 0-2 2l-7 3c0-8 7-6 10-10 3 3-1 3-1 5zm0 0h0zm-34-73l6-2-6 2c-6 5-10 11-18 14 0-5 4-10 9-12l9-2zm58-9l12-6c14-10 25-24 38-36 1-1 4-1 2-3-1-3-2-4-5-5s-6 1-8 5c-3 8-7 9-14 3 0 5 5 5 6 7-7 13-24 19-31 35zm-14-26c0-3-1-5 1-6 1-2 6-4 8-8l1 1 1 1c-4 4-6 9-11 12zm102-12l8-7c4-3 5-7 6-11 0-1 3-2 1-3-3-2-3 0-4 1l-6 10c-2 3-5 5-5 10zm-88-8c2-3 4-5 8-7-4 6-4 6-8 7zm90-66c1 3-3 6-2 10l-4 2v-4l2-4c0-2 1-4-1-5s-2 2-4 2-2 3-2 4c4 3 2 6 1 9 0 1 0 2-2 3-3 1 0-5-4-4l1-2c3-2 1-3 0-4h-4c1 7-6 9-7 14l-7 14c-2 4-3 7-2 11 1 2 0 6-2 5-4-1-6 3-9 3l-2 2c0 2 2 2 3 2 1-1 5 0 7 2l2 5c4 0 1-3 2-4 5 2 6-3 7-5 5-5 11-9 13-16 1-3-1-6 1-9 5-6 8-14 12-21l5-9c2-3-3-4-1-6h-2l-1 5zm-54 52c-3 2-8 1-10 6 0 2 2 3 4 3 4-1 8-2 9-6 1-2-1-3-3-3zm85-38c5-4-4-10 3-14-3 1-4 1-5-3l-2-8c-3 7-4 10-1 15 0 1 1 3-1 4-2 0-3 0-3 2 8 0 8 0 9 4zm-2-34c0-3 2-7 1-9-2-4 2-4 3-6l6 5 1 2c2 0 1-1 2-2v-5c1-5-7-7-4-12l-1-2c-3 2-5-1-7-2-8-4-9-4-5-11-10-8-8 6-13 6 1 3 5 4 2 7-2 3-1 6-1 9-1 2 1 7-5 7-2 0-4 8-2 9s3 0 2 2a3 3 0 0 1-4 1c-1 0-2-2-3 0 1 3-4 7 0 11 1-1 1-5 5-2l5-7c3-7 8-9 13-8 5 2 2 5 5 7zm-14-12c1-3 1-7 5-8 2 0 5 3 4 5-1 4-6 2-9 3zm-20-39c-1 3 5 9 8 8l3-1-2-2c-3-1-2-4-2-5 0-4-3-5-5-7-2 2-3 4-2 7z" fill="#fae525" fill-rule="nonzero"/>
	</svg>
	<svg id="fold" viewBox="0 0 500 500">
			 <path d="M244 122l-25-14c-12-7-24-13-38-17-19-6-39-12-60-10-5 0-10 0-15-2-9-2-14 3-20 8l-7 3c-3 0-4 2-3 6 2 5 7 7 10 10 7 6 13 11 17 19 8 16 21 28 36 38l61 43c47 32 83 78 103 131 8 19 18 37 23 57l5 9c4 5 4 10 1 16-7 14-14 27-24 39l-7 7c-3 2-5 7-4 12 0 2 1 4 3 5 2 0 1-3 2-3 2 0 3-5 4 0l1 1c4-4 12-1 16-8 1-2 6-3 9-3l6-4 14-25c-1 0 4-3 4-6 5-2 7-7 11-9v-1c7-5 15-8 20-16 5-3 8-9 10-15l9-29c3-8 3-17 2-26-1-3 1-6-3-9 1-4 1-8-1-12-3-15-9-29-16-42v3-4c-7-19-18-35-30-51l-8-9c0-1 0-1 0 0l-1-3c-20-23-42-44-67-62l-38-27z" fill-rule="nonzero"/>
		<path d="M281 148c-3 2-5-5-9-1 6 4-2 7 0 11h-2l-3-3c-8-12-19-19-32-23-3-2-9-5-10-1-2 3 2 7 5 11h1c2 2 6 5 2 9-1 2-1 4 1 5s3 2 2 4h-4c-1-2-1 0-1 0-5-1-5 5-8 7-2-3 3-6-1-10-7-6-14-10-22-14-1 0-7-1-1-3l1-1c1-6-2-8-8-7-3 1-4 1-5-2s-4-7-9-5c-3 1-7-1-7-6s-5-8-9-7-8-4-13-4v-1c4-7-1-4-3-3h-4c-2-1 2-2 0-4-1 1-4 0-6-2l-8-4v-2c3-2 3-7 7-5l2-2-1-1c-4 0-9-1-12 2-4 5-11 5-15 10h-3l2 4c3 0 4 3 5 6v2c-1 1-1 0-2-1-1-4-4 0-6 0l-1 3c1 2 3 6 7 5l5 2c5 5 11 8 17 10 24 12 48 23 72 37l19 11 24 16 8 6c-4 0-8 1-10 3 3-5 3-7-3-10-11-4-20-11-29-17-2-1-4-4-7-3-5 1-7-2-9-5l-5-4-24-11c-3-1-7-4-12-3 5 8 13 10 20 15 4 2 8 3 11 6 6 7 15 11 23 16 7 5 12 11 20 14 2 0 4 3 5 5l6 5c4 3 9 5 12 9l8 9 13 13c5 5 8 12 13 18 2 2 5 4 5 6 2 8 5 16 9 23l-1 2-4-4c-2-4-4-5-8-1-3 4-3 0-4-2-2-3-4 1-6 1-2 1-1 3 0 4 7 6 11 15 15 23 2 2 2 3 4 1s3-3 2-5-2-3 1-3c2 0 4-3 4-5l4 4c4 6 7 13 9 19 1 7 4 8 7 10 4 2 6 5 5 8-1 8 6 14 5 22-1 2 3 6 1 7-3 1-2-4-3-5l-13-29c-2-3-1-7-7-6-4 0-5-3-2-6 3-4 1-5 1-8 0-2-2-3-4-2l-10 5 8 20 7 16c5 11 11 22 14 35 1 4 2 8 5 11 1 2 4 5 7 4 3 0 0-4 1-6h2c3 6 2 13 7 18-1 0 1 3-1 3-2-1-1 0-2 1-1 6 2 11 0 17-1 1-1 3 1 3 1 1 1 0 2-1l3-1c1 1-2 3 0 4 2-2 4-3 4-6 1-5 5-8 9-11 1-1 2 0 2 1 7-5 15-8 20-16-4-1-2-4 0-4 7-4 7-12 11-19-5 3-7 2-9 0 0-3 3-2 2-5v-2h3c3 4 4 0 7-1 2-1 1-8 5-10v-3l-1-35c1-4 1-8-1-12-5-6-6-13-9-20l-4-12c-2-4-4-6-3-10v-1l-4-6c-4-9-9-18-15-26-7-8-9-13-12-20l-7-8-2-1-29-31c-11-9-21-20-33-28-3-1-4-3-5-6zM170 91l3 5c1 1 1 3 3 2s0-2 0-4l10 2c-5-3-10-5-16-5zm31 11c-3-4-7-5-11-2 4-1 7 5 11 2zm12 6c3 2 5 4 9 4-3-2-5-4-9-4zm33 16c-2 0-3 0-2-2l-7-3c0 8 7 6 10 10 3-3-1-3-1-5zm-34 73l6 2-6-2c-6-5-10-11-18-14 0 5 4 10 9 12l9 2zm58 9l12 6c14 10 25 24 38 36 1 1 4 1 2 3-1 3-2 4-5 5s-6-1-8-5c-3-8-7-9-14-3 0-5 5-5 6-7-7-13-24-19-31-35zm-14 26c0 3-1 5 1 6 1 2 6 4 8 8l2-2c-4-4-6-9-11-12zm102 12l8 7c4 3 5 7 6 11 0 1 3 2 1 3-3 2-3 0-4-1l-6-10c-2-3-5-5-5-10zm-88 8c2 3 4 5 8 7-4-6-4-6-8-7zm90 66c1-3-3-6-2-10l-4-2v4l2 4c0 2 1 4-1 5s-2-2-4-2-2-3-2-4c4-3 2-6 1-9 0-1 0-2-2-3-3-1 0 5-4 4l1 2c3 2 1 3 0 4h-4c1-7-6-9-7-14l-7-14c-2-4-3-7-2-11 1-2 0-6-2-5-4 1-6-3-9-3l-2-2c0-2 2-2 3-2 1 1 5 0 7-2l2-5c4 0 1 3 2 4 5-2 6 3 7 5 5 5 11 9 13 16 1 3-1 6 1 9 5 6 8 14 12 21l5 9c2 3-3 4-1 6h-2l-1-5zm-54-52c-3-2-8-1-10-6 0-2 2-3 4-3 4 1 8 2 9 6 1 2-1 3-3 3zm85 38c5 4-4 10 3 14-3-1-4-1-5 3l-2 8c-3-7-4-10-1-15 0-1 1-3-1-4-2 0-3 0-3-2 8 0 8 0 9-4zm-2 34c0 3 2 7 1 9-2 4 2 4 3 6l6-5 1-2c2 0 1 1 2 2v5c1 5-7 7-4 12l-1 2c-3-2-5 1-7 2-8 4-9 4-5 11-10 8-8-6-13-6 1-3 5-4 2-7-2-3-1-6-1-9-1-2 1-7-5-7-2 0-4-8-2-9s3 0 2-2c-1-1-3-2-4-1-1 0-2 2-3 0 1-3-4-7 0-11 1 1 1 5 5 2l5 7c3 7 8 9 13 8 5-2 2-5 5-7zm-14 12c1 3 1 7 5 8 2 0 5-3 4-5-1-4-6-2-9-3zm-20 39c-1-3 5-9 8-8l3 1-2 2c-3 1-2 4-2 5 0 4-3 5-5 7-2-2-3-4-2-7z" fill="#fae525" fill-rule="nonzero"/><path fill="none" d="M0 0h500v500H0z"/>
	</svg>
</div>

            
          
!
            
              * {
	margin: 0;
	padding: 0;
}
html, body {
	width: 100%;
	height: 200vh;
	position: relative;
}
.album {
	max-height: 100vh;
	max-width: 100vh;
	width: 100vw;
	height: 100vw;
	position: fixed;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%)
}
svg {
	position: absolute;
}
#unpeeled {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
#fold {
	transform: translateY(-100%);
	clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
}
            
          
!
            
              $(function(){
	var calculate = function(){
		var windowHeight = $(window).height();
		var windowScroll = $(window).scrollTop()
		var windowScrollPos =  windowScroll + windowHeight;
		var documentHeight = $(document).height();
		
		var percentageScrolled = windowScroll / windowHeight * 100;
		var percentageFold = 100 - percentageScrolled;

		var head = $("head");
		var unpeel = percentageScrolled;
		var fold = percentageFold;
		var slide = ((percentageScrolled*2)-100)* -1;

		var styleTemplate = `
			#unpeeled {
				clip-path: polygon(0% ${fold}%, 100% ${fold}%, 100% 100%, 0% 100%);
			}
			#fold {
				transform: translateY(${slide}%);
				clip-path: polygon(0% ${unpeel}%, 100% ${unpeel}%, 100% 100%, 0% 100%);
			}`;

		if ( !head.find("#peel").length) {
			head.append('<style id="peel">${styleTemplate}</style>');
		} else {
			$("#peel").html(styleTemplate)
		}
	}
	$(window).scroll(function() {
		calculate();
	});	
	$("html, body").animate({ scrollTop: $(document).height() }, 0);
});

            
          
!
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.

Console