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

              
                <svg viewBox="0 0 349 204" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
  </defs>
  <g id="最大18%還元！" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="percent">
      <path class="cls-3" d="M325.657,106.445453 C325.969,105.907453 326.619,105.667453 327.206,105.875453 L335.676,108.874453 C336.438,109.144453 336.767,110.040453 336.363,110.740453 L303.327,165.864453 L292.379,161.987453 L325.657,106.445453 Z M333.672,137.426453 C342.921,137.365453 349.693,143.467453 349.566,151.932453 C349.436,160.592453 342.699,166.404453 333.672,166.437453 C324.355,166.471453 317.777,160.739453 317.777,151.932453 C317.777,142.979453 324.573,137.486453 333.672,137.426453 Z M333.672,154.807453 C335.278,154.807453 336.58,153.505453 336.58,151.899453 C336.58,150.294453 335.278,148.992453 333.672,148.992453 C332.067,148.992453 330.765,150.294453 330.765,151.899453 C330.765,153.505453 332.067,154.807453 333.672,154.807453 Z M311.788,119.505453 C311.658,128.165453 304.921,133.977453 295.894,134.012453 C286.577,134.044453 280,128.313453 280,119.505453 C280,110.554453 286.796,105.060453 295.894,105.000453 C305.143,104.939453 311.916,111.040453 311.788,119.505453 Z M292.987,119.474453 C292.987,121.078453 294.289,122.380453 295.894,122.380453 C297.5,122.380453 298.802,121.078453 298.802,119.474453 C298.802,117.868453 297.5,116.565453 295.894,116.565453 C294.289,116.565453 292.987,117.868453 292.987,119.474453 Z">
      </path>
      <path class="cls-1" d="M319.657,101.445453 C319.969,100.907453 320.619,100.667453 321.206,100.875453 L329.676,103.874453 C330.438,104.144453 330.767,105.040453 330.363,105.740453 L297.327,160.864453 L286.379,156.987453 L319.657,101.445453 Z M327.672,132.426453 C336.921,132.365453 343.693,138.467453 343.566,146.932453 C343.436,155.592453 336.699,161.404453 327.672,161.437453 C318.355,161.471453 311.777,155.739453 311.777,146.932453 C311.777,137.979453 318.573,132.486453 327.672,132.426453 Z M327.672,149.807453 C329.278,149.807453 330.58,148.505453 330.58,146.899453 C330.58,145.294453 329.278,143.992453 327.672,143.992453 C326.067,143.992453 324.765,145.294453 324.765,146.899453 C324.765,148.505453 326.067,149.807453 327.672,149.807453 Z M305.788,114.505453 C305.658,123.165453 298.921,128.977453 289.894,129.012453 C280.577,129.044453 274,123.313453 274,114.505453 C274,105.554453 280.796,100.060453 289.894,100.000453 C299.143,99.9394534 305.916,106.040453 305.788,114.505453 Z M286.987,114.474453 C286.987,116.078453 288.289,117.380453 289.894,117.380453 C291.5,117.380453 292.802,116.078453 292.802,114.474453 C292.802,112.868453 291.5,111.565453 289.894,111.565453 C288.289,111.565453 286.987,112.868453 286.987,114.474453 Z">
      </path>
    </g>
    <g id="eight">
      <path class="cls-3" d="M223.2995,72.9836 C230.8015,72.9836 239.5625,75.8646 239.5625,83.9866 C239.5625,94.9356 227.1155,95.7846 223.2995,95.7846 C219.4835,95.7846 207.0345,94.9356 207.0345,83.9866 C207.0345,75.8646 215.7975,72.9836 223.2995,72.9836 Z M223.2995,122.8956 C233.3045,122.8956 244.9865,126.2346 244.9865,135.6506 C244.9865,143.9126 236.0675,149.6816 223.2995,149.6816 C210.5315,149.6816 201.6125,143.9126 201.6125,135.6506 C201.6125,126.8386 212.5045,122.8956 223.2995,122.8956 Z M259.2545,107.6466 C268.9905,114.4236 274.3275,124.3266 274.3275,136.2886 C274.3275,160.2306 253.3435,176.9516 223.2995,176.9516 C193.2545,176.9516 172.2715,160.2306 172.2715,136.2886 C172.2715,124.3546 177.6155,114.4536 187.3625,107.6666 C181.2985,101.4326 178.0125,93.1516 178.0125,83.5076 C178.0125,61.5376 196.6355,46.1936 223.2995,46.1936 C249.9635,46.1936 268.5855,61.5376 268.5855,83.5076 C268.5855,93.1406 265.3065,101.4166 259.2545,107.6466 Z">
      </path>
      <path class="cls-1" d="M217.2995,67.9836 C224.8015,67.9836 233.5625,70.8646 233.5625,78.9866 C233.5625,89.9356 221.1155,90.7846 217.2995,90.7846 C213.4835,90.7846 201.0345,89.9356 201.0345,78.9866 C201.0345,70.8646 209.7975,67.9836 217.2995,67.9836 Z M217.2995,117.8956 C227.3045,117.8956 238.9865,121.2346 238.9865,130.6506 C238.9865,138.9126 230.0675,144.6816 217.2995,144.6816 C204.5315,144.6816 195.6125,138.9126 195.6125,130.6506 C195.6125,121.8386 206.5045,117.8956 217.2995,117.8956 Z M253.2545,102.6466 C262.9905,109.4236 268.3275,119.3266 268.3275,131.2886 C268.3275,155.2306 247.3435,171.9516 217.2995,171.9516 C187.2545,171.9516 166.2715,155.2306 166.2715,131.2886 C166.2715,119.3546 171.6155,109.4536 181.3625,102.6666 C175.2985,96.4326 172.0125,88.1516 172.0125,78.5076 C172.0125,56.5376 190.6355,41.1936 217.2995,41.1936 C243.9635,41.1936 262.5855,56.5376 262.5855,78.5076 C262.5855,88.1406 259.3065,96.4166 253.2545,102.6466 Z">
      </path>
    </g>
    <g id="one">
      <path class="cls-3" d="M91.0695,65.3356 C90.7975,64.3656 91.3495,63.3546 92.3135,63.0596 L139.2085,48.7476 C139.5605,48.6396 139.9255,48.5866 140.2915,48.5866 L151.4705,48.5866 C152.4935,48.5866 153.3245,49.4146 153.3245,50.4406 L153.3245,174.5596 L124.6235,174.5596 L124.6235,81.5496 L99.6595,88.9726 C98.6685,89.2676 97.6265,88.6926 97.3455,87.6966 L91.0695,65.3356 Z">
      </path>
      <path class="cls-1" d="M85.0695,60.3356 C84.7975,59.3656 85.3495,58.3546 86.3135,58.0596 L133.2085,43.7476 C133.5605,43.6396 133.9255,43.5866 134.2915,43.5866 L145.4705,43.5866 C146.4935,43.5866 147.3245,44.4146 147.3245,45.4406 L147.3245,169.5596 L118.6235,169.5596 L118.6235,76.5496 L93.6595,83.9726 C92.6685,84.2676 91.6265,83.6926 91.3455,82.6966 L85.0695,60.3356 Z">
      </path>
    </g>
    <g id="star-1">
      <path class="cls-3" d="M70.8054,41.2868 C70.1834,38.7168 69.3834,36.8498 68.4054,35.6868 C67.6254,34.7588 65.7584,33.9588 62.8054,33.2868 C65.5874,32.6498 67.4544,31.8498 68.4054,30.8868 C69.3724,29.9068 70.1724,28.0408 70.8054,25.2868 C71.4274,27.8858 72.2274,29.7528 73.2054,30.8868 C74.0114,31.8208 75.8774,32.6208 78.8054,33.2868 C75.9474,33.9358 74.0804,34.7368 73.2054,35.6868 C72.2304,36.7438 71.4304,38.6108 70.8054,41.2868">
      </path>
    </g>
    <g id="star-2">
      <path class="cls-3" d="M116.1154,14.9998 C115.7264,13.3938 115.2264,12.2268 114.6154,11.4998 C114.1274,10.9208 112.9604,10.4208 111.1154,9.9998 C112.8534,9.6018 114.0204,9.1018 114.6154,8.4998 C115.2194,7.8878 115.7194,6.7218 116.1154,4.9998 C116.5034,6.6248 117.0034,7.7908 117.6154,8.4998 C118.1184,9.0838 119.2854,9.5838 121.1154,9.9998 C119.3284,10.4058 118.1624,10.9058 117.6154,11.4998 C117.0054,12.1608 116.5054,13.3278 116.1154,14.9998">
      </path>
    </g>
    <g id="star-3">
        <path class="cls-3" d="M199.1194,9.9998 C198.7314,8.3938 198.2314,7.2268 197.6194,6.4998 C197.1324,5.9208 195.9654,5.4208 194.1194,4.9998 C195.8594,4.6018 197.0254,4.1018 197.6194,3.4998 C198.2244,2.8878 198.7244,1.7218 199.1194,-0.0002 C199.5084,1.6248 200.0084,2.7908 200.6194,3.4998 C201.1234,4.0838 202.2904,4.5838 204.1194,4.9998 C202.3334,5.4058 201.1674,5.9058 200.6194,6.4998 C200.0114,7.1608 199.5114,8.3278 199.1194,9.9998">
      </path>
    </g>
    <g id="star-4">
      <path class="cls-3" d="M260.9244,25.8648 C260.3024,23.2948 259.5024,21.4278 258.5244,20.2648 C257.7444,19.3368 255.8774,18.5368 252.9244,17.8648 C255.7064,17.2278 257.5734,16.4278 258.5244,15.4648 C259.4914,14.4848 260.2914,12.6188 260.9244,9.8648 C261.5464,12.4638 262.3464,14.3308 263.3244,15.4648 C264.1304,16.3988 265.9964,17.1988 268.9244,17.8648 C266.0664,18.5148 264.2004,19.3138 263.3244,20.2648 C262.3494,21.3218 261.5494,23.1888 260.9244,25.8648">
      </path>
    </g>
    <g id="star-5">
      <path class="cls-3" d="M296.4244,53.0278 C296.0354,51.4218 295.5354,50.2548 294.9244,49.5278 C294.4364,48.9478 293.2694,48.4478 291.4244,48.0278 C293.1634,47.6298 294.3294,47.1298 294.9244,46.5278 C295.5284,45.9158 296.0284,44.7488 296.4244,43.0278 C296.8124,44.6528 297.3124,45.8188 297.9244,46.5278 C298.4284,47.1118 299.5944,47.6118 301.4244,48.0278 C299.6384,48.4338 298.4714,48.9338 297.9244,49.5278 C297.3154,50.1888 296.8154,51.3548 296.4244,53.0278"></path>
    </g>
    <g id="star-6">
      <path class="cls-3" d="M151.4206,194.7541 C151.9676,195.3481 153.1346,195.8481 154.9206,196.2541 C153.0906,196.6701 151.9236,197.1701 151.4206,197.7541 C150.8096,198.4621 150.3096,199.6291 149.9206,201.2541 C149.5246,199.5331 149.0246,198.3661 148.4206,197.7541 C147.8266,197.1521 146.6596,196.6521 144.9206,196.2541 C146.7666,195.8341 147.9326,195.3341 148.4206,194.7541 C149.0316,194.0271 149.5316,192.8601 149.9206,191.2541 C150.3116,192.9261 150.8116,194.0931 151.4206,194.7541">
      </path>
    </g>
    <g id="star-7">
      <path class="cls-3" d="M255.4566,198.5261 C256.0046,199.1201 257.1706,199.6201 258.9566,200.0261 C257.1276,200.4421 255.9606,200.9421 255.4566,201.5261 C254.8456,202.2341 254.3456,203.4011 253.9566,205.0261 C253.5616,203.3051 253.0616,202.1381 252.4566,201.5261 C251.8626,200.9241 250.6956,200.4241 248.9566,200.0261 C250.8026,199.6061 251.9696,199.1061 252.4566,198.5261 C253.0686,197.7991 253.5686,196.6321 253.9566,195.0261 C254.3476,196.6981 254.8476,197.8651 255.4566,198.5261">
      </path>
    </g>
    <g id="star-8">
      <path class="cls-3" d="M286.2546,185.6001 C287.1306,186.5501 288.9976,187.3501 291.8546,188.0001 C288.9276,188.6661 287.0606,189.4651 286.2546,190.4001 C285.2766,191.5341 284.4766,193.4001 283.8546,196.0001 C283.2216,193.2461 282.4216,191.3791 281.4546,190.4001 C280.5036,189.4371 278.6366,188.6371 275.8546,188.0001 C278.8076,187.3271 280.6746,186.5271 281.4546,185.6001 C282.4326,184.4371 283.2336,182.5701 283.8546,180.0001 C284.4806,182.6761 285.2796,184.5431 286.2546,185.6001">
      </path>
    </g>
  <!-- canaria -->
    <g id="canaria-head">
      <path class="cls-1" d="M47.8142,79.9865 C26.0582,83.8225 11.5312,104.5695 15.3682,126.3245 L18.8402,146.0215 C19.7672,151.2745 24.6392,154.8285 29.8712,154.2015 L36.6812,155.0605 C36.6812,155.0605 36.0482,154.4225 35.1222,153.3045 L84.8612,144.5335 C84.3572,145.9525 83.9522,146.7255 83.9522,146.7255 L90.0582,143.5895 C95.1892,142.3885 98.5512,137.3825 97.6252,132.1295 L94.1522,112.4325 C90.3162,90.6775 69.5702,76.1505 47.8142,79.9865">
      </path>
      <path class="cls-3" d="M86.1306,124.5285 C84.3406,114.3745 80.1196,108.5275 72.0806,97.6895 L70.9836,96.2105 L69.7266,100.4355 C66.5896,110.9815 57.7636,118.8495 46.9286,120.7595 L38.7316,122.2055 C31.2666,123.5215 25.9106,128.5275 27.5986,138.1035 C28.5126,143.2875 31.0956,147.8155 33.2766,150.8905 C38.4756,151.6005 48.7326,151.9205 60.1436,149.9075 C71.5486,147.8965 81.0746,144.0905 85.7206,141.6445 C86.6796,137.7855 87.4306,131.9025 86.1306,124.5285">
      </path>
      <path d="M59.1013,143.9992 C55.8383,144.5752 52.7263,142.3952 52.1503,139.1322 C52.0543,138.5882 52.4173,138.0692 52.9613,137.9742 L62.8093,136.2372 C63.3533,136.1412 63.8723,136.5042 63.9683,137.0482 C64.5433,140.3112 62.3643,143.4242 59.1013,143.9992 Z M72.1106,111.2424 L67.1866,112.1104 C66.6426,112.2064 66.1236,111.8434 66.0276,111.2994 C65.9326,110.7554 66.2956,110.2374 66.8396,110.1414 L71.7636,109.2724 C72.3076,109.1774 72.8256,109.5404 72.9216,110.0844 C73.0176,110.6284 72.6546,111.1464 72.1106,111.2424 Z M77.1247,118.7175 C77.6037,118.9915 77.7697,119.6025 77.4957,120.0815 L76.1477,122.4335 C77.2557,123.4405 78.0557,124.8035 78.3357,126.3915 C79.0077,130.1985 76.4647,133.8295 72.6577,134.5005 C68.8507,135.1725 65.2197,132.6305 64.5487,128.8225 C63.8767,125.0155 66.4197,121.3845 70.2267,120.7135 C71.7327,120.4475 73.2077,120.6915 74.4867,121.3115 L75.7607,119.0875 C76.0347,118.6085 76.6457,118.4425 77.1247,118.7175 Z M75.9323,124.2771 C75.6923,122.9171 74.3953,122.0091 73.0363,122.2491 C71.6763,122.4891 70.7683,123.7851 71.0083,125.1451 C71.2473,126.5051 72.5443,127.4131 73.9043,127.1731 C75.2643,126.9331 76.1723,125.6371 75.9323,124.2771 Z M40.6823,125.9231 C44.4903,125.2521 48.1203,127.7941 48.7913,131.6011 C49.4633,135.4081 46.9213,139.0391 43.1133,139.7101 C39.3063,140.3811 35.6763,137.8401 35.0043,134.0321 C34.7243,132.4441 35.0103,130.8901 35.7063,129.5651 L33.6363,127.8161 C33.2143,127.4591 33.1613,126.8281 33.5173,126.4061 C33.8733,125.9841 34.5043,125.9311 34.9263,126.2881 L36.8843,127.9421 C37.8733,126.9221 39.1763,126.1891 40.6823,125.9231 Z M46.3879,129.4865 C46.1479,128.1265 44.8519,127.2185 43.4919,127.4585 C42.1319,127.6985 41.2239,128.9945 41.4639,130.3545 C41.7039,131.7145 42.9999,132.6225 44.3599,132.3825 C45.7199,132.1425 46.6279,130.8465 46.3879,129.4865 Z" id="Combined-Shape" fill="#F05505">
      </path>
      <path class="cls-4" d="M96.1067,80.6057 L76.4467,66.8397 C75.0897,65.8897 73.2187,66.2197 72.2687,67.5767 L64.8127,78.2257 L59.8977,74.7837 L57.6027,78.0607 L92.0077,102.1507 L94.3017,98.8747 L89.3867,95.4327 L96.8437,84.7837 C97.7937,83.4267 97.4637,81.5557 96.1067,80.6057">
      </path>
      <polygon class="cls-1" points="89.3869 95.4328 64.8119 78.2258 68.2539 73.3108 92.8279 90.5178">
      </polygon>
    </g>
    <g id="canaria-right-leg">
      <path class="cls-4" d="M48.1433,185.9079 L48.1433,177.9079 C48.1433,175.6989 49.9343,173.9079 52.1433,173.9079 C54.3523,173.9079 56.1433,175.6989 56.1433,177.9079 L56.1433,185.9079 C56.1433,188.1169 54.3523,189.9079 52.1433,189.9079 C49.9343,189.9079 48.1433,188.1169 48.1433,185.9079">
      </path>
      <path class="cls-1" d="M56.2483,203.9079 L50.4703,203.9079 C48.0803,203.9079 46.1433,201.9709 46.1433,199.5809 L46.1433,185.9079 L58.1433,185.9079 L58.1433,202.0129 C58.1433,203.0599 57.2943,203.9079 56.2483,203.9079">
      </path>
      <path class="cls-3" d="M56.1433,193.9079 C56.1433,195.5649 54.8003,196.9079 53.1433,196.9079 C51.4863,196.9079 50.1433,195.5649 50.1433,193.9079 C50.1433,192.2509 51.4863,190.9079 53.1433,190.9079 C54.8003,190.9079 56.1433,192.2509 56.1433,193.9079">
      </path>
    </g>
    <g id="canaria-left-leg">
      <path class="cls-4" d="M79.4568,179.5652 L73.7998,173.9082 C72.2378,172.3462 69.7058,172.3462 68.1438,173.9082 C66.5818,175.4702 66.5818,178.0032 68.1438,179.5652 L73.7998,185.2222 C75.3618,186.7842 77.8948,186.7842 79.4568,185.2222 C81.0188,183.6602 81.0188,181.1272 79.4568,179.5652">
      </path>
      <path class="cls-1" d="M86.4538,198.0241 L90.5388,193.9381 C92.2288,192.2491 92.2288,189.5091 90.5388,187.8191 L80.8708,178.1501 L72.3858,186.6361 L83.7738,198.0241 C84.5138,198.7641 85.7138,198.7641 86.4538,198.0241">
      </path>
      <path class="cls-3" d="M79.4568,190.8786 C80.6288,192.0506 82.5278,192.0506 83.6998,190.8786 C84.8718,189.7076 84.8718,187.8076 83.6998,186.6356 C82.5278,185.4646 80.6288,185.4646 79.4568,186.6356 C78.2858,187.8076 78.2858,189.7076 79.4568,190.8786">
      </path>
    </g>
    <g id="canaria-body">
      <path class="cls-1" d="M78.6433,174.9079 C78.6433,174.6589 73.5523,157.9369 73.5523,157.9369 C71.7713,151.9079 66.1433,149.9079 60.1433,149.9079 C54.1433,149.9079 48.5143,151.9079 46.7343,157.9369 C46.7343,157.9369 41.6433,174.6589 41.6433,174.9079 C41.6433,177.6699 47.3553,179.9079 60.1433,179.9079 C72.9313,179.9079 78.6433,177.6699 78.6433,174.9079">
      </path>
      <path class="cls-3" d="M60.1433,149.9079 L66.9643,149.9079 C69.5823,149.9079 65.0433,158.9079 65.0433,158.9079 L60.1433,153.9079 L55.2423,158.9079 C55.2423,158.9079 50.7043,149.9079 53.3223,149.9079 L60.1433,149.9079 Z">
      </path>
      <path class="cls-4" d="M66.1926,147.5583 L62.1436,148.9083 L58.1436,148.9083 L54.0936,147.5583 C53.1336,147.2383 52.1436,147.9533 52.1436,148.9643 L52.1436,152.8513 C52.1436,153.8633 53.1336,154.5783 54.0936,154.2583 L58.1436,152.9083 L62.1436,152.9083 L66.1926,154.2583 C67.1516,154.5783 68.1436,153.8633 68.1436,152.8513 L68.1436,148.9643 C68.1436,147.9533 67.1516,147.2383 66.1926,147.5583">
      </path>
    </g>
    <g id="canaria-left-hand">
      <path class="cls-3" d="M97.9665,132.3523 L92.6075,140.0063 L91.8705,135.8283 C91.6785,134.7403 90.6415,134.0133 89.5535,134.2053 C88.4665,134.3973 87.7395,135.4353 87.9315,136.5223 L88.8545,141.7553 C89.1595,143.4893 90.1065,145.0353 91.4905,146.1093 L86.3185,153.4953 C85.6855,154.4003 85.9045,155.6473 86.8095,156.2813 C87.7145,156.9143 88.9615,156.6943 89.5955,155.7893 L95.3465,147.5763 C97.7325,147.7323 100.1385,146.6843 101.6105,144.5833 L106.1575,138.0883 C107.7415,135.8263 107.1925,132.7083 104.9295,131.1243 C102.6685,129.5403 99.5505,130.0903 97.9665,132.3523">
      </path>
    </g>
    <g id="canaria-left-arm">
      <path class="cls-3" d="M75.5017,158.8694 C74.4137,159.0614 73.3767,158.3354 73.1847,157.2474 C72.9927,156.1594 73.7197,155.1224 74.8077,154.9304 L87.6097,152.6734 C88.6977,152.4814 89.7347,153.2074 89.9267,154.2954 C90.1187,155.3834 89.3927,156.4204 88.3047,156.6124 L75.5017,158.8694 Z">
      </path>
      <path class="cls-1" d="M76.1965,162.8088 L77.4295,162.5918 C80.5555,162.0398 82.6435,159.0588 82.0925,155.9328 L81.2135,150.9478 C81.0985,150.2998 80.4815,149.8678 79.8345,149.9818 L74.1125,150.9908 C70.8495,151.5668 68.6705,154.6788 69.2455,157.9418 C69.8215,161.2048 72.9325,163.3838 76.1965,162.8088">
      </path>
    </g>
    <g id="canaria-right-hand">
      <path class="cls-3" d="M15.7375,179.8283 L22.3435,173.2223 L18.1015,173.2223 C16.9965,173.2223 16.1015,172.3263 16.1015,171.2223 C16.1015,170.1173 16.9965,169.2223 18.1015,169.2223 L23.4155,169.2223 C25.1755,169.2223 26.8625,169.8853 28.1605,171.0623 L34.5365,164.6863 C35.3175,163.9053 36.5835,163.9053 37.3645,164.6863 C38.1465,165.4673 38.1465,166.7333 37.3645,167.5153 L30.2745,174.6053 C30.8435,176.9273 30.2285,179.4793 28.4155,181.2933 L22.8085,186.8993 C20.8565,188.8523 17.6905,188.8523 15.7375,186.8993 C13.7845,184.9473 13.7845,181.7813 15.7375,179.8283">
      </path>
      <path class="cls-3" d="M46.5573,158.3225 C47.3383,157.5415 47.3383,156.2755 46.5573,155.4935 C45.7763,154.7135 44.5103,154.7135 43.7283,155.4935 L34.5363,164.6865 C33.7553,165.4675 33.7553,166.7335 34.5363,167.5145 C35.3173,168.2955 36.5833,168.2955 37.3653,167.5145 L46.5573,158.3225 Z">
      </path>
      <path class="cls-1" d="M49.386,161.1506 L48.501,162.0356 C46.256,164.2806 42.616,164.2806 40.371,162.0356 L36.792,158.4566 C36.327,157.9916 36.327,157.2386 36.792,156.7736 L40.901,152.6656 C43.244,150.3226 47.043,150.3226 49.386,152.6656 C51.729,155.0086 51.729,158.8076 49.386,161.1506">
      </path>
    </g>
  </g>
