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

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.

If the stylesheet 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 CSS 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

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 Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import 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

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.

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 

              
                 <div >
     <svg 
          xmlns="http://www.w3.org/2000/svg"
          width="449.000000pt"
          height="470.000000pt"
          viewBox="0 0 449.000000 470.000000"
          preserveAspectRatio="xMidYMid meet"
        >
          <g
            transform="translate(0.000000,470.000000) scale(0.100000,-0.100000)"
            class="wolf-path"
          >
            <path
              d="M870 3942 l-33 -160 30 -324 30 -323 -32 -65 -33 -65 74 -78 c41 -43
  74 -83 74 -88 0 -5 -20 -40 -45 -79 -25 -39 -45 -72 -45 -74 0 -1 48 8 108 21
  59 13 112 22 118 21 6 -2 -54 -90 -133 -196 -78 -105 -143 -194 -143 -197 0
  -2 35 18 78 44 42 26 87 53 99 60 16 8 -4 -33 -72 -149 -52 -89 -95 -163 -95
  -165 0 -2 18 -21 40 -42 l40 -38 -35 -110 c-19 -60 -35 -114 -35 -118 0 -5 36
  17 81 47 44 31 83 56 85 56 3 0 -156 -198 -245 -304 -15 -18 -15 -19 9 -4 14
  9 81 48 150 88 69 40 140 81 157 92 18 11 33 17 33 15 0 -3 -40 -49 -89 -103
  -49 -55 -88 -100 -87 -102 2 -1 86 29 187 68 157 59 193 70 247 70 34 0 62 -3
  62 -6 0 -3 -33 -52 -73 -107 -40 -56 -76 -107 -80 -113 -3 -6 59 22 139 63 80
  41 147 73 149 71 5 -5 39 -67 187 -341 77 -144 153 -283 167 -308 23 -42 39
  -54 164 -124 103 -57 144 -75 157 -69 9 5 73 40 141 78 l124 69 189 348 c103
  192 189 349 191 349 1 0 64 -32 139 -71 76 -39 139 -69 142 -67 2 3 -32 55
  -76 117 -44 61 -80 113 -80 114 0 1 35 -1 78 -4 61 -5 112 -20 251 -73 96 -37
  175 -65 177 -64 1 2 -38 47 -88 101 -50 54 -89 99 -87 101 2 2 76 -39 164 -91
  88 -51 169 -99 179 -105 18 -9 -67 99 -204 261 -49 59 -39 57 59 -13 36 -25
  66 -44 67 -43 2 2 -13 56 -32 120 l-36 117 33 27 c17 16 36 31 42 34 5 4 4 16
  -3 30 -16 31 -148 256 -169 288 -15 24 -15 24 9 11 14 -7 60 -35 103 -61 42
  -26 77 -46 77 -43 0 2 -65 91 -145 197 -79 105 -140 193 -136 195 4 1 58 -8
  119 -21 62 -13 112 -22 112 -20 0 2 -23 38 -51 79 l-51 76 76 78 c42 43 76 83
  76 91 0 7 -13 36 -30 65 l-29 53 30 323 30 323 -32 163 c-17 89 -33 161 -35
  160 -127 -122 -140 -130 -538 -345 l-399 -214 -196 76 c-108 41 -202 75 -208
  75 -7 0 -100 -34 -208 -76 l-195 -76 -402 217 c-367 197 -409 222 -469 281
  l-66 65 -33 -159z m600 -357 c140 -97 261 -182 268 -189 10 -10 -6 -36 -84
  -134 -54 -67 -101 -122 -106 -122 -4 0 -8 57 -8 127 l0 128 -227 229 c-190
  190 -217 221 -163 183 36 -24 180 -124 320 -222z m1710 40 l-225 -225 -10
  -131 -10 -131 -98 122 c-83 102 -97 125 -85 136 15 15 641 453 648 454 3 0
  -96 -101 -220 -225z m-2044 3 l180 -213 46 -135 46 -135 -13 -90 c-8 -49 -14
  -102 -14 -117 -1 -22 50 -75 322 -330 177 -167 344 -324 371 -349 31 -28 -50
  83 -220 301 -148 190 -282 361 -297 381 l-27 35 245 220 c135 120 245 222 245
  227 0 4 -3 7 -7 7 -5 0 -33 14 -63 32 l-55 31 145 33 c80 18 146 31 146 31 1
  -1 14 -46 29 -100 15 -53 29 -96 30 -95 2 2 15 47 30 101 19 66 32 96 40 93 7
  -2 69 -17 139 -32 69 -15 126 -30 126 -33 0 -3 -25 -19 -55 -36 -30 -16 -55
  -32 -55 -35 0 -3 110 -104 245 -225 151 -135 241 -223 236 -229 -4 -6 -57 -74
  -118 -151 -60 -77 -174 -223 -253 -325 -79 -102 -159 -205 -179 -230 l-36 -45
  60 55 c288 265 685 645 685 654 0 7 -7 60 -15 119 l-15 106 48 135 47 134 179
  211 c98 116 181 211 185 211 8 0 31 -137 31 -185 0 -48 -92 -759 -100 -768 -4
  -4 -42 23 -85 61 l-79 68 -48 184 -47 185 -1 -211 0 -210 40 -54 c22 -29 40
  -56 40 -59 0 -3 -12 -17 -26 -32 l-26 -27 61 -93 c33 -52 58 -95 56 -97 -2 -2
  -20 1 -39 8 -20 6 -41 10 -46 8 -5 -2 9 -38 31 -81 22 -43 39 -81 36 -83 -2
  -2 -30 5 -63 16 l-59 20 60 -58 c33 -31 105 -99 160 -150 l99 -93 -33 -99
  c-18 -55 -36 -98 -40 -95 -4 2 -45 83 -91 179 -46 97 -85 174 -88 171 -3 -3
  -51 -355 -52 -387 0 -8 -123 -73 -192 -101 l-38 -16 65 129 c64 128 64 129 58
  194 -3 36 -9 66 -13 66 -3 0 -19 -31 -36 -69 -28 -66 -37 -76 -247 -266 -121
  -109 -219 -206 -222 -218 -2 -12 -16 -125 -31 -252 l-26 -230 -70 -118 c-60
  -101 -80 -126 -145 -180 -41 -34 -79 -64 -84 -65 -19 -7 -167 123 -196 173
  -17 28 -48 82 -71 120 l-41 70 -25 220 c-15 121 -29 234 -31 252 -5 26 -44 66
  -225 230 -213 191 -221 200 -247 265 -16 37 -31 68 -34 68 -3 0 -9 -30 -13
  -67 l-7 -66 66 -129 c36 -70 64 -128 61 -128 -3 0 -54 24 -113 52 -60 29 -109
  54 -111 54 -2 1 -14 91 -27 200 -14 110 -25 201 -25 204 -1 3 -43 -78 -94
  -179 l-93 -184 -35 102 -35 101 159 146 c87 81 158 148 158 150 0 2 -25 -6
  -57 -17 -31 -10 -58 -17 -61 -14 -3 2 15 41 38 86 l42 82 -37 -7 c-20 -4 -44
  -10 -53 -13 -17 -7 -9 8 71 132 l38 60 -30 25 -29 25 44 59 44 59 -1 211 -1
  211 -47 -183 -46 -184 -80 -69 c-44 -38 -83 -69 -86 -69 -3 0 -16 80 -28 178
  -12 97 -34 273 -50 391 -26 204 -27 217 -13 302 8 49 18 89 22 89 3 0 87 -96
  186 -212z m696 -2133 c15 -77 26 -143 25 -147 -2 -7 -286 490 -296 516 -2 6
  52 -43 120 -109 l124 -120 27 -140z m1090 352 c-6 -6 -74 -124 -151 -262 -78
  -137 -141 -243 -141 -235 0 8 12 76 27 150 l26 135 116 112 c64 62 120 112
  125 113 5 0 4 -6 -2 -13z"
            />
            <path
              d="M2025 3160 c-88 -43 -157 -79 -153 -79 4 -1 65 15 135 34 70 19 129
  32 131 30 3 -2 -1 -56 -8 -120 l-12 -116 -66 -89 c-42 -58 -69 -87 -76 -81 -6
  4 -63 46 -126 91 -113 83 -114 83 -82 39 18 -24 115 -155 215 -291 99 -136
  182 -246 184 -244 2 2 -16 45 -41 97 -84 180 -98 217 -90 231 16 26 204 278
  208 278 2 0 48 -60 102 -132 54 -73 102 -138 107 -145 6 -8 -15 -66 -62 -169
  -39 -87 -70 -159 -68 -160 1 -2 98 128 216 289 139 190 201 282 180 266 -19
  -14 -75 -55 -125 -92 l-92 -65 -64 87 -65 87 -15 122 c-7 67 -14 122 -13 122
  0 0 60 -16 134 -35 74 -19 136 -33 138 -32 2 3 -277 139 -317 155 -4 1 -17
  -48 -30 -109 -26 -123 -27 -123 -55 19 -11 50 -21 92 -24 91 -3 0 -78 -36
  -166 -79z"
            />
            <path
              d="M2201 2716 l-43 -44 37 -123 c21 -68 41 -130 45 -137 3 -7 25 47 49
  123 l42 136 -43 45 -43 44 -44 -44z"
            />
            <path
              d="M1450 2724 c0 -5 237 -452 273 -514 13 -24 88 -85 239 -195 121 -88
  222 -163 224 -167 2 -3 15 -149 29 -325 25 -320 32 -377 34 -313 4 97 50 630
  55 639 3 5 102 79 219 164 117 86 218 161 224 169 6 7 40 67 76 133 151 280
  217 406 217 411 0 5 -177 -162 -500 -471 -58 -55 -143 -148 -189 -205 -46 -58
  -89 -111 -96 -118 -10 -11 -30 9 -104 102 -64 80 -180 199 -374 383 -155 148
  -292 278 -304 290 -13 12 -23 20 -23 17z m465 -484 c108 -103 126 -125 172
  -213 28 -53 50 -97 49 -97 -1 0 -36 39 -77 88 -40 48 -143 165 -229 261 -220
  247 -236 267 -129 166 52 -50 148 -142 214 -205z m938 258 c-68 -74 -372 -418
  -432 -491 -35 -42 -66 -77 -68 -77 -2 0 20 46 50 101 53 99 61 108 263 300
  199 189 255 238 187 167z"
            />
            <path
              d="M2945 2372 l-68 -157 -213 -215 -212 -215 -42 -214 c-22 -117 -39
  -215 -38 -217 2 -2 35 74 73 168 78 191 62 169 345 481 l115 127 57 198 c31
  108 55 198 54 199 -1 1 -33 -68 -71 -155z"
            />
            <path
              d="M1484 2483 c3 -10 15 -54 27 -98 48 -180 70 -248 86 -269 10 -12 97
  -109 193 -215 191 -210 165 -169 286 -458 21 -51 39 -91 41 -90 1 2 -16 101
  -39 220 l-42 217 -209 207 -209 207 -65 148 c-36 81 -67 148 -70 148 -2 0 -2
  -8 1 -17z"
            />
            <path
              d="M2141 1076 l-34 -35 67 -85 c37 -47 69 -86 71 -86 2 0 34 39 71 86
  l67 87 -36 33 c-34 32 -41 34 -105 34 -64 0 -70 -2 -101 -34z"
            />
          </g>
        </svg> 
</div>
!

CSS 

              
                body {
  background: #0d0d0d;
}

.wolf-path {
  
  fill: transparent;
  stroke: red;
  stroke-width: 8;
  stroke-dasharray: 25000px;
  stroke-dashoffset: 25000px;
  animation-name: draw, grow;
  animation-duration: 3s, 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1, infinite;
  animation-timing-function: ease-in;
}

@keyframes grow {
  from {
    stroke-width: 15;
  }

  50% {
    stroke-width: 30;
  }

  to {
    stroke-width: 15;
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
!

JS 

              
                
/*use only when you need it to disappear*/
/*

$(window).on("load", function() {
  
  $(".loader-wrapper")
    .delay(3000)
    .fadeOut("medium");  
});

*/
!
999px

Console