Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

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.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

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

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

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 

              
                <canvas width="960" height="540"></canvas>
!

CSS 

              
                * { box-sizing: inherit; }

html, body {
  margin: 0;
}

html {
  box-sizing: border-box;
  padding: 0;
  color: white;
  background-color: black;
  height: 100%;
}

body {
  padding: 1rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas {
  width: 100%;
  height: auto;
}
!

JS 

              
                const masks = Array.from([
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" width="432" height="432"><path fill="#fff" d="M364 318l35 4-21-29-24-2-4-2 19-5a4 4 0 00-2-9l-27 7-33-19 7-2 24 14a4 4 0 104-7l-16-10 4-1 24 4 28-22-35-6-20 16-3 1 9-17a4 4 0 10-7-4l-14 24-16 4-64-37h33l20 20a4 4 0 106-6l-14-14h4l23 10 32-14-32-14-23 10h-4l14-14a4 4 0 10-6-6l-20 20h-33l64-37 16 4 14 24a4 4 0 107-4l-9-17 3 1 20 16 35-6-28-22-24 4-4-1 16-10a4 4 0 00-4-7l-24 13-7-1 33-19 27 7a4 4 0 102-9l-19-5 4-2 24-2 21-29-35 4-15 20-3 2 5-18a4 4 0 10-8-3l-8 27-32 19 1-7 24-14a4 4 0 00-4-8l-16 10 1-4 15-19-5-35-23 28 4 24-1 4-9-17a4 4 0 10-8 5l14 24-4 15-64 37 16-28 27-7a4 4 0 00-2-9l-19 5 2-3 20-15 4-35-29 21-2 24-2 4-5-19a4 4 0 10-8 3l7 26-17 29v-74l12-12h27a4 4 0 000-8h-19l3-3 23-9 13-33-33 13-9 23-3 3V81a4 4 0 10-8 0v27l-6 6V76l20-20a4 4 0 10-6-6l-14 13v-4l10-22-14-33-14 33 10 22v4l-14-13a4 4 0 10-6 6l20 20v38l-6-6V81a4 4 0 00-8 0v19l-3-3-9-23-33-13 13 33 23 9 3 3h-19a4 4 0 000 8h27l12 12v74l-17-29 7-26a4 4 0 00-8-3l-5 19-2-4-2-24-29-21 4 35 20 15 2 3-19-5a4 4 0 10-2 9l27 7 16 28-64-37-4-15 14-24a4 4 0 00-8-5l-9 17-1-4 4-24-23-28-5 35 15 19 1 4-16-10a4 4 0 10-4 8l24 14 1 7-32-19-8-27a4 4 0 10-8 3l5 18-3-2-15-20-35-4 21 29 24 2 4 2-19 5a4 4 0 002 9l27-7 33 19-7 1-24-13a4 4 0 10-4 7l16 10-4 1-24-4-28 22 35 6 20-16 3-1-9 17a4 4 0 107 4l14-24 16-4 64 37h-33l-20-20a4 4 0 10-6 6l14 14h-4l-23-10-32 14 32 14 23-10h4l-14 14a4 4 0 106 6l20-20h33l-64 37-16-4-14-24a4 4 0 00-7 4l9 17-3-1-20-16-35 6 28 22 24-4 4 1-16 10a4 4 0 004 7l24-14 7 2-33 19-27-7a4 4 0 00-2 9l19 5-4 2-24 2-21 29 35-4 15-20 3-2-5 18a4 4 0 008 3l8-27 32-19-1 7-24 14a4 4 0 004 8l16-10-1 4-15 19 5 35 23-28-4-24 1-4 9 17a4 4 0 008-5l-14-24 4-15 64-37-16 28-27 7a4 4 0 102 9l19-5-2 3-20 15-4 35 29-21 2-24 2-4 5 19a4 4 0 108-3l-7-26 17-29v74l-12 12h-27a4 4 0 100 8h19l-3 3-23 9-13 33 33-13 9-23 3-3v19a4 4 0 008 0v-27l6-6v38l-20 20a4 4 0 006 6l14-13v4l-10 22 14 33 14-33-10-22v-4l14 13a4 4 0 006-6l-20-20v-38l6 6v27a4 4 0 008 0v-19l3 3 9 23 33 13-13-33-23-9-3-3h19a4 4 0 000-8h-27l-12-12v-74l17 29-7 26a4 4 0 008 3l5-19 2 4 2 24 29 21-4-35-20-15-2-3 19 5a4 4 0 102-9l-27-7-16-28 64 37 4 15-14 24a4 4 0 108 5l9-17 1 4-4 24 23 28 5-35-15-19-1-4 16 10a4 4 0 004-8l-24-14-1-7 32 19 8 27a4 4 0 108-3l-5-18 3 2 15 20z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 296"><path d="M250 185a7 7 0 00-12 1l-2 4-13-8 19-12a7 7 0 10-8-13l-25 16-19-25 19-26 25 17a7 7 0 0010-2c3-3 2-8-2-10l-19-14 13-8 2 5a7 7 0 0012 1l26-29a7 7 0 00-8-12l-37 8a7 7 0 00-5 11l2 4-13 7-1-23a8 8 0 00-15 1l2 29-32 4-13-29 27-14c3-2 5-6 3-10s-7-5-11-3l-20 11V51h5a7 7 0 006-10L155 5c-1-3-4-5-7-5-4 0-7 2-8 5l-12 36a7 7 0 007 10h5v15l-22-10c-3-2-8-1-10 3-1 4 0 8 4 10l26 13-12 29-31-4 1-29a7 7 0 10-15-1l-1 23-12-7 2-4a8 8 0 00-5-11l-37-8a7 7 0 00-8 13l26 28a7 7 0 0012-1l2-4 13 7-20 14a8 8 0 009 12l24-16 18 25-18 25-25-16a8 8 0 00-8 13l20 12-13 8-2-4a7 7 0 00-12-1l-25 28a8 8 0 007 12l37-7a8 8 0 005-11l-2-5 13-7 1 24a7 7 0 1015-1l-2-29 31-4 12 29-26 13c-4 1-5 6-3 10 1 3 6 5 9 3l22-10v15h-5a7 7 0 00-7 10l12 36c1 3 4 5 8 5 3 0 6-2 7-5l12-36a8 8 0 00-7-10h-5v-15l20 11 4 1c3 0 5-2 7-4 2-4 0-9-3-11l-27-13 13-29 31 4-2 29a8 8 0 0015 1l2-24 13 8-2 4a7 7 0 005 11l37 8a7 7 0 008-4c2-3 2-6-1-9l-25-28z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 297 297"><path d="M290 142h-12l9-10a7 7 0 10-11-10l-19 20h-14l9-10a7 7 0 10-11-10l-19 20h-13l17-19 2-5c0-4-3-7-7-7h-23l8-8h27a7 7 0 100-15h-12l10-10h27a7 7 0 100-15h-12l8-9a8 8 0 00-11-10l-8 8V39c0-4-4-8-8-8s-7 4-7 8v28l-10 10V64a8 8 0 00-15 0l1 27-9 9V78c0-3 0-5-2-6-3-3-8-4-11-1l-19 17V74l20-18c3-3 3-8 0-11-2-3-7-3-10 0l-10 9V40l20-19c3-3 3-8 0-11s-7-3-10 0l-10 9V8a7 7 0 10-15 0v10l-8-8c-3-3-7-3-10 0s-3 8-1 10l19 19v14l-8-8c-3-3-7-3-10 0s-3 8-1 10l19 19v13l-17-16a7 7 0 00-12 6l-1 22-8-8V65a7 7 0 10-15 0v11L77 66V40a7 7 0 10-15 0v11l-8-8c-3-3-7-3-10 0s-3 8 0 11l8 8H39c-4 0-7 4-7 8s3 7 7 7h28l10 10H64a7 7 0 100 15l27-1 10 10H78l-7 2c-3 3-3 8 0 11l1 1 16 17H74l-18-20a7 7 0 10-11 10l9 9H40l-19-19a7 7 0 10-11 10l9 9H8a7 7 0 100 15h10l-8 9a7 7 0 1010 10l19-18h14l-8 8a7 7 0 1010 10l19-18h13l-16 16a7 7 0 005 13l24 1-9 9-27-1a8 8 0 000 15l12 1-10 10-27-1c-4 0-7 4-8 8 0 4 4 7 8 7h13l-8 8a8 8 0 005 13l5-2 7-7v12a7 7 0 1015 0v-27l10-10v12a7 7 0 1015 0v-27l10-10v23a8 8 0 008 8c2 1 4-1 6-2l15-16v12l-18 19c-3 3-3 8 0 11l5 2 5-2 8-9v14l-18 19c-3 3-3 8 0 11l5 2 5-2 8-9v12a7 7 0 1015 0v-12l10 9a8 8 0 0010 0c3-3 3-8 0-11l-20-19v-14l10 9a8 8 0 0010 0c3-3 3-8 0-11l-20-19v-13l17 17 7 2c4 0 7-3 7-7v-25l10 10-1 27a7 7 0 1015 1l1-13 10 9-1 28c0 4 3 7 7 7l1 1c4 0 7-4 7-8v-13l8 8a7 7 0 0011 0c3-3 3-7 0-10l-7-7h11a7 7 0 100-15h-26l-10-10h11a7 7 0 100-15h-26l-9-10 23-1 5-2c3-3 3-7 0-10l-16-16h12l19 18a7 7 0 0011 0c3-3 3-7 0-10l-9-8h14l19 18a7 7 0 0011 0c3-3 3-7 0-10l-9-8h12a7 7 0 100-15zm-175-17l17 17h-24l-14-16 21-1zm0 47H94l14-16h23l-16 16zm25 17l-14 14-1-20 15-15v21zm0-60l-15-15V94l15 14v21zm15-21l17-15v22l-17 17v-24zm16 96l-16-15v-24l16 17v22zm12-32l-15-15h21l14 14-20 1zm6-30h-22l16-17h21l-15 17z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298 298"><path d="M291 142h-12v-11a7 7 0 10-15 0v11h-9v-17a7 7 0 10-15 0v17h-69l-2-3 50-49 12 12a7 7 0 0011 0c3-3 3-8 0-11l-12-12 6-6 8 7a7 7 0 0010 0c3-3 3-7 0-10l-7-8 7-8a8 8 0 00-10-10l-8 7-8-7a8 8 0 00-10 10l7 8-6 6-12-12a8 8 0 00-11 11l12 12-50 50-2-1V58h18a7 7 0 100-15h-18v-9h12a7 7 0 100-15h-12V8a7 7 0 10-15 0v11h-10a7 7 0 100 15h10v9h-16a7 7 0 100 15h16v70l-1 1-50-50 12-12a7 7 0 10-11-11L79 68l-6-6 7-8a8 8 0 00-10-10l-8 7-8-7a8 8 0 00-10 10l7 8-7 8a8 8 0 1010 10l8-7 6 6-12 12a7 7 0 1011 11l12-12 50 50-1 1H57v-16a7 7 0 10-15 0v17h-9v-11a7 7 0 10-15 0v11H8a7 7 0 100 15h10v11a7 7 0 1015 0v-11h9v17a7 7 0 1015 0v-17h71l1 2-50 49-12-12a8 8 0 00-11 11l12 12-6 6-8-7a7 7 0 10-10 10l7 8-7 8a8 8 0 1010 10l8-7 8 7a7 7 0 0010 0c3-3 3-7 0-10l-7-8 6-6 12 12a7 7 0 0011 0c3-3 3-8 0-11l-12-12 49-50 2 2v70h-16a7 7 0 100 15h16v9h-10a7 7 0 100 15h10v11a7 7 0 1015 0v-11h12a7 7 0 100-15h-12v-9h18a7 7 0 100-15h-18v-70l3-1 49 49-12 12a8 8 0 0011 11l12-12 6 6-7 8a8 8 0 0010 10l8-7 8 7a7 7 0 0010 0c3-3 3-7 0-10l-7-8 7-8a8 8 0 00-10-10l-8 7-6-6 12-12a8 8 0 00-11-11l-12 12-49-49 1-3h69v17a7 7 0 1015 0v-17h9v11a7 7 0 1015 0v-11h12a7 7 0 100-14z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 297 297"><path d="M290 133c-4-5-10-7-16-7a22 22 0 00-21 15h-20l8-8a8 8 0 00-10-11l-19 19h-22l-8-16 17-16h27a7 7 0 100-15h-12l14-14a22 22 0 0025-5 23 23 0 00-16-38 22 22 0 00-22 22c0 4 0 7 2 10l-14 14V72a7 7 0 10-15 0v26l-16 16-16-6V86l19-20c3-3 3-7 0-10s-8-3-11 0l-8 8V44c9-3 15-12 15-21 0-13-10-23-23-23-12 0-22 10-22 23 0 9 7 18 15 21v20l-9-8c-3-3-8-3-11 0-2 3-3 7 0 10l20 20v21l-18 6-14-15V71a7 7 0 10-15 0v12L80 69a22 22 0 00-21-32 22 22 0 00-22 22 22 22 0 0022 23l10-2 14 14H72a7 7 0 100 15h26l15 14-8 18H85l-19-19a8 8 0 00-11 10l9 9H44a23 23 0 100 15h20l-8 8a7 7 0 1010 11l19-19h21l6 18-14 14H71a7 7 0 100 15h12l-14 14-10-2a22 22 0 00-22 22 22 22 0 0022 23 22 22 0 0021-32l14-14v11a7 7 0 1015 0v-26l14-15 18 7v21l-20 19c-2 3-2 8 1 11l5 2 5-2 9-9v20c-8 3-15 12-15 21a23 23 0 0045 0c0-9-6-18-15-21v-20l8 8a8 8 0 0011 0c3-3 2-8-1-11l-18-18v-22l16-7 16 15v28a7 7 0 1015 0v-13l14 15c-2 3-2 6-2 9a22 22 0 0022 23 22 22 0 0023-23 22 22 0 00-23-22l-9 2-14-14h11a7 7 0 100-15h-26l-16-16 7-16h22l19 19a7 7 0 0011 0c3-3 3-7 0-10l-9-9h20a23 23 0 1037-23zm-122 36l-21 9-20-9-8-21 8-20 20-8 20 9 10 19-9 21z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298 298"><path d="M290 141h-25l11-12a7 7 0 10-11-10l-21 22h-37l16-18a8 8 0 00-4-12h-22l24-24h31a7 7 0 100-15h-16l18-18c3-3 3-8 0-11s-8-3-11 0l-18 18V46a7 7 0 10-15 0v30l-25 25V78l-2-5c-3-3-8-3-11 0l-16 15V53l22-21c3-3 3-8 0-11s-8-3-11 0l-11 11V8a7 7 0 10-15 0v24l-10-11c-3-3-8-3-11 0s-3 8 0 11l21 21v36l-16-16a7 7 0 00-12 4l-1 2v21L87 75V46a7 7 0 10-15 0v14L55 43c-3-3-7-3-10 0s-3 8 0 11l17 18H47a7 7 0 100 15h30l25 24-23 1c-4 0-7 4-7 7l-1 1h1c0 2 0 4 2 5l16 16H55l-22-22a8 8 0 00-10 10l11 11H9a7 7 0 100 15h25l-11 11a8 8 0 1010 11l22-21h35l-15 16a8 8 0 005 13v-1 1l22-1-25 26H47a7 7 0 100 15h15l-17 17a8 8 0 005 13l5-2 17-18v16a7 7 0 1015 0v-31l26-25 1 24c0 4 3 8 7 8l4-2 16-16v36l-21 21c-3 3-3 7 0 10l6 3c2 0 3-1 5-3l10-10v25a7 7 0 1015 0v-26l12 11a8 8 0 0010 0c3-3 3-7 0-10l-22-22v-36a5625 5625 0 0023 19c4 0 7-4 7-8v-24l24 25v31a7 7 0 1015 0v-16l18 18a8 8 0 0011 0c3-3 3-8 0-11l-17-17h15a7 7 0 100-15h-30l-26-26 23-1a7 7 0 004-14l-14-13h35l21 21a7 7 0 0011 0c3-3 3-8 0-11l-11-10h25a7 7 0 100-15zm-89-16l-14 16h-20l15-16h19zm-31-29l1 20-15 14v-21l14-13zm-43 0l14 13v20l-14-14V96zm-30 30h20l14 15h-20l-14-15zm0 43l13-13h21l-14 13H97zm31 33l-1-21 14-15v22l-13 14zm43-1l-15-13v-22l15 14v21zm30-32h-20l-13-14h20l13 14z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 297 297"><path d="M295 140a17 17 0 00-30 2h-16l-39-20 14-8 9 7a7 7 0 0010-1c3-3 2-8-1-11l-4-3 11-6 6 2a8 8 0 008-4l9-13a8 8 0 00-7-11h-15c-4 1-6 3-7 6l-2 7-11 6v-4a7 7 0 10-15 2l1 10-14 8 3-43 9-15a16 16 0 009-3 17 17 0 10-22-5l-9 16-35 23V67l10-4c4-2 6-6 4-10-1-4-6-6-10-4l-4 2V38l4-5c3-2 3-6 2-9l-7-13a7 7 0 00-14 0l-7 13c-1 3-1 7 1 9l6 6v11l-5-1c-3-2-8 0-9 4-2 4 0 8 4 10l10 4v16l-37-24-9-15a17 17 0 00-15-26 17 17 0 102 34l10 15 2 42-13-8 2-11a7 7 0 10-15-2l-1 5-11-6-2-7c0-3-3-5-6-5l-16-1a8 8 0 00-7 11l9 14a8 8 0 008 3l7-2 10 6-3 3a7 7 0 109 11l8-6 14 8-40 20H32a17 17 0 00-15-10 17 17 0 00-16 21 17 17 0 0016 12c6 0 11-3 14-8h20l37 18-13 8-9-7a7 7 0 10-10 12l5 3-11 6-7-1c-3-1-6 0-8 3l-9 13a8 8 0 007 11h16c3 0 6-3 6-6l2-7 11-6v4a8 8 0 1015-2l-1-10 13-8-2 43-9 16a17 17 0 1014 7l8-16 36-24v16l-11 5c-4 1-6 5-4 9 1 3 4 5 7 5l2-1 6-2v13l-5 5c-3 2-3 6-2 9l7 14c2 2 4 4 7 4s6-2 7-4l7-14c2-3 1-7-1-9l-5-5v-12l3 1c4 2 9 0 10-4 2-3 0-8-4-9l-9-4v-16l35 24 12 17c-2 2-3 5-3 9 0 9 8 17 17 17a17 17 0 10-2-34l-11-17-3-43 14 8-1 11a7 7 0 1014 2l1-5 11 6 2 7c1 3 3 5 7 6h16a7 7 0 006-11l-8-13c-2-3-6-4-9-4l-7 2-10-6 3-2a7 7 0 10-9-12l-8 6-14-8 37-18h19c3 5 8 8 14 8a17 17 0 0015-25zM189 79l-2 39-30 17v-35l32-21zm-81 0l34 22v35l-31-18-3-39zm-40 70l36-18 30 18-30 17-36-17zm40 69l3-39 31-18v35l-34 22zm81 1l-32-22v-35l30 17 2 40zm5-53l-30-17 30-18 36 18-36 17z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 296"><path d="M270 201a15 15 0 00-14 0l-12-6 24-11a7 7 0 00-7-14l-32 16-11-7 23-11a7 7 0 10-7-13l-32 15-24-13v-18l23-14 32 17a7 7 0 0010-4c2-3 1-8-3-10l-23-12 11-6 32 16a7 7 0 0010-3c2-4 1-8-3-10l-23-12 11-7a15 15 0 10-7-13l-11 7 2-26a7 7 0 10-15-1l-3 36-11 6 2-26a7 7 0 10-15-1l-3 36-23 14-15-10V90l29-19a7 7 0 10-8-13l-21 14V59l29-19a7 7 0 10-8-13l-21 14V28c4-3 7-7 7-13a15 15 0 00-30 0c0 6 3 10 8 13v13l-22-15a8 8 0 00-9 13l31 20v13l-22-15a8 8 0 00-9 13l31 20v26l-17 9-22-13-2-35a7 7 0 10-15 1l1 25-11-6-2-36c0-4-4-7-8-7-4 1-7 4-7 8l1 26-11-7a15 15 0 10-8 13l12 7-24 11a7 7 0 107 14l32-16 11 6-23 12a7 7 0 106 13l33-16 23 13v19l-23 13-32-16a7 7 0 10-6 13l22 12-11 7-31-17a7 7 0 10-7 14l23 12-12 6a15 15 0 108 13l11-6-2 26a7 7 0 1015 1l3-36 11-7-2 26a7 7 0 1015 1l2-36 23-13 17 9v26l-31 20a8 8 0 009 12l22-14v13l-31 20a7 7 0 109 12l21-14v13c-5 3-7 8-7 14a15 15 0 1022-13v-13l22 14a7 7 0 0010-2c3-3 2-8-2-10l-30-20v-13l22 14a7 7 0 0010-2c3-3 2-8-2-10l-30-20v-27l16-9 23 13 2 36a7 7 0 1015-1l-2-26 12 6 2 36a7 7 0 1015-1l-2-26 12 7a15 15 0 1022-13z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 297 297"><path d="M275 213l-21-12 21-14a8 8 0 00-8-12l-28 17-11-6 11-9a8 8 0 00-9-12l-16 13-25-15v-29l25-15 18 11a7 7 0 0010-2c2-4 1-8-2-10l-11-7 10-6 28 17a7 7 0 0010-3c2-3 1-8-2-10l-21-13 20-11a7 7 0 00-7-13l-21 12-1-26c-1-4-4-7-8-7-4 1-7 4-7 8l1 33-11 7-2-14a7 7 0 10-14 1l2 21-25 14-26-16V78l19-9c4-1 6-6 4-9-2-4-6-6-10-4l-13 5V48l29-15c4-2 6-6 4-10s-7-5-10-3l-23 11V8a7 7 0 10-15 0v23l-21-12c-4-2-8-1-10 3-2 3-1 8 3 10l28 16v12l-11-6c-4-2-8-1-10 3s-1 8 3 10l18 10v29l-25 14-24-13 2-21a7 7 0 10-14-1l-2 14-11-7 1-33a7 7 0 10-15-1l-1 26-21-12a7 7 0 10-7 13l20 11-21 13a8 8 0 008 13l28-17 10 6-11 7a7 7 0 108 12l18-11 24 14v31l-24 14-16-13a8 8 0 00-9 12l11 9-11 6-28-17a8 8 0 00-8 12l21 14-21 12a7 7 0 008 13l20-12v24c0 4 4 7 8 7s7-3 7-7v-32l10-7 1 13a8 8 0 0015 0l-1-21 25-15 25 15v29l-18 10c-4 2-5 6-3 10 1 3 4 4 7 4l3-1 11-6v12l-28 16c-4 2-5 7-3 10 1 3 4 4 7 4l3-1 21-12v24a7 7 0 1015 0v-24l23 11c3 2 8 1 10-3s0-8-4-10l-29-15v-13l13 5c4 2 8 0 10-4 2-3 0-8-4-9l-19-9v-27l27-15 25 14-1 21a8 8 0 0015 0l1-13 10 7v32c0 4 3 7 7 7s8-3 8-7v-24l20 12a7 7 0 0010-3c2-4 1-8-2-10z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298 298"><path d="M275 213l-17-10 16-7a7 7 0 10-6-14l-27 11-47-27 28-11a8 8 0 000-14l-29-10 48-28 27 11a7 7 0 105-14l-16-6 18-11a7 7 0 00-7-13l-18 10 2-17a7 7 0 10-15-2l-3 29-48 27 5-29c1-3-1-7-3-8-3-2-7-1-9 1l-24 19V48l24-18c3-2 4-7 1-10-2-4-7-4-10-2l-15 11V8a7 7 0 10-15 0v21l-13-10c-3-3-7-2-10 1s-2 8 1 10l22 18v52l-23-19c-2-3-6-3-8-1-3 1-4 4-4 8l5 30-45-27-4-29a7 7 0 10-15 2l3 18-19-11a7 7 0 10-7 13l19 11-16 6a8 8 0 005 14l27-10 45 25-29 11a8 8 0 000 14l29 10-45 27-27-12a7 7 0 10-6 14l16 7-18 11a7 7 0 007 13l19-11-3 16a8 8 0 1015 3l5-29 44-25-5 29c0 3 1 7 4 8 2 2 6 1 8-1l23-19v55l-22 18c-3 2-4 7-1 10s7 4 10 1l13-10v21a7 7 0 1015 0v-21l15 11a8 8 0 0010-2c3-3 2-8-1-10l-24-18v-55l24 19a8 8 0 008 1c3-1 5-4 4-8l-5-30 47 28 5 28a8 8 0 0014-2l-2-17 18 11a7 7 0 0010-3c2-4 1-8-3-10zm-77-65l-21 8-14-8 14-8 21 8zm-25-43l-4 22-14 8v-15l18-15zm-50 0l17 14v16l-13-8-4-22zm-24 43l21-8 13 8-13 8-21-8zm24 43l4-22 13-8v15l-17 15zm50 0l-18-14v-16l14 8 4 22z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298 298"><path d="M291 142h-12v-11a7 7 0 10-15 0v11h-9v-17a7 7 0 10-15 0v17h-69l-2-3 50-49 12 12a7 7 0 0011 0c3-3 3-8 0-11l-12-12 6-6 8 7a7 7 0 0010 0c3-3 3-7 0-10l-7-8 7-8a8 8 0 00-10-10l-8 7-8-7a8 8 0 00-10 10l7 8-6 6-12-12a8 8 0 00-11 11l12 12-50 50-2-1V58h18a7 7 0 100-15h-18v-9h12a7 7 0 100-15h-12V8a7 7 0 10-15 0v11h-10a7 7 0 100 15h10v9h-16a7 7 0 100 15h16v70l-1 1-50-50 12-12a7 7 0 10-11-11L79 68l-6-6 7-8a8 8 0 00-10-10l-8 7-8-7a8 8 0 00-10 10l7 8-7 8a8 8 0 1010 10l8-7 6 6-12 12a7 7 0 1011 11l12-12 50 50-1 1H57v-16a7 7 0 10-15 0v17h-9v-11a7 7 0 10-15 0v11H8a7 7 0 100 15h10v11a7 7 0 1015 0v-11h9v17a7 7 0 1015 0v-17h71l1 2-50 49-12-12a8 8 0 00-11 11l12 12-6 6-8-7a7 7 0 10-10 10l7 8-7 8a8 8 0 1010 10l8-7 8 7a7 7 0 0010 0c3-3 3-7 0-10l-7-8 6-6 12 12a7 7 0 0011 0c3-3 3-8 0-11l-12-12 49-50 2 2v70h-16a7 7 0 100 15h16v9h-10a7 7 0 100 15h10v11a7 7 0 1015 0v-11h12a7 7 0 100-15h-12v-9h18a7 7 0 100-15h-18v-70l3-1 49 49-12 12a8 8 0 0011 11l12-12 6 6-7 8a8 8 0 0010 10l8-7 8 7a7 7 0 0010 0c3-3 3-7 0-10l-7-8 7-8a8 8 0 00-10-10l-8 7-6-6 12-12a8 8 0 00-11-11l-12 12-49-49 1-3h69v17a7 7 0 1015 0v-17h9v11a7 7 0 1015 0v-11h12a7 7 0 100-14z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298 298"><path d="M291 143h-23l11-11a7 7 0 10-11-10l-19 19-43-15 20-42 1-1h25a7 7 0 100-14h-10l13-14c3-3 3-8 0-11s-8-3-11 0l-16 16V46a7 7 0 10-15 0v28l-40 19-16-44 19-19c3-2 3-7 0-10s-8-3-10 0l-10 9V8a7 7 0 10-15 0v20l-8-8c-3-3-7-3-10 0s-3 8 0 10l18 19-15 44-42-20V47a7 7 0 10-15 0v12L54 44c-3-3-7-3-10 0s-3 8 0 11l15 15H47a7 7 0 100 15h26l20 41-43 15-19-19a8 8 0 00-11 11l10 9H8a7 7 0 100 15h21l-9 9a8 8 0 1011 10l19-18 43 15-19 41H47a7 7 0 100 15h13l-16 15a8 8 0 006 13c2 0 3 0 5-2l14-14v11a7 7 0 1015 0v-26l42-20 15 43-18 18a7 7 0 005 13l5-2 8-8v21a7 7 0 1015 0v-22l10 9a8 8 0 0010 0c3-3 3-8 0-11l-18-18 15-43 41 20v26a7 7 0 1015 0v-12l15 15a8 8 0 0010 0c3-3 3-8 0-11l-15-15h14a7 7 0 100-15h-28l-19-41 43-16h1l18 19a7 7 0 0011 0c2-3 2-8 0-11l-8-7h20a7 7 0 100-15zm-87 61l-40-19-14 42-15-42-19 9-21 10 19-40-42-14 42-15-19-40 40 19 14-43 15 43 40-19-19 40 42 15-42 14 19 40z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 297 297"><path d="M295 140a17 17 0 00-30 2h-16l-39-20 14-8 9 7a7 7 0 0010-1c3-3 2-8-1-11l-4-3 11-6 6 2a8 8 0 008-4l9-13a8 8 0 00-7-11h-15c-4 1-6 3-7 6l-2 7-11 6v-4a7 7 0 10-15 2l1 10-14 8 3-43 9-15a16 16 0 009-3 17 17 0 10-22-5l-9 16-35 23V67l10-4c4-2 6-6 4-10-1-4-6-6-10-4l-4 2V38l4-5c3-2 3-6 2-9l-7-13a7 7 0 00-14 0l-7 13c-1 3-1 7 1 9l6 6v11l-5-1c-3-2-8 0-9 4-2 4 0 8 4 10l10 4v16l-37-24-9-15a17 17 0 00-15-26 17 17 0 102 34l10 15 2 42-13-8 2-11a7 7 0 10-15-2l-1 5-11-6-2-7c0-3-3-5-6-5l-16-1a8 8 0 00-7 11l9 14a8 8 0 008 3l7-2 10 6-3 3a7 7 0 109 11l8-6 14 8-40 20H32a17 17 0 00-15-10 17 17 0 00-16 21 17 17 0 0016 12c6 0 11-3 14-8h20l37 18-13 8-9-7a7 7 0 10-10 12l5 3-11 6-7-1c-3-1-6 0-8 3l-9 13a8 8 0 007 11h16c3 0 6-3 6-6l2-7 11-6v4a8 8 0 1015-2l-1-10 13-8-2 43-9 16a17 17 0 1014 7l8-16 36-24v16l-11 5c-4 1-6 5-4 9 1 3 4 5 7 5l2-1 6-2v13l-5 5c-3 2-3 6-2 9l7 14c2 2 4 4 7 4s6-2 7-4l7-14c2-3 1-7-1-9l-5-5v-12l3 1c4 2 9 0 10-4 2-3 0-8-4-9l-9-4v-16l35 24 12 17c-2 2-3 5-3 9 0 9 8 17 17 17a17 17 0 10-2-34l-11-17-3-43 14 8-1 11a7 7 0 1014 2l1-5 11 6 2 7c1 3 3 5 7 6h16a7 7 0 006-11l-8-13c-2-3-6-4-9-4l-7 2-10-6 3-2a7 7 0 10-9-12l-8 6-14-8 37-18h19c3 5 8 8 14 8a17 17 0 0015-25zM189 79l-2 39-30 17v-35l32-21zm-81 0l34 22v35l-31-18-3-39zm-40 70l36-18 30 18-30 17-36-17zm40 69l3-39 31-18v35l-34 22zm81 1l-32-22v-35l30 17 2 40zm5-53l-30-17 30-18 36 18-36 17z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 298 298"><path d="M268 148l27-27a8 8 0 00-10-11l-30 30h-44l16-16a7 7 0 00-5-13l-25-1 31-31h42a7 7 0 100-14h-38V27a7 7 0 10-15 0v42l-30 30-1-24c0-3-1-5-4-7-3-1-6 0-8 2l-18 16V42l30-29c3-3 3-8 0-11s-8-3-11 0l-27 27-27-27c-2-3-7-3-10 0s-3 8 0 11l30 30v44l-18-17c-2-2-5-3-8-2-2 2-4 4-4 7l-1 24-32-32V25a7 7 0 10-15 0v39H25a7 7 0 100 15h44l31 31-25 1a8 8 0 00-5 12l17 18H43l-30-30a8 8 0 00-11 10l27 27-27 28a8 8 0 1011 10l29-30h44l-16 17a8 8 0 005 13l23 1-32 31H25a7 7 0 100 15h38v38a7 7 0 1015 0v-43l32-32 1 26c0 3 1 5 4 7 3 1 6 0 8-2l17-16v44l-30 30c-3 3-3 8 0 10a8 8 0 0011 0l27-27 27 27a7 7 0 0010 0c3-2 3-7 0-10l-30-30v-45l18 17a8 8 0 009 2c2-2 4-4 4-7l1-24 30 31v42a7 7 0 1015 0v-38h39a7 7 0 100-15h-43l-31-31 25-1a8 8 0 005-12l-17-19h45l30 30a7 7 0 0010 0c3-2 3-7 0-10l-27-27zm-112-41l16-14v21l-14 14-2-1v-20zm-31-14l16 15v19l-2 1-14-14V93zm-10 32l13 13-1 3h-19l-15-16h22zm-2 47H93l14-16h20l1 1-15 15zm27 18l-15 14v-23l13-13 2 2v20zm31 14l-16-15v-19l2-1 15 15-1 20zm11-32l-14-13 2-4h19l15 17h-22zm8-32h-20l-1-1 14-14h21l-14 15z"/></svg>`], {type: 'image/svg+xml'})),
  URL.createObjectURL(new Blob([`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 296 296"><path d="M250 185a7 7 0 00-12 1l-2 4-13-8 19-12a7 7 0 10-8-13l-25 16-19-25 19-26 25 17a7 7 0 0010-2c3-3 2-8-2-10l-19-14 13-8 2 5a7 7 0 0012 1l26-29a7 7 0 00-8-12l-37 8a7 7 0 00-5 11l2 4-13 7-1-23a8 8 0 00-15 1l2 29-32 4-13-29 27-14c3-2 5-6 3-10s-7-5-11-3l-20 11V51h5a7 7 0 006-10L155 5c-1-3-4-5-7-5-4 0-7 2-8 5l-12 36a7 7 0 007 10h5v15l-22-10c-3-2-8-1-10 3-1 4 0 8 4 10l26 13-12 29-31-4 1-29a7 7 0 10-15-1l-1 23-12-7 2-4a8 8 0 00-5-11l-37-8a7 7 0 00-8 13l26 28a7 7 0 0012-1l2-4 13 7-20 14a8 8 0 009 12l24-16 18 25-18 25-25-16a8 8 0 00-8 13l20 12-13 8-2-4a7 7 0 00-12-1l-25 28a8 8 0 007 12l37-7a8 8 0 005-11l-2-5 13-7 1 24a7 7 0 1015-1l-2-29 31-4 12 29-26 13c-4 1-5 6-3 10 1 3 6 5 9 3l22-10v15h-5a7 7 0 00-7 10l12 36c1 3 4 5 8 5 3 0 6-2 7-5l12-36a8 8 0 00-7-10h-5v-15l20 11 4 1c3 0 5-2 7-4 2-4 0-9-3-11l-27-13 13-29 31 4-2 29a8 8 0 0015 1l2-24 13 8-2 4a7 7 0 005 11l37 8a7 7 0 008-4c2-3 2-6-1-9l-25-28z"/></svg>`], {type: 'image/svg+xml'})),
], (url, i) => {
  const image = document.createElement('img');
  image.src = url;

  return new Promise((resolve) => image.addEventListener('load', resolve, {once: true})).then(() => masks[i] = image);
});

async function main() {
  const canvas = document.querySelector('canvas');
  const canvasContext = canvas.getContext('2d');
  const canvasAspectRatio = canvas.width / canvas.height;

  const video = document.createElement('video');
  video.muted = true;
  video.autoplay = true;
  video.loop = true;
  video.playsinline = true;
  video.src = "https://giant.gfycat.com/CheapBitterCaterpillar.webm";

  await Promise.all([...masks, video.play()]);

  const videoAspectRatio = video.videoWidth / video.videoHeight;

  const [frameWidth, frameHeight] =
        canvasAspectRatio <= videoAspectRatio
  ? [canvas.height * videoAspectRatio, canvas.height]
  : [canvas.width, canvas.width / videoAspectRatio];

  const [frameTop, frameLeft] = [(canvas.height - frameHeight) / 2, (canvas.width - frameWidth) / 2];

  const maskImage = masks[Math.floor(Math.random() * masks.length)];

  const maskAspectRatio = maskImage.naturalWidth / maskImage.naturalHeight;

  const [maskWidth, maskHeight] =
        canvasAspectRatio <= maskAspectRatio
  ? [canvas.width, canvas.width / maskAspectRatio]
  : [canvas.height * maskAspectRatio, canvas.height];

  const [maskTop, maskLeft] = [(canvas.height - maskHeight) / 2, (canvas.width - maskWidth) / 2];

  requestAnimationFrame(function frame() {
    canvasContext.globalCompositeOperation = 'destination-over';
    canvasContext.drawImage(maskImage, maskLeft, maskTop, maskWidth, maskHeight);

    canvasContext.globalCompositeOperation = 'source-in';
    canvasContext.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, frameLeft, frameTop, frameWidth, frameHeight);

    requestAnimationFrame(frame);
  });
}

self.addEventListener('DOMContentLoaded', () => main().catch(console.error), {once: true});
!
999px

Console