</svg>
!

CSS 

              
                body {
  background: rgba(255,242,61,100);
}

.cls-1 {
  fill:#f05505;
}

.cls-2 {
  fill:#f8a702;
}

.cls-3 {
  fill:#fff;
}

.cls-4 {
  fill:#05a0f0;
}

#star-1 {
  animation: star-1-anim 1s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes star-1-anim {
  0% {
    transform: scale(0.5)
  }
  10% {
    transform: scale(1)
  }
  100% {
    transform: scale(0.5)
  }
}

#star-2 {
  animation: star-2-anim 1s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes star-2-anim {
  0% {
    transform: scale(2)
  }
  20% {
    transform: scale(1)
  }
  100% {
    transform: scale(2)
  }
}

#star-3 {
  animation: star-3-anim 1s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes star-3-anim {
  0% {
    transform: scale(0.5)
  }
  30% {
    transform: scale(1)
  }
  100% {
    transform: scale(0.5)
  }
}

#star-4 {
  animation: star-4-anim 1s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes star-4-anim {
  0% {
    transform: scale(2)
  }
  40% {
    transform: scale(1)
  }
  100% {
    transform: scale(2)
  }
}

#star-5 {
  animation: star-5-anim 1s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes star-5-anim {
  0% {
    transform: scale(0.5)
  }
  50% {
    transform: scale(1)
  }
  100% {
    transform: scale(0.5)
  }
}

