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 

              
                <header>
  <h1>Mountainscape</h1>
  <h2>A responsive parallax mountainscape</h2>
  <p>Built with SVG background images</p>
</header>
!

CSS 

              
                html,
body {
  background-color: #505e52;
  color: #ffffff;
  margin: 0;
  padding: 0;
}

h1,
h2,
p {
  font-family: "ropa sans", sans-serif;
  text-transform: uppercase;
  margin: 0;
}

header {
  margin: 0;
  padding: 1rem;

  min-height: 250px;

  color: #fff;
  text-shadow: 1px 1px 0 #505e52;
  
  background-color: #ffffff;
  background-repeat: no-repeat;

  background-size:  
    /* Foreground */
    100% auto,
    /* Mid1 */
    100% auto,
    /* Mid2 */
    100% auto,
    /* Mid3 */
    100% auto,
    /* Mid4 */
    100% auto,
    /* Mid5 */
    100% auto,
    /* Mid6 */
    100% auto,
    /* Fuji */
    100% auto,
    /* Photo */
    cover;

  background-position: 
    /* Foreground */
    left bottom,
    /* Mid1 */
    right bottom,
    /* Mid2 */
    left bottom,
    /* Mid3 */
    left bottom,
    /* Mid4 */
    left bottom,
    /* Mid5 */
    center bottom,
    /* Mid6 */
    right bottom,
    /* Fuji */
    center bottom,
    /* Photo */
    center center;

  background-image: 
    /* Foreground */
    url('data:image/svg+xml;utf8,<svg width="798px" height="32px" viewBox="0 0 798 32" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="Page-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M4.52589904,31.5 L793.474101,31.5 C699.75911,10.8346704 568.265031,0.5 399,0.5 C229.734969,0.5 98.2408899,10.8346704 4.52589904,31.5 Z" id="Foreground" stroke="%23505E52" fill="%23505E52"></path></g></svg>'),
    /* Mid1 */
    url('data:image/svg+xml;utf8,<svg width="798px" height="108px" viewBox="0 0 798 108" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="Page-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon id="Mid1" fill="%23627564" points="0 108 370 102 464 58 532 43 596 10 640 23.5 710 43 772 29 798 0 798 108"></polygon></g></svg>'),
    /* Mid2 */
    url('data:image/svg+xml;utf8,<svg width="798px" height="79px" viewBox="0 0 798 79" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="Page-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M0.5,78.5 L763.563849,78.5 L246.922516,63.4939598 L144.922516,47.4939598 L144.749482,47.4327131 L87.8297942,14.4792097 L0.5,0.585833396 L0.5,78.5 Z" id="Mid2" stroke="%23718874" fill="%23718874"></path></g></svg>'),
    /* Mid3 */
    url('data:image/svg+xml;utf8,<svg width="798px" height="114px" viewBox="0 0 798 114" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="Page-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M0.5,113.5 L768.304081,113.5 L322.791016,98.4932441 L264.830519,42.5313856 L165.87474,57.5246854 L85.8962644,0.540021667 L0.5,21.3925979 L0.5,113.5 Z" id="Mid3" stroke="%23627264" fill="%23627264"></path></g></svg>'),
    /* Mid4 */
    url('data:image/svg+xml;utf8,<svg width="798px" height="144px" viewBox="0 0 798 144" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="Page-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M0.5,143.5 L781.797071,143.5 L538.807477,128.48906 L476.738719,77.4325009 L381.805971,37.4608177 L381.686621,37.3896067 L335.90757,0.567326717 L236.173504,37.4689309 L235.955308,37.4979986 L158.094093,30.5104537 L74.2062056,71.4554989 L0.5,104.822497 L0.5,143.5 Z" id="Mid4" stroke="%23899B8B" fill="%23899B8B"></path></g></svg>'),
    /* Mid5 */
    url('data:image/svg+xml;utf8,<svg width="798px" height="169px" viewBox="0 0 798 169" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="Page-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M1.56023253,168.5 L785.313627,168.5 L683.748322,160.481686 L658.716285,129.942601 L572.714155,107.442044 L572.610793,107.313876 L547.679908,76.3841106 L505.640699,41.3477107 L475.755792,10.4666399 L415.119118,0.526201652 L369.232003,32.4429158 L285.207567,76.4548803 L182.207567,123.45488 L182.091749,123.49151 L107.048383,137.497654 L35.1816577,144.484696 L1.56023253,168.5 Z" id="Mid5" stroke="%23718874" fill="%23718874"></path></g></svg>'),
    /* Mid6 */
    url('data:image/svg+xml;utf8,<svg width="798px" height="169px" viewBox="0 0 798 169" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="Page-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M24.1353582,168.5 L797.5,168.5 L797.5,85.3662561 L699.849202,54.4767178 L699.683381,54.3869786 L633.93975,0.596734696 L558.284646,40.4152104 L507.328729,84.8767456 L507.145241,84.9784403 L423.284251,110.436241 L386.23749,153.490585 L24.1353582,168.5 Z" id="Mid6" stroke="%23899B8B" fill="%23899B8B"></path></g></svg>'),
    /* Fuji */
    url('data:image/svg+xml;utf8,<svg width="798px" height="243px" viewBox="0 0 798 243" version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><g id="Page-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Fuji" transform="translate(0.000000, 1.000000)" stroke="%23A3BDA6"><path d="M2.7104185,241.5 L796.492102,241.5 L746.704992,204.403696 L668.774942,147.446485 L545.801041,85.4587106 L462.801041,49.4587106 L462.696045,49.3970028 L398.990941,0.622782952 L331.225445,49.4462896 L234.295648,98.4108264 L144.351573,187.355523 L144.178402,187.46709 L2.7104185,241.5 Z" id="Back" fill="%23A3BDA6"></path><polygon id="Snowcap" fill="%23F4F4F4" points="331 49 399 0 463 49 453 58 438 49 431 58 415 49 399 65 391 58 383 65 372 41 363 58 353 49 340 65"></polygon></g></g></svg>'),
    /* Photo */
    url('https://oliverhodgson.com/media/images/bg_header.jpg');
}

