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 

              
                <svg width="86" height="85" viewBox="0 0 86 85" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 45C0 42.7909 1.79086 41 4 41H70C72.2091 41 74 42.7909 74 45V85H0V45Z" fill="#262637"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M65.0708 41.1836C65.0708 41.1836 72.1948 32.5835 67.6084 20.5918C63.0219 8.60001 43.2463 15.3578 37.2855 15.3578C31.3247 15.3578 30.439 0 30.439 0L26.2218 7.83184H16.9475L14.3653 0C14.3653 0 9.2552 11.3897 9.2552 20.5918C9.2552 29.7938 13.0947 41.1836 21.7669 41.1836C30.439 41.1836 65.0708 41.1836 65.0708 41.1836Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M65.0708 41.1836C65.0708 41.1836 72.1948 32.5835 67.6084 20.5918C63.0219 8.60001 43.2463 15.3578 37.2855 15.3578C31.3247 15.3578 30.439 0 30.439 0L26.2218 7.83184H16.9475L14.3653 0C14.3653 0 9.2552 11.3897 9.2552 20.5918C9.2552 29.7938 13.0947 41.1836 21.7669 41.1836C30.439 41.1836 65.0708 41.1836 65.0708 41.1836Z" fill="#F4F4F5"/>
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="9" y="0" width="61" height="42">
<path fill-rule="evenodd" clip-rule="evenodd" d="M65.0708 41.1836C65.0708 41.1836 72.1948 32.5835 67.6084 20.5918C63.022 8.60001 43.2463 15.3578 37.2855 15.3578C31.3247 15.3578 30.439 0 30.439 0L26.2218 7.83184H16.9476L14.3654 0C14.3654 0 9.25524 11.3897 9.25524 20.5918C9.25524 29.7938 13.0948 41.1836 21.7669 41.1836C30.439 41.1836 65.0708 41.1836 65.0708 41.1836Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M66.1677 11.5469C66.1677 11.5469 75.2801 21.514 66.1677 25.902C57.0552 30.2899 48.9777 19.8181 56.2264 13.587C63.4752 7.35577 66.1677 11.5469 66.1677 11.5469Z" fill="#DFDFE1"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M45.2286 25.2227C45.2286 25.2227 51.7375 31.8674 45.2286 34.7928C38.7197 37.7181 32.95 30.7369 38.1277 26.5827C43.3054 22.4286 45.2286 25.2227 45.2286 25.2227Z" fill="#DFDFE1"/>
</g>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6256 12.491C17.2822 13.4087 21.6656 17.5999 16.3576 20.5919C11.0495 23.5839 8.10655 15.1202 11.6143 12.491C15.122 9.8619 15.969 11.5734 16.6256 12.491Z" fill="#DFDFE1"/>
<path class="tail" d="M64.607 36.9884C63.5403 36.9616 62.6559 37.8957 62.6317 39.0748C62.6074 40.254 63.4525 41.2316 64.5191 41.2584C71.4441 41.4324 74.894 43.9691 75.5725 48.9417C75.9136 51.4411 75.4381 52.9312 73.7064 55.9529C73.5596 56.209 73.4831 56.3424 73.4101 56.4703C71.8166 59.264 71.15 61.0435 71.15 63.5664C71.15 71.2227 79.7571 75.4546 84.5073 69.697C85.2263 68.8256 85.1701 67.4748 84.3818 66.68C83.5935 65.8852 82.3716 65.9474 81.6526 66.8188C79.3651 69.5914 75.0138 67.452 75.0138 63.5664C75.0138 62.0612 75.4441 60.9122 76.6784 58.7484C76.7487 58.6252 76.8224 58.4967 76.9704 58.2386C79.1557 54.4252 79.9069 52.0708 79.393 48.3046C78.3965 41.0017 73.2332 37.2051 64.607 36.9884Z" fill="#F4F4F5"/>
<ellipse rx="1.2356" ry="1.42372" transform="matrix(-1 0 0 1 25.0067 16.9804)" fill="#7B8081"/>
<ellipse rx="1.2356" ry="1.42372" transform="matrix(-1 0 0 1 15.1219 16.9804)" fill="#7B8081"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.1157 21.2782C22.2227 21.1477 22.1298 20.9515 21.961 20.9515H18.0666C17.8978 20.9515 17.8049 21.1477 17.9119 21.2782L19.8591 23.6556C19.9391 23.7533 20.0885 23.7533 20.1685 23.6556L22.1157 21.2782Z" fill="#7B8081"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.356 35.5903H6.99995C5.34309 35.5903 3.99995 36.9335 3.99995 38.5903V41.1841H22.6978L19.356 35.5903Z" fill="#F4F4F5"/>
</svg>
!

CSS 

              
                body{
  text-align:center;
  margin-top:30px;
  background:black;
}

.tail {
  animation: spin 2.4s ease-in-out infinite;
  transform-origin: 59px 41px;
}
@keyframes spin {
    0% { transform: rotate(8deg); }
    60% { transform: rotate(0deg);}
   100% { transform: rotate(8deg);}
  }
/* Want to get the eyes to close and open at an interval
.eye1, eye2 {
  animation: close 1s ease-in-out infinite;
  transform-origin: 0px 10px;
  
}
@keyframes close {
    33% { transform: scale(4, 4); }
    66% { transform: scale(4, 4); }
  }
*/
!

JS
!
999px

Console