#star-6 {
  animation: star-6-anim 1s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes star-6-anim {
  0% {
    transform: scale(2)
  }
  60% {
    transform: scale(1)
  }
  100% {
    transform: scale(2)
  }
}

#star-7 {
  animation: star-7-anim 1s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes star-7-anim {
  0% {
    transform: scale(0.5)
  }
  70% {
    transform: scale(1)
  }
  100% {
    transform: scale(0.5)
  }
}

#star-8 {
  animation: star-8-anim 1s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes star-8-anim {
  0% {
    transform: scale(2)
  }
  80% {
    transform: scale(1)
  }
  100% {
    transform: scale(2)
  }
}

#canaria-head {
  animation: canaria-head-anim .7s linear infinite;
  transform-origin: bottom;
  transform-box: fill-box;
}

@keyframes canaria-head-anim {
   0% {
    transform: rotate(3deg)
  }
  50% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(3deg)
  }
}

#canaria-left-hand {
  animation: canaria-left-hand-anim .7s alternate infinite;
  transform-origin: bottom;
  transform-box: fill-box;
}

@keyframes canaria-left-hand-anim {
   0% {
    transform: rotate(15deg)
  }
  50% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(15deg)
  }
}

#canaria-left-arm {
  animation: canaria-left-arm-anim .7s alternate infinite;
  transform-origin: left;
  transform-box: fill-box;
}