/*
  Switch to a fixed SVG on larger screens
*/
@media (min-width: 800px) {
  
  header {
    background-size:
      /* Mountains */
      1500px 243px,
      /* Photo */
      cover;
    
    background-position:
      /* Mountains */
      center bottom,
      /* Photo */
      center top;
    
    background-image:
      /* Mountains */
      url('data:image/svg+xml;utf8,<svg width="1500px" height="244px" viewBox="0 0 1500 244" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Fixed" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Fuji" transform="translate(350.000000, 1.436406)" stroke="%23A3BDA6"><path d="M2.6753724,242.063594 L798.470284,242.063594 L746.705206,204.176188 L668.775143,147.282534 L545.801228,85.3639313 L462.801228,49.4041074 L462.696259,49.3424823 L398.990948,0.622536061 L331.225245,49.3917067 L234.295438,98.3016034 L144.351374,187.147026 L144.180583,187.257558 L2.6753724,242.063594 Z" id="Back" fill="%2391AC94"></path><polygon id="Snowcap" fill="%23F4F4F4" points="332 49.0330152 399.058837 -5.68434189e-14 462 49.0330152 453.070781 58.0390792 438.067463 49.0330152 431.065915 58.0390792 415.062376 49.0330152 399.058837 65.0437956 391.057067 58.0390792 383.055298 65.0437956 375 42.5635944 363.050874 58.0390792 353.048662 49.0330152 340.045786 65.0437956"></polygon></g><g id="Mountains" transform="translate(0.000000, 74.436406)"><path d="M983.93975,0.596734696 L908.284646,40.4152104 L857.328729,84.8767456 L857.145241,84.9784403 L773.284251,110.436241 L736.237772,153.490257 L373.314843,169.063594 L1495.66236,169.063594 L1392.88624,145.050481 L1392.71456,144.974111 L1324.65762,97.6461846 L1279.91118,55.6026268 L1195.04981,97.815462 L1149.86401,85.0447468 L1149.85386,85.0417594 L1049.85386,54.478165 L1049.68338,54.3869786 L983.93975,0.596734696 Z" id="Combined-Shape" stroke="%23899B8B" fill="%23899B8B"></path><path d="M351.532289,169.063594 L1137.85009,169.063594 L1033.74767,160.480893 L1008.71629,129.942601 L922.714155,107.442044 L922.610793,107.313876 L897.679908,76.3841106 L855.640699,41.3477107 L825.755792,10.4666399 L765.119118,0.526201652 L719.232003,32.4429158 L635.207567,76.4548803 L532.207567,123.45488 L532.091749,123.49151 L457.048383,137.497654 L385.184484,144.484422 L351.532289,169.063594 Z" id="Mid5" stroke="%23718874" fill="%23718874"></path><path d="M350.5,169.063594 L1134.2267,169.063594 L888.807119,153.488765 L826.738719,102.432501 L731.805971,62.4608177 L731.686621,62.3896067 L685.90757,25.5673267 L586.173504,62.4689309 L585.955308,62.4979986 L508.094093,55.5104537 L424.206206,96.4554989 L350.5,129.822497 L350.5,169.063594 Z" id="Mid4" stroke="%23899B8B" fill="%23899B8B"></path><path d="M1121.19322,169.063594 L672.790801,153.493037 L614.830519,97.5313856 L515.87474,112.524685 L435.895085,55.5391813 L350.172189,76.036517 L291.878139,105.183542 L266.74927,76.4727079 L191.125002,67.0829544 L124.349529,112.367096 L98.2963477,147.001387 L16.7621043,169.063594 L1121.19322,169.063594 Z" id="Combined-Shape" stroke="%23627264" fill="%23627264"></path><path d="M349.999824,169.063594 L1116.26024,168.523769 L596.922516,153.49396 L494.922516,137.49396 L494.749482,137.432713 L437.829794,104.47921 L349.930178,90.4951009 L310.993443,85.0040229 L263.166176,90.4842307 L212.102395,121.586673 L156.015337,112.508989 L78.1717019,129.973907 L2.0678058,169.063594 L349.999824,169.063594 Z" id="Combined-Shape" stroke="%23718874" fill="%23718874"></path><path d="M1150,62.5635944 L1179,43.5635944 L1204,49.5 L1221,70.5635944 L1281,79.5635944 L1334,130.781797 L1384,123.563594 L1432,151.563594 L1500,169.563594 L1150,169.563594 L350,169.563594 L720,164.563594 L814,120.563594 L882,105.563594 L946,72.5635944 L990,86.0635944 L1060,105.563594 L1122,91.5635944 L1150,62.5635944 Z" id="Combined-Shape" fill="%23627564"></path></g><g id="Foothills" transform="translate(0.000000, 158.436406)"><g id="Back-Forest" transform="translate(426.782984, 6.563594)" fill="%23505E52" fill-opacity="0.5"><polygon id="Path-Copy-5" transform="translate(86.000000, 44.900939) rotate(-3.000000) translate(-86.000000, -44.900939) " points="1 55.3182619 8.663963 30.1844037 14.3333333 49.365506 20.8180853 23.9009391 30.8079816 49.365506 32.9722077 37.4599942 41.9802506 49.365506 53.1525196 44.7355848 55.9909824 55.3182619 68.5 30.1844037 68.5 49.365506 77.6666667 37.4599942 85.1666667 55.3182619 93.5 31.837947 101 49.365506 112.666667 30.1844037 122.666667 49.365506 136 31.837947 145.166667 55.3182619 156 31.837947 156 55.3182619 171 39.6096005 171 55.3182619 171 65.9009391 1 65.9009391"></polygon><polygon id="Path-Copy-3" points="151.217016 41.1417323 158.520322 8.22834646 163.922899 33.3464567 170.102486 0 179.622269 33.3464567 181.68465 17.7559055 190.268785 33.3464567 200.9153 27.2834646 203.620188 41.1417323 215.540546 8.22834646 215.540546 33.3464567 224.27584 17.7559055 231.422899 41.1417323 239.364075 10.3937008 246.511134 33.3464567 257.628781 8.22834646 267.158193 33.3464567 279.864075 10.3937008 288.599369 41.1417323 298.922899 10.3937008 298.922899 41.1417323 313.217016 20.5708661 313.217016 41.1417323 313.217016 55 151.217016 55"></polygon><polygon id="Path-Copy-4" points="306.217016 44.4173228 314.557211 19.2834646 320.72682 38.4645669 327.783756 13 338.655114 38.4645669 341.010301 26.5590551 350.813171 38.4645669 362.971229 33.8346457 366.060144 44.4173228 379.672899 19.2834646 379.672899 38.4645669 389.648389 26.5590551 397.810154 44.4173228 406.878781 20.9370079 415.040546 38.4645669 427.736624 19.2834646 438.618977 38.4645669 453.128781 20.9370079 463.104271 44.4173228 474.893487 20.9370079 474.893487 44.4173228 491.217016 28.7086614 491.217016 44.4173228 491.217016 55 306.217016 55"></polygon><polygon id="Path-Copy-6" transform="translate(619.400883, 43.166865) rotate(3.000000) translate(-619.400883, -43.166865) " points="521.400883 53.0881251 530.236982 29.1511172 536.773432 47.4188337 544.24997 23.1668652 555.767733 47.4188337 558.262958 36.0802511 568.648702 47.4188337 581.529671 43.0093849 584.802251 53.0881251 599.224413 29.1511172 599.224413 47.4188337 609.79304 36.0802511 618.440099 53.0881251 628.047942 30.7259204 636.695001 47.4188337 650.145981 29.1511172 661.675393 47.4188337 677.047942 30.7259204 687.61657 53.0881251 700.106766 30.7259204 700.106766 53.0881251 717.400883 38.1274952 717.400883 53.0881251 717.400883 63.1668652 521.400883 63.1668652"></polygon></g><g id="Front-forest" transform="translate(273.792366, 0.563594)" fill="%23414D42"><polygon id="Path" points="328.207634 55 334.924872 17 339.893909 46 345.577603 7.5 354.333453 46 356.230334 28 364.125619 46 373.917784 39 376.405613 55 387.369399 17 387.369399 46 395.403713 28 401.977242 55 409.281164 19.5 415.854693 46 426.080183 17 434.844889 46 446.531164 19.5 454.565477 55 464.060575 19.5 464.060575 55 477.207634 31.25 477.207634 55 477.207634 71 328.207634 71"></polygon><polygon id="Path-Copy-3" points="341.207634 55 347.338805 17 351.874301 46 357.062103 7.5 365.05402 46 366.7854 28 373.991835 46 382.92965 39 385.20042 55 395.207634 17 395.207634 46 402.540968 28 408.540968 55 415.207634 19.5 421.207634 46 430.540968 17 438.540968 46 449.207634 19.5 456.540968 55 465.207634 19.5 465.207634 55 477.207634 31.25 477.207634 55 477.207634 71 341.207634 71"></polygon><polygon id="Path-Copy-3" points="459.207634 52.3622047 464.978148 10.4724409 469.24685 42.4409449 474.129487 0 481.651291 42.4409449 483.280826 22.5984252 490.063352 42.4409449 498.475414 34.7244094 500.612609 52.3622047 510.031164 10.4724409 510.031164 42.4409449 516.933124 22.5984252 522.580183 52.3622047 528.854693 13.2283465 534.501752 42.4409449 543.286066 10.4724409 550.815477 42.4409449 560.854693 13.2283465 567.756654 52.3622047 575.913517 13.2283465 575.913517 52.3622047 587.207634 26.1811024 587.207634 52.3622047 587.207634 70 459.207634 70"></polygon><polygon id="Path" transform="translate(266.130618, 50.296397) scale(-1, 1) rotate(1.000000) translate(-266.130618, -50.296397) " points="191.630618 62.6979715 198.347856 32.7767116 203.316892 55.6113573 209.000587 25.2963967 217.756437 55.6113573 219.653317 41.4381289 227.548602 55.6113573 237.340767 50.0995463 239.828596 62.6979715 250.792382 32.7767116 250.792382 55.6113573 258.826696 41.4381289 265.400226 62.6979715 272.704147 34.7452156 279.277677 55.6113573 289.503167 32.7767116 298.267873 55.6113573 309.954147 34.7452156 317.988461 62.6979715 327.483559 34.7452156 327.483559 62.6979715 340.630618 43.9971841 340.630618 62.6979715 340.630618 75.2963967 191.630618 75.2963967"></polygon><polygon id="Path-Copy" transform="translate(661.077036, 43.659711) scale(-1, 1) rotate(-2.000000) translate(-661.077036, -43.659711) " points="570.077036 56.8053804 578.281985 25.088845 584.351546 49.2935694 591.294045 17.1597111 601.989111 49.2935694 604.306106 34.2699473 613.95001 49.2935694 625.91091 43.4510497 628.949735 56.8053804 642.341742 25.088845 642.341742 49.2935694 652.155468 34.2699473 660.184879 56.8053804 669.106448 27.1754591 677.13586 49.2935694 689.626056 25.088845 700.331938 49.2935694 714.606448 27.1754591 724.420173 56.8053804 736.018213 27.1754591 736.018213 56.8053804 752.077036 36.9825458 752.077036 56.8053804 752.077036 70.1597111 570.077036 70.1597111"></polygon><polygon id="Path-Copy-2" transform="translate(804.489635, 51.591377) rotate(3.000000) translate(-804.489635, -51.591377) " points="744.989635 59.7764161 750.354409 40.0283846 754.322968 55.0992507 758.862295 35.0913767 765.855222 55.0992507 767.37018 45.74492 773.67581 55.0992507 781.496399 51.4614555 783.483323 59.7764161 792.239635 40.0283846 792.239635 55.0992507 798.656301 45.74492 803.906301 59.7764161 809.739635 41.3275972 814.989635 55.0992507 823.156301 40.0283846 830.156301 55.0992507 839.489635 41.3275972 845.906301 59.7764161 853.489635 41.3275972 853.489635 59.7764161 863.989635 47.4338964 863.989635 59.7764161 863.989635 68.0913767 744.989635 68.0913767"></polygon><polygon id="Path-Copy" transform="translate(150.000000, 58.471630) scale(-1, 1) rotate(2.000000) translate(-150.000000, -58.471630) " points="96 68.3928897 100.868871 44.4558818 104.470588 62.7235983 108.590313 38.4716298 114.936835 62.7235983 116.311755 51.3850157 122.034512 62.7235983 129.132189 58.3141495 130.935448 68.3928897 138.882353 44.4558818 138.882353 62.7235983 144.705882 51.3850157 149.470588 68.3928897 154.764706 46.0306849 159.529412 62.7235983 166.941176 44.4558818 173.294118 62.7235983 181.764706 46.0306849 187.588235 68.3928897 194.470588 46.0306849 194.470588 68.3928897 204 53.4322597 204 68.3928897 204 78.4716298 96 78.4716298"></polygon><polygon id="Path-Copy-7" transform="translate(82.581461, 61.486246) rotate(-4.000000) translate(-82.581461, -61.486246) " points="28.5814612 68.4311274 33.4503318 51.6752219 37.0520494 64.4626235 41.1717742 47.4862455 47.5182965 64.4626235 48.8932166 56.5256156 54.6159733 64.4626235 61.7136501 61.3760093 63.5169088 68.4311274 71.4638141 51.6752219 71.4638141 64.4626235 77.2873435 56.5256156 82.0520494 68.4311274 87.346167 52.7775841 92.1108729 64.4626235 99.5226376 51.6752219 105.875579 64.4626235 114.346167 52.7775841 120.169696 68.4311274 127.052049 52.7775841 127.052049 68.4311274 136.581461 57.9586865 136.581461 68.4311274 136.581461 75.4862455 28.5814612 75.4862455"></polygon><polygon id="Path-Copy-8" transform="translate(44.623319, 62.444959) scale(-1, 1) rotate(5.000000) translate(-44.623319, -62.444959) " points="1.62331948 69.3898406 5.50038311 52.6339351 8.36841752 65.4213366 11.6489391 48.4449587 16.7026514 65.4213366 17.7974951 57.4843288 22.3545051 65.4213366 28.0063588 62.3347225 29.442287 69.3898406 35.7703783 52.6339351 35.7703783 65.4213366 40.4076332 57.4843288 44.2017509 69.3898406 48.4174371 53.7362973 52.2115548 65.4213366 58.1135156 52.6339351 63.1723391 65.4213366 69.9174371 53.7362973 74.554692 69.3898406 80.0350842 53.7362973 80.0350842 69.3898406 87.6233195 58.9173996 87.6233195 69.3898406 87.6233195 76.4449587 1.62331948 76.4449587"></polygon><polygon id="Path-Copy" transform="translate(908.724400, 60.228519) scale(-1, 1) rotate(-7.000000) translate(-908.724400, -60.228519) " points="865.7244 65.6852116 869.601463 52.5198573 872.469498 62.5671014 875.750019 49.2285187 880.803732 62.5671014 881.898575 56.3308809 886.455585 62.5671014 892.107439 60.1419045 893.543367 65.6852116 899.871459 52.5198573 899.871459 62.5671014 904.508713 56.3308809 908.302831 65.6852116 912.518517 53.385999 916.312635 62.5671014 922.214596 52.5198573 927.273419 62.5671014 934.018517 53.385999 938.655772 65.6852116 944.136164 53.385999 944.136164 65.6852116 951.7244 57.4568651 951.7244 65.6852116 951.7244 71.2285187 865.7244 71.2285187"></polygon><polygon id="Path-Copy-9" transform="translate(878.332380, 60.160217) scale(-1, 1) rotate(-2.000000) translate(-878.332380, -60.160217) " points="835.33238 67.1050988 839.209444 50.3491933 842.077478 63.1365949 845.358 46.160217 850.411712 63.1365949 851.506556 55.199587 856.063566 63.1365949 861.715419 60.0499807 863.151348 67.1050988 869.479439 50.3491933 869.479439 63.1365949 874.116694 55.199587 877.910811 67.1050988 882.126498 51.4515555 885.920615 63.1365949 891.822576 50.3491933 896.8814 63.1365949 903.626498 51.4515555 908.263753 67.1050988 913.744145 51.4515555 913.744145 67.1050988 921.33238 56.6326579 921.33238 67.1050988 921.33238 74.160217 835.33238 74.160217"></polygon></g><path d="M15.4562935,85.0635944 L1484.54371,85.0635944 C1164.10499,64.3968704 919.255968,54.0635944 750,54.0635944 C580.744032,54.0635944 335.895011,64.3968704 15.4562935,85.0635944 Z" id="Foreground" stroke="%23505E52" fill="%23505E52"></path></g><g id="Boids" transform="translate(607.871087, 9.000000)"><g id="Eagle" transform="translate(29.623503, 18.878595) rotate(-13.000000) translate(-29.623503, -18.878595) translate(2.123503, 6.878595)" fill="%23A3BDA6"><path d="M29.4679846,19.3717935 C27.4868582,14.0062337 29.6357976,10.1607594 35.9148026,7.83537076 C42.1938076,5.50998208 47.9014294,5.30429934 53.037668,7.21832253 C43.4984566,3.77781384 36.7092652,3.26581474 32.6700939,5.68232522 C27.9489062,8.50686483 26.8815364,13.0700209 29.4679846,19.3717935 Z" id="Wing2" transform="translate(40.566245, 11.779300) rotate(21.000000) translate(-40.566245, -11.779300) "></path><path d="M3.36003282,19.5683176 C1.37890647,14.2027578 3.5278458,10.3572835 9.80685083,8.03189483 C16.0858559,5.70650614 21.7934777,5.5008234 26.9297163,7.41484659 C17.3905049,3.9743379 10.6013135,3.4623388 6.5621421,5.87884929 C1.84095444,8.70338889 0.773584682,13.266545 3.36003282,19.5683176 Z" id="Wing1" transform="translate(14.458293, 11.975824) scale(-1, 1) rotate(21.000000) translate(-14.458293, -11.975824) "></path></g><g id="Eagle" transform="translate(374.326145, 14.359995) rotate(-1.000000) translate(-374.326145, -14.359995) translate(340.826145, 1.359995)" fill="%23505E52"><path d="M35.1854605,20.5780157 C33.600498,16.1948352 36.7036861,12.5424247 44.4950246,9.62078422 C52.2863631,6.6991437 59.0954844,5.70299271 64.9223884,6.63233126 C54.0840837,5.00573274 46.0930064,5.53252504 40.9491566,8.21270818 C34.9367649,11.3454417 33.0155329,15.4672109 35.1854605,20.5780157 Z" id="Wing2" transform="translate(49.622331, 13.144419) rotate(21.000000) translate(-49.622331, -13.144419) "></path><path d="M2.97129565,20.7381464 C1.38633317,16.354966 4.48952119,12.7025555 12.2808597,9.78091494 C20.0721983,6.85927442 26.8813195,5.86312343 32.7082235,6.79246198 C21.8699188,5.16586346 13.8788415,5.69265576 8.73499171,8.3728389 C2.72260002,11.5055724 0.801368001,15.6273416 2.97129565,20.7381464 Z" id="Wing1" transform="translate(17.408166, 13.304550) scale(-1, 1) rotate(21.000000) translate(-17.408166, -13.304550) "></path></g><g id="Eagle" transform="translate(440.645924, 48.067214) rotate(14.000000) translate(-440.645924, -48.067214) translate(387.645924, 26.067214)" fill="%23627564"><path d="M56.4171958,35.4276265 C53.0124841,26.160567 57.4077603,19.2596436 69.6030242,14.7248564 C81.7982882,10.1900691 92.7451789,9.41467171 102.443696,12.3986642 C84.4229503,7.05713605 71.4566397,6.65231976 63.5447646,11.1842153 C54.2969651,16.4813239 51.9211089,24.562461 56.4171958,35.4276265 Z" id="Wing2" transform="translate(78.327330, 21.745818) rotate(21.000000) translate(-78.327330, -21.745818) "></path><path d="M5.81021857,35.7668417 C2.40550684,26.4997821 6.80078297,19.5988588 18.996047,15.0640715 C31.1913109,10.5292843 42.1382017,9.75388686 51.8367191,12.7378793 C33.815973,7.3963512 20.8496624,6.99153491 12.9377873,11.5234305 C3.68998783,16.8205391 1.31413157,24.9016761 5.81021857,35.7668417 Z" id="Wing1" transform="translate(27.720353, 22.085033) scale(-1, 1) rotate(21.000000) translate(-27.720353, -22.085033) "></path></g></g></g></svg>'),
      /* Photo */
      url('https://oliverhodgson.com/media/images/bg_header.jpg');      
  }
  
}
!

JS
!
999px

Console