@keyframes canaria-left-arm-anim {
  0% {
    transform: rotate(0deg)
  }
  50% {
    transform: rotate(3deg)
  }
  100% {
    transform: rotate(0deg)
  }
}

#one {
  align-self: flex-end;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: one-anim;
  animation-timing-function: ease;
}

@keyframes one-anim {
  50% {
    transform: scale(1,1) translateY(0); 
  }
  57% {
    transform: scale(1,1) translateY(-7px); 
  }
  64% {
    transform: scale(1,1) translateY(0); 
  }
  100% {
    transform: scale(1,1) translateY(0); 
  }
}

#eight {
  align-self: flex-end;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: eight-anim;
  animation-timing-function: ease;
}

@keyframes eight-anim {
  55% {
    transform: scale(1,1) translateY(0); 
  }
  62% {
    transform: scale(1,1) translateY(-7px); 
  }
  69% {
    transform: scale(1,1) translateY(0); 
  }
  100% {
    transform: scale(1,1) translateY(0); 
  }
}

#percent {
  align-self: flex-end;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-name: percent-anim;
  animation-timing-function: ease;
}

@keyframes percent-anim {
  60% {
    transform: scale(1,1) translateY(0); 
  }
  67% {
    transform: scale(1,1) translateY(-7px); 
  }
  74% {
    transform: scale(1,1) translateY(0); 
  }
  100% {
    transform: scale(1,1) translateY(0); 
  }
}
!

JS
!
999px

Console