- Live
- Cycle
- Sunrise
- Day
- Sunset
- Night
- Light
29th January 2021
Making a Parallax SVG Landscape - new site part 1
I've finally finished my new website, and I am really happy with it. I started the site in July 2020 and I launched it in mid January 2021.
It's a big change from Nuxt, Vue and Webpack to doing pretty much everything myself with 11ty (Eleventy) and gulp—I love it. More on that in a future post however, today is about the star of the show—the parallax landscape you see at the top of the page.
If you're the type who wants to dive straight into the code, here's a CodePen - go and have a play!
CodePen Embed - Firewatch-style SVG parallax landscape - complete
<!-- set role and aria-label to expose this as an image to accessibility tools -->
<div class="landscape" role="img" aria-label="Monotone illustration of a landscape. Trees are in the foreground, a loch and forest is in a valley and in the background a mountain range is visible.">
<!-- landscape layer 1 - clouds -->
<div class="landscape__layer" style="--offset:0.96">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M1830 81c23-15 55-16 83-21-32 8-63 15-91 32l-4 8c-22 8-47 9-69 18 33 2 65-15 98-14-132 29-265 60-397 86 38-32 94-25 130-60 30-5 57-21 88-20 20 6 37-5 56-6 7-22 34-31 54-22 17 8 34-4 52-1zm576 28c84-1 168-1 251 16 10 2 21 4 27 13-38 23-84 29-127 39l-1 5c10 2 20 3 29 7-45 1-90-2-134 7 25 8 54 8 79 17-64-1-129 0-192-11v-8c83-20 168-32 251-52-3-4-7-6-13-6-57-6-114-17-170-27zm-391 75c101-10 203-23 304-32v6c-50 9-101 15-150 28l-1 6c12 0 23-2 35-1-45 15-94 16-140 24-11-5-41 1-24-18l-1-9c-8 0-19 6-23-4zm36 15c23 18 55-6 82-4v-8c-27 1-55 5-82 12zm681-33c63-9 125 12 188 8-45 12-95 13-139 28 28 0 56-3 84-1-90 9-179 21-268 38-71 10-144 15-215 25-10 0-24 9-28-4 79-24 165-30 247-49 16-15 36-24 59-25 20-18 49-11 72-20zm198 60c18-1 37-6 55-4-40 13-90 12-125 30 17 5 34 2 51 3l-12 7c29 0 58-4 88-1-33 9-73 23-105 9-43 2-87-3-130 5-8-3-3-12 2-15-66 7-131 20-197 25v-9c123-23 249-33 373-50z" style="fill: var(--c0);"/>
</svg>
</div>
</div>
<!-- landscape layer 2 - mountains 1 -->
<div class="landscape__layer" style="--offset:0.92">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M1740 213c11 1 556 40 576 44 10 1 19 5 29 4 14-3 27-9 41-10 13-1 25 3 38 3 12-1 24 3 36 3 9 1 20 0 28 5 9 4 18 9 28 9 11 1 21-3 32-3 14 0 25 9 37 13 9 3 19 1 27-3 11-3 17-14 28-16 11-3 21 4 32 2l30-6c12-1 23-5 34-4l24 4h32c15 1 29 5 44 5 12 0 25-2 37 0l23 6c10 2 19 8 30 9 16 2 30 12 47 13 16 2 33 3 49-1 4-1 0 710 0 710H0h1146s-7-784 0-786c8-2 16-2 24 0 10 2 20 8 30 10l54 3c27 0 53-5 80-4l39 2c14 2 29 3 43-3 11-3 21-9 32-9 11-1 22 2 32 7 15 6 32 3 47-1 18-3 35-12 53-12 17-1 35 3 52 3 9 0 19 4 28 2 14-2 28-6 42-7 13-1 25 7 38 8z" style="fill: var(--c2);"/>
<path d="M2687 271c32 36 78 61 108 62 23 0 55-22 72-43-7 15-16 27-28 35 21-4 36-15 50-29-2 5-7 11-14 18 6-2 12-6 18-11-45 42-68 44-94 48l-22 4c-4 0-10-5-10-5-46 2-81-7-104-39-1-3 0-4 1-6 1-3 0-6-2-9 1-3 3-4 5-6l-3-11c28 31 55 51 81 55-28-16-49-35-58-63zm-1491-27c17 11 32 26 49 38s39 28 54 37c12 7 24 13 37 17 17 6 41 15 62 15 36 1 75-4 112-17 22-7 76-33 99-43 19-9 46-21 55-27 13-8 22-9 19-19-1-4-13-1-15-2-4-1-8-2-7-3 1-3 9-1 23-7 8-4 20-5 17-15-1-7-18-7-31-4-16 4-38 3-48 4-11 0-22 0-16 8 3 4 28 17 27 19s-19-3-29-3h-28l-12 3c-1-1 1-2 6-6 8-7 4-11-6-12-6 0-21 3-29-6 0-1 0-2-2-2-12 3-36 6-44 5-3 0-3 5 0 6 3 2 18 3 19 5 0 2-15 8-10 13 3 2 26 5 24 7-3 2-25-1-29 0-2 1-9 5-15 4-8 0-23-6-32-5-10 1-17 15-17 20-1 2 3 5 4 6 2 1 8 0 7 2-2 4-9 2-12 3-3 2-8 11-8 15 1 3 13 5 13 7s-13 2-18 0c-6-2-16-11-21-13-3-1-10 4-10 0-1-5 20-6 28-15 9-9 20-31 22-41 2-7-1-17-5-18-3-1-15 6-30 7-20 2-67-4-94-2-29 2-74 5-91 2-15-2-38 3-18 17zm1322 33c1-2 1-4 4-4 10 0 26-2 31-1 9 3 18 4 22 10 5 5 4 17 5 25 1 14-20 31-32 30-5 0-8-2-8-2h5c12-1 32-22 23-33-7-8-38 21-47 24-2 0-4-4-5-2-2 3-16 4-19 1 0-1 12-3 10-5-2-1-14 1-18 1l-5-4c-3-2-9-1-14-1-6 0-12-4-12-4-2 5 23 13 22 14-2 2-27-8-40-14-13-5-30-9-39-14-6-4-12-10-15-15-4-6-6-14-6-19 0-2 3-5 6-6l10-1 16 2 6 1 2 5c0 3 2 14 0 14-1 0-14-14-15-13-1 2 7 13 11 17l8 9c1 1 4 1 5-2l-3-17-2-9c1-2 3-4 5-4l7-1 2 2 1 26 3 6 2 2h2c0-1-2-2-2-7l1-13 2-13c0-1 0-3 3-3 8 0 20 0 26 2l15 5 16 6c4 2-1 9-2 15l-1 17h2c1-6 7-19 12-27zm6 39c4-2 16-19 17-27l1 1-1 7h2l3-2 1 1c-4 6-19 21-22 21-1 0-2 0-1-1zm-10 0c5-3 8-8 8-15l-7 6c-1-1 5-14 12-20 2-2 7-1 7 1 3 10-10 26-15 28-4 2-5 0-5 0zm7-30c-3 4-9 19-9 22 1 1-2 0-2-2 0-4 7-18 9-21 1-1 3 0 2 1zm-38 16l1 5 2-1c0-2-2-5-3-4zm14-24c0 12-2 10-2 26h-2v-15c-1-2-6-7-7-6l-1 14c-1 1-2 0-2-1l-2-8v-9l-3-3-1 13c0 2-2 0-2-1l1-13c0-1 2-4 4-4s6 1 7 3l5 9c2-1 2-4 3-5h2zm-51 19l2 4c2 1 4 0 3-2-1-1-4-3-5-2zm105-3l-2 4h1l3-3c0-1-1-2-2-1zm-87-25v24c0 2-4 2-5 0a55 55 0 013-23c0-1 2-3 2-1z" style="fill: var(--c3);"/>
</svg>
</div>
</div>
<!-- landscape layer 3 - mountains 2 -->
<div class="landscape__layer" style="--offset:0.9">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M1982 177c15-3 31 0 47 4s29 14 45 19l43 16c11 4 22 11 35 12 20 2 38-7 56-11 14-2 28-4 40 3 17 9 35 14 52 23 20 9 38 23 59 32 36 17 73 31 111 46 32 14 66 24 100 33 19 4 37 10 54 18 24 11 52 13 78 12 21-3 41-7 61-12 15-4 30-2 44-9 27-16 55-32 87-37 20-4 41-5 61-11 17-4 32-10 48-18 21-10 44-14 67-14 21 1 41 6 62 8 15 1 29-6 42-13 15-7 30-15 46-19 8-2 15 0 22 1 17 5 34 6 50 12 25 9 52 10 77 17 19 4 37 12 56 14 19 3 37 11 56 14 18 3 35 9 52 10 11 1 22 1 32 4 15 5 31 5 46 10 20 8 40 12 60 20 21 9 42 18 65 21 34 5 67-4 101-9 25-3 50-4 75-4 29 1 59 6 88 8v623H0V362c22-11 45-22 68-30 17-5 35-8 53-12 33-8 68-14 102-23l92-24c25-9 52-16 79-17l24-1c25-2 49 4 74 3 13-1 25-6 38-4 10 2 18 10 28 12 19 5 39 2 58-1l44-9c16-4 32-12 48-17 27-11 54-18 82-25 11-4 22-4 33-2 15 3 29 5 43 9 16 4 34 6 51 4 15-1 29-8 44-10 18-2 36 5 54 8 12 3 23-3 35-4 10-2 20 1 30 2 27 3 52-10 78-9 7-1 15 1 22 4 12 8 25 15 36 24 29 21 61 37 91 55 37 19 79 30 121 32 12 0 25 2 37 0 13-1 24-6 36-10l46-16 43-19c37-13 72-31 106-50 26-12 54-19 82-24 27-5 55 0 82 1 43 0 81-23 122-32z" style="fill: var(--c3);"/>
<path d="M3169 281l5-3c15-7 30-15 46-19 8-2 15 0 22 1l6 2-2 2c-15 0-23 5-26 7-2 1-3 6 0 6 14 1 26 8 31 11 2 2 7 7 2 9-14 5-15 13-6 19-3 4 0 10 1 14 1 6-3 16-7 23-21 35-81 50-118 54-31 2-75 2-93 6-19 5-39 8-53 10-10 1-21 1-30-1-8 7-59 11-88 13s-53-1-82 0c-8 0-19-4-26-5-6 0-14 1-20-1-4-1-5-4-12-8-4-2-12-2-17-7l16-1c2 0 9-3 2-4-5 0-20 2-32 0 10-2 34-7 39-12 2-1 1-4-1-4-4 1-35 2-45-1 20-3 36-6 41-11l41-9c15-4 30-2 44-9 27-16 55-32 87-37 20-4 41-5 61-11 17-4 32-10 48-18 17-8 35-13 54-14 13 5 9 16 7 20-4 12-23 27-33 30-3 0-3 4 0 4 7 1 28-3 41-10a1259 1259 0 0197-46zm-702 153c-12 0-20-2-32-3-15-1-27 4-58-1-51-8-85-33-122-43-31-9-64-10-96-17-41-9-90-25-125-44-43-23-130-46-164-54l-30-3c-3 0-24 2-45 8-32 10-69 27-73 28-66 13-164 54-207 67-17 5-44 15-51 13-2 0-5-5-8-5-13 2-41 19-59 21-37 3-91-10-164-5-34 2-61 16-119 16-30 0-84-12-121-26-29-8-71-19-91-21-18-2-48-6-73-1-16 3-29 11-33 8-6-7 4-24 16-33 12-10 44-14 59-26 15-11 32-35 45-42 10-5 22-6 33-5-7-7-5-12 1-17-18-13-40-19-58-23l25-1c15-1 29-8 44-10 18-2 36 5 54 8 12 3 23-3 35-4 10-2 20 1 30 2 25 2 48-8 72-9a124 124 0 00-56 25c-17 13-57 44-77 47-4 0-39 18-56 22-13 4-30 1-39 2-6 0-13 4-13 4l52 7c9 0 21 7 17 10-2 3-6 4-30 4l45 5c32 2 58 1 82 0l-60-13c-6-1-19-2-19-4 2-5 19-8 26-8 20 0 80 6 96 6v-4c-9 0-17-7-18-10-2-5 5-13 11-12 14 0 54-2 67 3 3 1 13-3 13-3-8 0-25-8-30-13-4-4-8-9-7-14 2-9 17-31 23-38 1-2 10-2 17-2l20 14c29 21 61 37 91 55 37 19 79 30 121 32l18 1 19-1c13-1 24-6 36-10l46-16 43-19c37-13 72-31 106-50l22-9 10-3 38-10 3 3c3 1 12-2 18-1 10 1 32 0 41 8 3 4-18 6-17 8s16 4 20 6 4 5 3 8c-3 8-15 10-15 11 0 3 21 2 21 2l33 6 52 13-36-20 8-13s33 3 49 7c20 5 45 13 67 22l75 38s-15-11-21-19-16-21-16-32c0-8 4-19 12-21 16-4 65-2 80-5l12-2c19 0 36-8 53-12 10-2 21-3 31-1l20 22c10 10 22 26 34 35 11 10 26 15 38 23 15 11 34 46 61 61 17 10 38 10 60 9l11-1c3-1 3-4 0-4-7 0-27-2-37-8-10-5-21-10-29-17-6-5-18-16-15-21 1-2 16-1 23 0 9 2 24 7 28 10 3 2 6 0 4-2-4-4-21-13-32-18l-31-11c-17-6-47-14-69-28-14-9-30-24-37-33l-2-5c11 5 23 9 34 15 20 9 38 23 59 32 36 17 73 31 111 46 25 10 51 19 77 27l-1 4c-8 3-27-1-32-4-2-2-4 0-3 0 7 9 35 17 46 19 5 1 7 8 16 13 15 10 26 11 31 15 2 1 0 6-2 6-6 0-29-1-35-5-2-1-4 2-1 3 4 3 18 9 30 11l-19-2c-7-1-18 0-25 2-14 3-41 15-56 19-9 3-28 4-28 4l-1 1zM0 400v-38c22-11 45-22 68-30 17-5 35-8 53-12 33-8 68-14 102-23l92-24c25-9 52-16 79-17l24-1h21c-19-1-78 2-108 21-35 22-87 55-113 82-12 12-19 36-46 41-18 4-46-8-68-5-22 2-50 17-68 17-12 0-27-8-36-11zm568-132c16 2 33-1 48-3l44-9c16-4 32-12 48-17 27-11 54-18 82-25 11-4 22-4 33-2l10 2-19 1c-13 2-28 9-40 15-21 9-54 33-86 41-50 14-101 12-114 2l-6-5zm1391-85l3 3c2 1 6-1 8-1l13 5v4c-3 0-3 2 0 5-11 1-22 1-23 7 0 0 9 0 13 2l11 9c-4 3-1 5 2 9 0 0-23-5-26 2-1 3 26 20 26 20-31-12-74-25-127-39h1c35 0 66-15 99-26z" style="fill: var(--c4);"/>
</svg>
</div>
</div>
<!-- landscape layer 4 - mountains 3 -->
<div class="landscape__layer" style="--offset:0.86">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M0 408s1229-15 1235-22c8-10 23-16 37-15 19 0 37-2 56-5 20-3 40-2 60-6 31-3 61-6 91-15 23-7 48-9 71-17 40-13 80-24 119-41 20-7 40-15 61-21 29-10 61-6 90 2l44 8c22 3 44 9 65 13 19 4 37 9 54 16 11 4 23 9 35 9 19 0 39 1 58 6 13 4 26 10 39 13l41 12c24 8 50 13 76 17 22 3 43 7 64 14 52 18 105 35 158 49 11 3 22-2 33 2 4 2 8 6 10 10h388c47-1 79-3 80-4 6-11 14-19 25-25 19-11 38-24 60-26l33-7 44-11c59-12 119-23 179-33 30-6 62-10 92-18 39-11 78-21 118-23 23 0 45-2 67 3 17 3 34 6 49 13 23 10 45 23 69 34 15 6 28 16 43 23 16 8 34 14 51 22 16 7 35 14 52 9 7-2 14-1 21 0 20 2 39-1 58-3 15-1 27 12 42 11l32 1v597H0V408z" style="fill: var(--c5);"/>
<path d="M3470 296c15-3 31-5 46-6 23 0 45-2 67 3 17 3 34 6 49 13 23 10 45 23 69 34 15 6 28 16 43 23 16 8 34 14 51 22 16 7 35 14 52 9 7-2 14-1 21 0 20 2 39-1 58-3 15-1 27 12 42 11l32 1v84c-16 49-56 84-111 112l-171-143s39-18 40-26c0-2-8-9-17-12-12-4-41-10-56-10-9 0-24-6-26-10-2-2 0-4 3-5 0 0-13-12-22-14-9-3-25-1-31-1-3 0-5-3-2-4 3-3 13-4 20-4 0 0-26-15-41-20a267 267 0 00-88-8c-4 1-6-3-3-6 7-5 36-9 47-14 0 0-11-3-15-6l-8-8c-9-2-35-5-45-10l-4-2zm-1705-21c31 2 158 35 158 35-18 2-21 2-20 12 1 9 14 12 16 16-3 4-1 8 0 10-10 5-40 18-60 23-11 2-27 3-34 2-5-1-8-7-12-10s-11-4-11-6c1-3 9-7 15-9l16-4c4-1 3-9-1-10l-26-1c-9 0-19 2-24 3-1-4-4-4-5-6-1-3 5-7 0-12-6-4-10-2-15-2 6-6 23-10 28-12 5-3 4-9-3-11-7-3-36-5-42-7 3-5 13-12 20-11z" style="fill: var(--c4);"/>
</svg>
</div>
</div>
<!-- landscape layer 5 - valley 1 -->
<div class="landscape__layer" style="--offset:0.83">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M396 354c9 0 18-3 27-5 7-1 14 0 20 2 17 3 34-1 51 2 9 2 19 2 29 2 13 1 26-3 39-1 11 2 22 1 33 1 16-2 33 1 49-1 22-2 44 3 66 2 16 0 31 4 46 5 9 0 18 4 28 4 6 1 12 0 18-1 12-1 22-6 34-7l33-2c10-1 19 4 29 4 9 1 18 1 27 4 14 3 28 3 42 3 19 1 39-2 59 2 15 3 30 6 46 6 17-1 35 0 52-4 23-5 47-5 70-3 17 2 32 11 48 15 27 7 56 10 84 10 16-1 31 6 45 13 10 4 20 4 30 7 6 2 10 9 16 12 7 2 15-2 22-5 12-4 25-2 37-5 23-6 47-1 70-4 15-3 29 9 43 3 13-5 28-10 43-7s29 6 44 7c9 0 17-5 26-5 16 0 33 2 49-1 10-2 18-7 28-8 8-1 17 3 25 1 31-11 63-4 94-10 11-2 23-3 34-2 14 0 28-5 42-4 11 1 20 7 31 9 9 2 18-1 27-3 13-2 26 1 38-2l18-6c7 0 14 4 21 4 13 0 26 3 40 4 11-1 20 8 31 8s22 0 33-3 22-8 33-10l28-5c4-1 8 3 11 5 13 1 27 6 39 1 7-2 14 1 21 3 12 4 24 6 37 9 11 3 22 1 34 3 7 1 15 4 23 4h35c9 1 17 5 26 6l29 4c13 3 27 1 41 2 10 0 19 5 28 6l36 3c14 3 28 2 42 2 12 0 24 2 35 0 12-1 23-4 33-7 10-4 20-3 30-3 11 0 21-5 32-6 13 0 27-1 40-4 7-2 14-7 22-7 8-1 17-1 25-4 13-4 26-2 39-3l23 1c12 2 24 1 35 5 9 3 19 5 29 5 8 0 16-2 24-4 11-2 22 1 32 0l27-1c11 0 22-3 33-1l37 3c11 0 22 6 33 5l21 1c10 3 20-2 30-3 16-2 32-6 48-1 16 6 34 1 51 3l55-7c8-1 16 3 24 3 9 0 17-8 26-8s17 6 24 11c12 9 26 17 42 18 15 2 31 3 46 1 25-3 50-7 74-13 13-2 25-10 39-8 18 2 37 4 55 3 17-1 34 2 51 0 12-2 24 0 36 1 7 0 12-6 19-8 8 0 16 2 25 1 12-3 23 3 35 3 13 2 25-5 37-5 10-2 18 8 29 7 9-1 18-3 28-3v597H0V391l36-5c11-1 23 1 34 3 17-3 34-9 52-8 15 1 31-2 46-3 9-1 15-7 24-8 13 0 26 1 39-4 5-1 10-5 16-5 20 1 39-1 59-1 16 1 30-6 46-6l24-2c7-1 13 2 20 2z" style="fill: var(--c6);"/>
</svg>
</div>
</div>
<!-- landscape layer 6 - valley 2 -->
<div class="landscape__layer" style="--offset:0.8">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M651 500c3-5 8-9 14-11 7-2 15 0 23 0 32 2 64 9 96 2 11-2 20-9 30-11 16-3 33-2 50-4 15-2 29 7 44 2 14-6 29-6 44-6 8 0 16 3 24 4 8-1 16-4 24-4 13 0 25 3 38 2 35-2 71 0 106 2 19 1 38-5 56 1 15 5 31 2 46 2l35 2c10 2 21-2 31-2 19-1 38-5 57-8 7-1 13 2 20 4 7 3 14 3 22 5l20 8 18 2c13 1 25 8 39 7 17-1 34-2 51 0 14 2 27-5 41-6 12 0 23-6 34-8 14-3 26 5 40 4 20-1 39-10 56-21 11-6 24-4 36-4 25 2 49-3 74-3 14 1 26-7 40-8l20-5c12 0 25 5 36-2 7-5 16-8 26-7 7 1 13 6 19 10 11 5 23 6 35 7 10 1 19 6 29 7 11 2 22 0 33 2 8 1 15 5 23 6 9 2 18 1 28 3l20 5c21 3 42 0 63 3 10 0 19 5 28 6 9 2 19 2 28 2 11-1 20 5 30 5 17 0 34 6 51 8 12 2 25 0 37 0 31 7 62 0 92-5 10-2 20 1 30 2 21 2 41-5 62-4 23-2 47 2 69-5 26-7 52-13 79-16 19-4 38-3 56-9 18-4 36-9 54-9 10-1 18-6 28-7 8 0 16 1 23-3 10-5 22-4 33-4 10 0 20 0 30 3 8 3 16-2 24-3 18-3 36 0 54-1 8-3 17-4 26-6 16-6 32 3 48 1 15-1 29-5 44-4 12 1 19-10 30-13 9-1 17 2 26 1 13-2 26 5 39 3 8-1 14-6 22-9 6-1 13 2 19 3 15 4 31 1 46 5 14 3 29-2 43 2 9 3 17-4 25-6 11-4 22-11 34-11 20-1 40 2 60 4 14 0 26-7 38-10l54-5c11 0 20-7 31-8 14 1 27 10 41 11 13-3 26-8 40-6 5 1 7 7 13 9 5 2 11 2 16 6 11 8 23 15 34 24 5 5 10 9 16 12 6 0 12-2 19-1l24 6c19 6 34 22 54 23 8 1 16 4 23 8 16 9 34 13 48 24 16 6 32 14 43 27 6 7 16 7 24 10 8 5 13 12 20 17v443H651V500z" style="fill: var(--c7);"/>
</svg>
</div>
</div>
<!-- landscape layer 7 - loch -->
<div class="landscape__layer" style="--offset:0.75">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M2550 660c-30 10-61 4-91 1-9 0-11-10-13-17-30-4-65 5-92-14-5-6-11-14-6-21 7-13 23-15 36-17l70-10c32-4 64 0 97 1 36-6 73 0 110-6 20-2 40-9 61-9 31 1 61 3 92 2 92-6 184 7 276 6 24-4 39 16 59 24 32 9 65 13 98 17 18 1 34 10 48 20 8 4 11 16 5 23-6 11-19 12-30 16-5 22-23 44-47 47-31 4-63 0-95 2-27 2-55 0-82 1s-52-8-78-13c-27-7-56-5-84-9-35-4-70-4-105-9l-109-13c-13-2-27 2-40 1-9-1-14-11-24-10-19-3-37-8-55-13h-1z" style="fill: var(--c2);"/>
<path d="M2454 582c32-4 64 0 97 1-32 7-66 5-98 13-10 2-21-2-30-6l3 11c-20 3-40 6-59 12-4 3-12 4-4 12 3 7 12 8 18 10l57 3c16 1 29 13 45 15 22 3 45 0 67 7-30 10-61 4-91 1-9 0-11-10-13-17-30-4-65 5-92-14-5-6-11-14-6-21 7-13 23-15 36-17l70-10z" style="fill: var(--c0);"/>
</svg>
</div>
</div>
<!-- landscape layer 8 - foreground 1 -->
<div class="landscape__layer" style="--offset:0.4">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M4000 1000H0V274l12-2-6 10c9-3 14-11 19-18 2 4 6 8 3 12-3 5-10 9-10 16l-9 3c4 2 9 8 14 6l6-12c5 3 10 4 15 1-1-4-3-9-7-12v-10c8-2 16 1 23 1l2-13c-2 3-3 6-6 7l-10-3c-2-8 5-14 12-14 3-5 6-12 13-11l-5-3c5-3 10-5 16-6l1 14 7 2-1 9h7l-7 9 8 7c-1 4-4 7-7 10l12 2-1 6c-8 5-16 8-25 9 9 3 18-2 28-4-1 4 0 10-5 13-6 7-15 10-23 12 7 0 15 1 22 4 6 1 12-2 17 0l-1 9 10-16 3 3-1-9c5 3 11 3 16 0-5-1-10-4-9-10l13-1-6-7c6-1 11-2 16-5l1 15 4-2v-6l12 1c4-4 5-8 8-12l-7-8c6-3 4-10 4-16l8 1-3-5 13-4c2 8 0 16-2 23l-4 3c5 6 10 13 19 13-4 2-7 5-11 6h-6l5 12c1 10 7 19 11 28 2 6 6 8 10 12l8-4c-2-11 3-21 8-30 9 2 13 11 20 16 1 7-7 5-11 4l10 9 5-7c2 6 0 11-2 16h8c2 5 6 9 11 12v5l-5 1 1 3h12v6c7 0 12-4 17-8-8-1-14-3-21-6l-1-5h17c-7-3-16-5-19-14 6 0 10 3 15 5h10l6 6 1-14c-6 2-12 3-19 3 0-4 1-7-1-11-4-5-11-9-13-16l14 7v-3l9 2-9-13 13-4-10-15 11 5c-3-5-3-11-3-17l18 5-7 8 15-1-2 10h-7l6 7 12-6-11 16 11-3c-4 5-11 7-17 10 1 5 8 6 12 9 4-3 8-5 13-6 0 4 1 9-2 13l-13 8c-4-1-7-2-11-1l10 7-15-5v1l1 3v1c10 5 20 1 29-3-2 6-5 12-10 15 7-2 13-6 21-3-5 5-11 6-17 5v5l9-3-8 11 14-4c-2 2-3 5-6 6-5 2-10 2-12 8l12-3 12 9-2-18 5-2 1 6 1-12 4 8 8-2c-5 4-9 9-7 15l6-4 1 5c3-2 5-6 8-4 8 2 14 8 22 8l12 3-13-15h4l-7-8 5-6-6-4v-4l11 6-4-12 14 6c-1-5-3-10-3-16l9-10 2 10 8-4c-5 4-9 9-8 16l8-5v4l9-1c-4 6-6 14-10 21l19-5c-4 5-9 9-11 16l14-7c-2 5-4 10-8 14l1 8-8 7 15 1c-6 6-14 12-16 21 5-1 11-2 14-7 4-4 9-6 14-7l5 6 5-4v9c0 5-2 12 5 14 4 4 9 2 12-1l-8-10c1-4 0-9 4-11l19 2 1-13-4 9-12-4c1-3 0-8 4-9 7-4 14-11 18-19 4 0 8-1 11-3 2 6 3 12 9 15l-1 8 6-2c-1 4-3 7-6 11 5 2 9 6 15 7l12 2c-9-6-12-16-17-24l4-5-7-4 9-5 3-6 11 7-2-16 8-11 3 9 6-3-8 13 15 5-1 15c10-2 19-9 26-17l-4-2-4-14 2-8 11 2-1 6 7-2c-1 6-3 12 2 17-5 5-4 12-3 19l17-1v6l9 3-10 3 12 6c-7 9-16 2-23-3l-2 11 13-2c-2 5-5 9-9 13 3 5 10 3 15 4l1-8c7-4 14-8 18-16 3-6 10-6 15-7 1 6 3 12 9 15l-1 7 6 1-7 9 8 6-3 10 10 2-8 11h9v8l-14 12c13 3 26 4 39 5l-7-11 11 5 5-4c-4-2-7-5-8-9l13-2-7-6 17-4c0 5 0 10-3 15l9-3-8 12c7 3 15 3 22 0l-9-11 8 3-2-14 17 4-8 6 11 1-3 9c1 3 2 7 1 10 0 4-3 9 0 13 6 7 15 10 19 17 6 9 6 19 8 28 4 8 14 10 21 11l39 11c4 0 7 2 9 3l-8-16 13 7c-4-8-9-17-9-26l13 1-5-8 13 2c-4-6-15-4-17-13l14 4c-6-6-11-12-15-19 7-2 13 3 20 4-5-3-9-8-11-15l20 6-2 7c3-6 8-10 13-14l-17 4c4-2 8-4 10-8l-12 1-1-4h-8c-3-5-5-11-4-17l14 8 12-9c-6-3-13-6-18-11l11 3-11-16 11 6 7-5c-5-2-10-6-9-12h16l-9-8c6-1 14 1 18-5 1 6 2 13-2 18l12-5-11 15 13 4-9 12 9 2c5-3 10-6 15-7-2 7-9 10-13 16l-4 11c-6 1-12-1-17-3v13c7-4 16-3 23-7 3-3 6-3 10-2-5 7-13 10-20 13h12c4 0 4 5 6 7l4-5 7-1v-8l11-1c-3-4-5-9-5-14l14 2v-5h-8v-5c6-5 11-12 19-17l7 12c5 7-1 19 9 23 3-3 9-6 10-11l9-18c4-7 5-16 8-24l-9 2-8-7 10-1 10-14-7 2c3-6 0-11-1-17l1-9 12 3-1 7 8-3-3 12 5 5-5 7 1 13 18-2-2 7 9 3 1 3h-6l-2 2 11 7-12 3c-3-3-6-6-10-7l-4 10 14-2c-2 5-6 9-9 13 3 5 11 4 16 5l-10 4 18 2-4 6 11-1v-7l15 1c1-7 2-13-3-19l4-4-2-9h6c1-6 6-7 11-8 2 7 1 13-2 19l3 3-7 1c4 7 10 12 18 14l-16 5c3 5 5 11 6 17 4 12 12 22 19 32 3 7 10 4 15 5 1-4 4-7 8-9l12 9 7-4-9-2-6-15c8 3 17 7 26 8l13-5v-4-1c-6 2-13 7-20 6 4-2 8-5 13-6l-1-1-1-3-1-1c-4 1-8 2-10 6l-5-5v-1l3-2 1-1-14-1-5-9 1-12 16 9c6-2 10-6 15-10l1-2c-9-3-17-6-23-13l15 4c-5-7-11-13-15-21l16 8 8-9-8-1c-4-3-3-8-4-13l20 2c-2-5-7-8-12-11 7-1 14-3 21-2l3-6c2 8 4 17-1 24l14-7c-3 10-13 15-14 25l4-3 13 2-11 17 12 2 16-9c2 5 6 8 11 10v4l6-1c0 6-1 12 4 16l-6 7 1 13 17-1v6l10 4v-9c-8-4-17-8-20-16l5-2 12 7c7 3 15 2 22 6l-10-12c1-6-4-9-7-12l6-2c-3-4-6-7-7-12l12 7-3-12c4 1 9 3 13 6-1-5-3-11-2-16l8-8 2 7 6-1c-3 3-6 8-6 13l14 1c-1 6-1 12-6 16l1 2-5 5c7-4 14-8 22-10-3 6-10 10-11 17l13-7-7 14 1 8-8 7 15 1c-6 6-13 12-16 20l25-5-6 9c8-2 13-10 18-16l3 10-11 16-8 3 10 10c5-4 7-10 10-16l8 4 6-4-8-10 2-10 8-1v11l3-9 10 1 1-13c-2 3-3 6-6 7l-10-3c0-5 1-9 6-10 6-3 10-9 14-14 2-6 9-6 13-8l3 12 7 3-3 8h7l-6 9 8 6-6 9 10 2c6 10 13 20 17 31 1 6 7 6 12 7l-8-13a576 576 0 0111 5v-2h1c-4-5-5-11-4-17l12 6c-5-7-13-12-14-21l1-1 2-1h1l16 11 7-2c-7-6-10-15-16-21-5-5-5-12-6-18 5 5 11 10 19 10l1-10c-8-4-16-8-20-16l1-1h3l1-1 12 7c7 3 15 2 22 6l-10-12c1-6-4-8-7-11l5-3c-2-4-5-7-6-12l12 7-3-12c4 1 9 3 13 6l-2-12c-2-6 4-9 7-12l3 7 6-1c-3 3-6 8-6 13l14 1c-1 6-1 12-6 16l1 2-5 5c7-4 14-8 22-10-3 6-10 10-11 17l13-7-7 14 1 8-8 7 15 1c-6 6-13 12-16 20l25-5-6 9c8-2 13-10 18-16l3 10-11 16-8 3 10 10c5-4 7-10 10-16l8 4 6-4-8-10c0-5 2-9 4-12l7 3-1 9 3-9 10 1 1-13c-2 3-3 6-6 7l-10-3c0-5 1-9 6-10 6-3 10-9 14-14 2-6 9-6 13-8l3 12 7 3-3 8h7l-6 9 7 6-4 11h10c-1 3-3 6-6 8-6 5-13 6-20 7 9 3 18-2 27-4-1 6-3 13-9 16-5 5-12 5-18 7l21 3 17 1-5 14h-7l4 9h13-9l6-14 12 5 9-6-16-9h8l-7-12 10 5 8-6h-8l-3-8h12l-5-7c6 0 11-2 16-5l-1 15 7-2-8 12 10 2-4 11 6 2v-1l2-1h1l-3-9 8-4-6-10 7 2-2-12 15 2-6 6 12 1c0 4-3 7-7 9l5 3 10-3-7 8 5 4-13 8 9 4 11-3 5 9 5-1c-4-6-6-12-8-18 12 0 23-2 35-4-11-1-25-8-24-21 8 2 17 7 25 2-10 1-20-4-25-12l10-1-4-11 7-5c-3-3-8-8-2-11l1-4c5-3 7-9 9-14h1l2 1h1c8 2 11 11 17 15 3 3 10 6 9 12l-9 5c-3-2-4-6-6-9l2 13h9l3 8-1-9h10c1 7-3 14-7 20 5 1 10 2 15 1 2 4 2 10 7 10 3-1 6-4 8-7l-6-2-9-17c-1-3 1-5 2-8 5 6 9 12 17 15l-6-9 23 5c0-9-9-13-14-19 5 0 10-2 15-1l-8-6 1-9c-4-4-6-8-8-12l13 6c-1-7-8-10-10-16 7 2 15 5 21 9-5-5-9-13-9-21l13-2c-1-5-3-9-7-13l6 2 4-8 1 9 2-3 4 2-2 16 10-3v9c5-2 9-6 11-11 7 3 13 7 19 12 5-8 16-8 19-16l-15-5c-5-2-10-7-14-12l17 6c-3-10-12-16-17-25 8 2 14 7 20 11l3-6c-1-5-4-9-7-13 1-4 1-7-1-11 8 3 16 3 25 2-3-6-10-9-16-13 6-1 14 2 18-3l9 3 2-10c4 5 3 12 4 18 0 5-4 9-6 13l19-10c-3 10-11 17-17 24l10 5h11c-4 8-10 15-15 22 6 0 11 0 16 3 6-6 13-10 21-12-1 3-1 8-4 11-7 5-14 10-19 17l1 14c-10 2-21 1-30-4v20l11-2-5-6 21 3 14-10 8 3-8 10c-7 3-15 4-21 10 9-1 19-2 27 2l-1 5c-8 3-16 5-24 10l-8-2c4 5 8 12 15 13h20c-9 5-21 3-29 11l22 8-17 1 1 7-7-7c1 5 4 9 7 11l-1 5c-5-3-12-6-18-3l7 6c8 6 18 2 26 5l5-9h10l-5-8 21-1-10-6c7-1 16-1 22-8l-10-4-7-10-11-4 1-4 11-6-9-2 1-5h10l-3-9 22 2 2-16-7-9 7-4-3-15 10 2-3-7 16-4-2 10h4c-3 6-7 14-2 21l-10-2 13 16 12 2-11 7h-10l7 15-3 4 10 13-5 1c7 4 10 13 13 20 5 4 10 8 11 14 7 2 13 4 20 4l-9-4c-2-8-4-16-2-24 0-8 7-14 11-22 9 6 16 15 24 22l-8 6-7-5c3 5 7 9 12 12l5-7c5 6 1 13-2 18l12 2 1 10h10v8l-7 5 14 1c2 1 3 4 4 6 8 2 14-3 18-9-9-2-20-2-25-11 6-3 14-2 21-2-8-4-17-6-22-14l4-4c6 5 12 9 20 8 5 0 8 6 13 4l1-15c-7 4-15 4-23 4v-12c-6-7-16-11-18-21l13 6c4 4 10 1 16 1l-11-15 16-5c-5-6-10-11-14-18l15 7c-6-7-5-16-2-24l2 7c7-1 13 0 20 1l-11 10h17c0 3 2 7-1 9-2 3-6 2-10 3l9 8 14-8c-3 7-9 12-12 20l12-4c-5 7-14 10-22 13l15 11 15-9 2 6 16-9c5-6 10-14 13-22-5 5-9 11-16 13-6 1-14 1-17-5l8-10-2-5c5-4 9-8 15-10 0-5 1-9 3-13 2-5 7-7 10-11a320 320 0 01-4-1l-1-2 11-12-4-6c3-5 9-11 7-18l-8 1-3 5 1-8-5 3-6-9 17 1-3-7c5-3 9-8 13-13l-11 2 5-5-6-6 3-3c-4-6-3-13-1-20 6 0 11 4 17 4l-4 5 2 4 9-4v13l-1 1-3 1-1 1 12 6-11 10c3 6 3 12 2 18 9 1 18-2 26-1-2 3-3 7-1 10l9-1 3 7h-10l-2 3 13 5 1 4-16 7-4 9c-2 3-6 4-10 5 5 10 17 6 25 11h-13v6c8-1 17-1 25 1l-7 7 14 3-1 7h-10c3 5 8 8 13 11l-10-4-8 5-7-6c0 6 3 10 6 14-6-2-8-8-10-14h-15c1 5 1 10 5 14 3 2 6 2 9 2l-3 7 6 1-1 5c9 2 18 7 28 5l5 15c-3 2-6-3-9-4l-3 3c-4-2-8-3-13-3l6 7c-6 1-13 0-19-2 5 4 10 9 13 16l4-1 6 6-1 6c5 5 9 13 18 13 21 4 42-2 63 2-8-6-18-4-26-9-5-4-5-9-4-14l13 6 11-9c-6-2-12-5-17-10l8 1-9-13 12 6 6-5-7-3-1-8h14l-8-7c6-1 12-2 18-5 0 6 0 12-3 17l11-5-10 14 12 3-8 12c8 2 15-2 22-5-3 7-9 11-13 16l-2 10-17-3 1 12 4-1 1-4 6 1c7 1 12-7 18-4-3 6-10 9-16 11l15 3c-4 2-7 6-10 10 6 1 12 0 18-1l-5-3v-6h8l1-8 8-2-3-11c3-4 8-1 12-1l-7-6c6-6 11-15 19-18l7 14c1 7 0 15 7 19 4-4 9-7 11-12 6-12 11-24 14-37-5-1-11-2-15-5 7-2 13-7 17-13-5-7-7-16-5-24 9 1 17 9 16 19l3 3c-5 5-4 12-3 19l16-1-1 6 9 1-4 7 7 6c-4 0-7 2-10 1l-12-6-2 11 12-2c-3 4-5 9-9 13l16 3c-3 1-7 1-9 5h17l-4 5 19 8v-7c-5-4-10-7-13-13 9 3 18 7 28 9-6-6-12-15-11-24l5-7 9 4c-1-4-3-8-2-12l5-6 3 5 4-1-6 9 12 1-2 12 9-1-7 10 9-2-7 19 7 1-10 15 12-2 4 4 12-10c0 9-6 16-13 21l7 6a394 394 0 016-8l1 1h1l8-4c-3-5-5-10-4-15l16 1-12-8c6-4 11-9 15-15 2-3 6-4 9-5l9 17v17l7 1c-4 6-11 9-18 11l19-4c-1 10-11 14-19 17l23 3c6 3 12 5 19 6l-8-6c1-3 0-6-2-9l8 3c1-3-1-6-2-9l8-1-3-6h9c3 5 4 10 1 15l6 2-3 8 12-3-6 9c18 4 36 8 55 8 7-2 6-9 5-14-4 0-6 4-9 6l-2-6-9 10-7-6c-7 1-14-1-21-3 3-5 7-9 13-12 7-3 11-10 17-17 3-4 10-5 14-9 4-6 8-12 11-20-6 6-11 13-19 13-4 0-8 1-11-2-2-5 3-9 5-13l-2-5 15-10 3-12c2-5 7-8 11-11l-6-1 10-13-2-7c3-6 7-10 7-16l-8-1-4 5 1-5c-4-2-12-2-10-8 5-1 11 0 16 1l-3-7c5-3 9-8 13-12l-11 2 5-6-6-5 4-2-6-8 3-5v-8c5 0 10 2 13 5l4-1-3 8 11-2-2 17 7 3-9 10c2 6 2 12 2 18 8 1 17-1 25-2-1 3-5 7-1 10 3 1 11-1 11 5l-12 3c4 3 8 6 14 6v6c-6 0-15 5-18-2-3-3-7-4-11-5l-4 14 19-3c-1 8-8 13-14 17l11 6v9l15-2-14-6 18-4c6 5 14 9 23 6-4-3-9-4-14-5 1-7-3-12-6-19 9 5 18 8 27 10 9 3 16-4 24-5l-2-6c-8 3-15 9-25 8l2-4c5-1 11-2 15-5-2-2-4-6-7-5-5 0-8 4-10 6l-6-5 5-6-16 1-7-10c-3-5 0-12 0-17 8 2 15 6 21 11 4-1 5-6 10-7 3-2 11-4 9-9l-14-4c-6-3-10-8-14-13l17 6c-3-10-14-16-17-26l20 11c1-2 4-4 3-7-1-4-4-7-6-11l-1-12c7 3 15 3 24 2-2-7-10-9-16-13l16-1 2-4 9 5 4-11 3 18c1 5-4 9-6 13l19-8-7 13-11 10c7 5 14 7 23 6-5 8-11 15-15 23 5-1 11-3 15-6l-3 9c9-4 16-11 26-13-1 4-2 9-6 12l-20 17c2 4 5 10 1 14-10 3-21 2-29-5l-1 16c0 2-1 5 2 5 3 3 7-1 10-2l-5-5c8 1 15 3 22 2l16-10 6 4-4 6c-6 8-18 6-25 14 9-1 19-2 27 2l-1 6c-7 2-13 7-21 5l-1 4-11-1c5 5 9 12 16 13h21c-11 5-23 4-32 11l24 8-17 2 1 5-6 2 7 4-2 5c-6-3-12-5-19-4 3 3 5 6 8 7 7 6 17 2 26 5v-7l7-1-1-10 6-5-6-7 5-2 7-20c5 2 10 2 13 6 4 7 11 11 17 16 2 6-5 10-9 13h16c0 7-3 13-6 20h14c1 5 4 10 8 12 2-3 10-6 5-9-7-6-14-15-12-24l16 13-3-8 21 5c0-9-9-13-14-19l12-1c-6-7-6-17-11-25l12 4c-3-5-6-10-11-14l14 2-4-16c5-1 11-1 15 4-1-6-2-11-6-16l4 1 4-6c3 3 6 5 7 8l-2 14 10-5 8 7-3 14c-2 7-7 12-11 17 5 0 11 0 16-2 5-3 11-6 18-7-3 8-11 11-17 15l-1 8c7 0 13-3 18-5-2 11-10 21-18 30l2 6c7-4 13-9 21-12 1 11-12 13-16 22l13-5 2 7c-5 5-10 10-11 18 24-2 48-1 71-5-4-2-11-5-7-12 7 0 15-3 22-6-2-4-5-7-10-9 2-2 3-5 6-6h17c-7-7-19-6-28-7l3-5c-10-1-17-8-25-12l3-5c6 1 11-1 14-6 7 4 16 8 23 3v-7l-5-2-7 5-3-21c6-1 11-4 17-7l1 9 5-4h6c-3-5-7-11-6-18 1-4 5-7 8-10 3 2 5 5 9 6 7-1 14-5 16-12l-6 3-2-11-9 1v-5l6-3-5-8 6-7c10 5 21 5 32 6-1-3-2-7-5-8l-18-6-2-13c6-1 9-4 11-9l9 2v-7c8-6 12-14 16-22l6 5 7-8h7c1 6-1 12 1 18s10 4 14 5l-4 16 8-6 1 9c-2 4-7 6-11 9l16 10c-3 6-7 13-12 17l20 2-4 12-6 1 3-11c-4 4-5 10-8 14-8 6-18 7-27 6 9 9 23 1 33-1 6-2 12-3 13-9l16 1c0-4 1-9-1-13-2-6 0-13 0-20h5c1-5 6-7 11-7 1 8 1 17-5 23l8 10 9 2c-4 5-10 5-15 6 3 8 4 17 8 25 5 8 8 18 17 22 10 3 20 0 30 2 1-6-1-11-4-15h7l4-11-6 1-7-11 2-12 15 9c5-6 11-9 18-11-9-3-18-6-24-14l14 4-14-20 16 8 9-10-7 3c-4-4-6-10-6-16 7 1 14 3 21 0l-13-10 21-2 3-5c2 8 4 17-2 24 5-2 9-5 14-6-2 7-8 13-13 18 5 3 11 5 17 5l-11 18 12-5-1 7 12-12c11 2 21-5 32-6l-3-6 7-1-4-7 12-3c4-5 6-12 4-18-5 2-11 3-16 1l-4 7-1-8-7 9-10-6-11 4 13-8 1-4-9 1c-4-1-3-7-4-10l17-2c-3-3-7-6-7-10 9-2 19-2 27 1l1-8-15 1c6-6 15-4 22-7l7-7c-5 0-10-3-15-5l4-6c-7-6-16-10-24-13l1-5c4-1 10 0 13-4 2-2 0-5 0-7l-10 4 1-9c5 1 11 2 14-4l-5-9c10 2 20 5 30 3-1-7 0-14 2-21l-11-11 12-7-5-2c1-5 2-11 0-16l10 4 3-4-5-7 6 2c3-5 9-7 15-6l-1 10 4 3c-3 4-5 9-5 14l-4 7 8 5-15-2c4 6 10 10 15 15l-1 6 18 2c-3 2-5 6-7 9l-10-8 5 9c-5-2-12-3-14 3 2 6 7 10 9 16 0 3-3 4-4 7 5 6 12 10 13 18h-6l9 7c4 6 5 13 6 19l19 13-5 3 9 12-2 6c-6 1-11 3-17 1-8-2-13-10-18-16 2 10 8 17 13 25 4 6 13 4 17 11 6 7 11 16 20 20 7 3 12 9 16 15l12-3-1-5-10-7 1-6c8 5 16 9 25 7v-1l1-3 1-1-12-9-7 5c-8-6-17-12-19-22 11 0 20 13 32 8-4-7-11-11-18-15l-2-12c-7-1-12-5-15-11 6-1 11-3 16-6 8 8 19 15 31 11l-4-5-15-2 3-12c-6-3-11-8-9-15l13 7c7 4 14 3 20 6 5 2 12 5 16 1 6-4 12-6 18-6v-9l-8 1c-5 3-8 7-13 9h-14l1-5c7 0 15-2 21-5-1-3-2-6-5-8l-12 1-5 9c-2-3-5-6-9-8l-1-11c-4 2-8 4-13 4-5-6-9-13-12-20l3-20c4 3 9 6 14 7 7 2 9 12 18 11l1-8c9-3 20-5 22-15l-21-6c-7-4-14-9-19-16 9 1 16 6 25 7l-7-11c-5-9-17-14-18-25 11 3 18 12 27 16 3-4 5-9 6-13l5 4c2-3 2-7 1-11l-8 5-12-13 6-5-6-9c12 4 23 5 35 3-1-11-15-11-20-18h22l1-8c4 4 9 6 14 8l2-15c8 9 4 22 8 32-4 3-11 7-9 13 8-6 17-11 27-14l-11 21c-8 1-11 8-15 13l10 2 4 6c5-2 11-2 16-2-3 12-16 20-19 32 8 0 15-4 22-7-3 3-6 7-6 12 5-1 9-5 12-8 7-5 15-8 23-11l-3 11h9l6 7 6-3-6 7 4 4 11-4c-2 6-1 12 0 18l-5 1c3 4 8 6 12 8-4 4-9 8-11 13 1 7 3 14 2 21 10 1 20 0 29-3l2 4-6 8c5 3 11 3 16 2a390 390 0 00-2 4h4l-2 6-11-6 1 8h5v5l9-1 2 8-20 4 2 3-1 1-5 5 1 5-13 8c7 11 22 4 30 13l-16-1v8c10-1 22-4 31 2-4 2-7 5-9 8l18 2-2 9-6 3-6-4 5 10-12 7-9-11c1 4 0 8 2 12l8 6-9-1-4-14-18-1-3 8 8-1c2 5 3 10 9 12 11 5 24 6 37 8 5-5 10-11 13-18l-8-7c2-13 20-16 19-29l-12-4c1-9 12-11 17-18 7-8 8-20 9-31 5-11 16-18 24-27v511zm-864-313c-2 2-4 5-4 8 3-1 8-2 10-6l-6-2zm357 1l1 3 3-1c0-3-2-3-4-2zm-259-10l7 8c6-2 12-8 10-16-7 1-12 5-17 8zm-339 3c-1 1-1 3 1 3h4c2-3-3-6-5-3zm148-1v4c1 1 3 1 4-1 2-3-3-5-4-2zm318-6c2 2 2 6 5 6 2-2 2-6 3-9l-8 3zm166-1l-3 3c-1 1-2 2-1 4 3 1 8-6 4-7zm-29-2l8 7 2-8-10 1zm-242-1l6 7 6-7h-12zm-172-2c1 3 3 5 6 6l8 2c-2-6-9-6-14-8zm652-2l-2 3c0 2 1 3 2 3 3 0 3-6 0-6zm-1143-23l-1 7c-7-3-15-5-22-2 1 4 4 9 9 10 1 3 2 6 5 8 5 2 11 3 17 3-4-3-9-7-9-13 6 1 11 6 16 9l3-3-14-19h-4zm1007 13c0 3 2 5 4 7l8 5c-4-4-7-9-12-12zm-905 8l1 3 1-1c1-2 1-3-2-2zm571-20l1 7 8 1v14l6-8-2-10-13-4zm-623 18l-1 3 8-3 2-3-9 3zm860-2l1 3 1-1c1-2 1-3-2-2zm-1007-6l1 7c3 1 7 1 10-1l-11-6zm384 3v3h3c1-3 0-4-3-3zm53-4c-1 0-2 1-2 3v3c4 3 7-9 2-6zm-63-17c-4 7 2 16 10 16 7 4 15 11 23 5 0-4-5-6-8-9 1-5 5-2 7 0 4 2 8 2 12 2l2-4-8-5h-13l-8-5c0 4 2 9 4 12l-4-1c0-4-1-7-3-11-4 2-9 1-14 0zm782-6c-1 4 0 11 5 13l27 15-14-13c-2-2-2-6-5-9h-9c-2-1-4-4-4-6zm-143 23l11 5c1-3 1-7 3-10-6 0-11 1-14 5zm215 1v3h4c1-3 0-4-4-3zm-1192-5l-10-1-12 4 24 3c5-4 7-10 10-15-4 3-7 8-12 9zm833 1c-1 1 0 3 1 3h3c2-2-2-5-4-3zm-427-5l1 7c4 0 4-5 5-7l-2-1h-3-1v1zm643-7c1 6 7 10 11 14-1-7-3-14-8-19l-3 5zm-89 6l1 7 3 1v-8h-4zm212 1v4h5c3-3-2-7-5-4zm27-2c-2 1-1 3 0 4h4c2-3-2-7-4-4zm-471-19l-6 5 9-2-3 9c8-5 16-9 25-9l-5 8 5-2 1 12c7-2 14-1 20 3l3-5c2-1 5-2 4-5h-1l-2-1h-1c-11 1-18-11-29-12-7 0-13 1-19-1h-1zm63 9l-1 12 16 2 1-5-13-4c6-4 12-5 18-7-7 0-14 0-21 2zm-830 11l1 3 1-2c1-1 1-2-2-1zm1016-23c7 0 14-2 21 1v5c-7 3-14 3-20 7l-6-1c3 8 11 14 20 12l9-12c-2-6 3-11 0-17-8-2-18-2-24 5zm-1488 21c0 2 1 3 2 3l4-1c0-3-5-3-6-2zm1611-62l-3 13c5 5 10 10 17 13 9 2 14 12 21 17 9 5 16 12 23 19 4 1 4-3 4-6-5-6-8-13-14-18-9-8-3-21-9-30l-10-3c-2 4-4 8-8 9l-10-12-1 6h-6c0-3-2-6-4-9v1zm-1644 54l1 7 13 1-14-8zm1635 2c-1 2 0 3 2 4 1 2 3 2 4 2 1-3-4-7-6-6zm-133-8l4 5-4 6 7 2c0-4 2-9 5-12h7c-3-7-13-4-19-1zm-219 8c-3 2-3 3-1 4 1 1 4 1 5-1 2-3-3-4-4-3zm458-1c-2 2 0 3 2 3s4 0 4-3-5-2-6 0zm-813-3l-2 2 2 2c3-1 3-3 0-4zm-16-1l5 2 5 1c0-5-7-2-10-3zm53-9l3 11 7 1v-8c-3-3-6-4-10-4zm951 7c-1 2 1 4 3 4h4c-1-3-4-5-7-4zm-1870-27l-8 5-6-5 3 6-17 14c6 2 14 1 21 0-6 4-13 6-19 8l2 4c9-1 17-3 26-6l-1-5h1l2-1h1v-5l8-2c2-4 6-8 3-13l-13 1-3 8-5 3c3-3 6-7 6-12h-1zm601 18v8l5-6-5-2zm465 1c1 3 3 7 7 7v-8l-7 1zm259-20l-17 15c-7 2-15-1-20 5 5-1 11 0 15 3l7-5c3 5 8 8 14 9l-4-6 17-1c-1-4-6-3-9-4 5-2 12-1 16-6-5-2-9-6-10-11l11 2v-11c-6 4-13 8-20 10zm-916 21l1 5c4 1 7 0 9-3l-10-2zm-293 0c-2 1-2 2-1 3s3 2 4 1c5-2 0-7-3-4zm-211 0c-2 2-1 3 0 4l4-1c2-3-3-5-4-3zm1677-8l-2 5 12 7-10-12zm-1481 4c-2 2 2 3 3 5l7-1 3-9 10 4 1-4c-8-1-16 0-24 5zm783 4l10-2-9-7-1 9zm37-8v5l11 3-1-10-10 2zm-755-5c7 0 11 6 12 12 3-1 5-2 6-4l-6-2 4-7c-5-1-12-5-16 1zm705 10l9 2-4-10c-2 2-7 4-5 8zm781-8v6l7 3c4-2 2-6 2-9h-9zm-1828 5v3h3c1-3 0-4-3-3zm-269-5c-4 1-5 4-7 7 5 3 7-1 9-5l7 2 2-4h-11zm664-11v8l-9 2c3 2 4 6 6 9l11-1 2-3c-4 1-9 1-14-1l8-6-4-8zm-425 11l8 2 10 5c-3-8-11-11-18-7zm1944 3l7 3 7-1c-2-6-9-4-14-2zm-1686-20c2 8 7 15 12 21 3-1 6-3 9-2 7 0 14-2 21-4-5 0-10-2-14-6-4 2-9 4-14 3-6-2-10-7-14-12zm1443-16c-4 5-9 8-14 11 2 4 2 8 1 13l-5 1c-6-1-13-2-19-5l-1 16c3 1 7 2 9-2l-3-4 17 2 11-7 9-1 6-5-5-2c-1-6-6-12-2-18l-4 1zm-583 29v3c0 1 1 2 3 0 2-1 0-6-3-3zm-714-3c-2 1-2 3-2 4 1 2 2 3 4 2 3-1 2-7-2-6zm736-3c-5-1-9 1-12 3 1 8 13 9 15 1l7 3c0-6-6-12-10-7zm-997 5l-1 4 10-1c-2-2-6-2-9-3zm306-10c-1 4-2 8-7 8l-2-6-6 10c5 2 12 1 17 0 0-4 1-9-2-12zm-676-5l-3 6 6 4 2 7c1-2 2-6 1-9l-6-4 5-5-5 1zm102 8l-2 9h4v-4l7-5h-9zm19 0l9 7v-7h-9zm-156 3c-3 3-1 4 2 4 2 0 5-1 5-4h-7zm1366-2v4c0 2 2 2 3 1 3-2 0-7-3-5zm349-2l-8 1v1l-1 2 12 2v-6h-3zm654 2h2v1c-1 2-2 2-2-1zm-386 0l1 2 1-1c1-1 1-2-2-1zm-1329-7c0 4 2 5 5 7l9 2c-4-4-8-9-14-9zm1606 7c4-1 7-4 10-6v-10c-2 6-8 10-10 16zm-278-9l5 3v5c9 0 9-10 11-16-6 2-12 3-16 8zm194 3v4h4c1-4 0-5-4-4zm-1940-2c2 1 3 3 4 6l11-2 1-10c-5 1-11 3-16 6zm-207-2l14-5 2 11 11 1 6-5-22-8c-5-1-9 1-11 6zm40-1l-3 7 10 1 1-2-8-3 7-4-7 1zm153-1l4 3-6 6 10-2-1-6-7-1zm1704 0l3 8c4-1 9-2 11-6l-14-2zm-1263 1l-1 5 6 1 4-6h-9zm1557-6l1 4c4 3 9 9 14 5 0-4 2-8-1-10l-14 1zm-2207 3c-2 1-3 2-3 4s2 3 4 2c3-1 3-7-1-6zm267 1v4h3c3-2-1-6-3-4zm1904 0c-1 0-2 1-1 3 0 1 1 2 3 2 3-1 2-6-2-5zm-451 3c6 1 11 2 17 1l-3-4-14 3zm67-4l-2 2 2 2c3-1 3-2 0-4zm-1417-6l-4 3v4c3 2 7-6 4-7zm1791 6a71 71 0 002-8c-5 0-7 6-2 8zm-2236-7c1 3 5 4 7 5v-6l-7 1zm408 1v3h4c1-3 0-4-4-3zm1631-2c-1 2 0 3 1 3h3c2-3-3-5-4-3zm-1591-6v5c1 2 2 3 4 3 1-3 2-9-4-8zm-554 5l8 3-2-6-6 3zm802-4l8 5c3 1 6 0 8-4-5-2-11-1-16-1zm1604 0v4c2 1 4 2 5 0 3-3-2-7-5-4zm-61 1v3h3c0-3-1-4-3-3zm-1520 0v3l2-2c1-1 0-2-2-1zm-239-2l1 4h3c1-3 0-4-4-4zm1762-8l4 11c5-1 3-7 5-12l-9 1zm-406 10c3 0 8 3 9-2l-4-4-5 6zm-1919-6l-4 2 1 3c4 2 9-5 3-5zm398 1v3c1 1 3 1 4-1 2-3-3-5-4-2zm-217 0l8 3-2-6-6 3zm2199-1l1 3 3-1c0-3-2-3-4-2zm-2455-3v5c7-1 13-5 16-11-5 2-10 7-16 6zm2476 0l-12 1h-1v3l-1 1c6-1 12-2 15-5h-1zm-29-1c-1 2 0 3 1 4h4c2-3-3-6-5-4zm-2508-2c6 2 12 8 18 4-3-5-8-7-11-12-4-1-5 5-7 8zm2443 1v3h3c1-3 0-4-3-3zm-2103-3l-4 2 1 3c4 2 9-5 3-5zm235-7c3 6 9 9 16 10l-1-3-15-7zm1100 2c-5 2 0 10 5 8 6 0 9-4 13-8-6 2-12 1-18 0zm-992-11l2 6-3 4 3 8h6c0-5-2-9-5-13l8 1-2-8-9 2zm-48 12c-2 1-3 2-2 4 0 1 2 3 4 2 4-1 1-7-2-6zm1893-11c-3 4-8 7-13 8 9-1 15 6 23 9v-7c3-3 5-7 5-11l6-4c-7 2-14 6-21 5zM886 558v4h4c1-4-1-5-4-4zm2059-2c-2 0-3 2-4 3-1 2 0 3 2 3 4 0 7-6 2-6zm-1395 1v5c7-1 13-5 16-11-5 2-10 7-16 6zm-298-31c-7 0-13 2-19 6 8 1 16-2 23 2l-1 5-27 7c6 7 15 9 24 11-1-6 3-10 7-14l-3-3c3-4 5-8 6-13l-7-1 2-8-5 8zm791 20l-1 6c4 1 9 3 14 3-2-4-4-9-3-14l-10 5zm1673 8l3-3 1-5c-4 1-7 5-4 8zm-2435-11l-4 10 11-3-1-5-6-2zm652-1l1 10 8-2-9-8zm-718 5v3h7v-4l-7 1zm2553-13c1 5 2 10 5 15l8 1v-11c-4-4-8-7-13-5zm-1844 12v3h4c1-3 0-4-4-3zm1808-3l-2 2 2 3c3 0 3-5 0-5zm-2517-1c4 2 9 3 12-1l8-1-5-3c-6 0-13-2-15 5zm-7-1v2h2c1-1 1-2-2-2zm2347-7c2 2 1 3 0 4-2 2-4 2-5 2-7 0 3-5 5-6zm-2359 2v3l3 1c1-4 0-5-3-4zm2102-2l-2 3c0 1 0 2 2 3 4 1 5-8 0-6zm-1314-4c-5 2-13-1-15 6 3 4 8 3 12 4l2-5 9 1c-2-3-5-8-8-6zm-24 6v3h2c1-1 2-2-2-3zm-626-1l-1 3 3 1c2-2 1-4-2-4zm2498-47c-10-5-18 4-27 7l-1 3 22-2 15 4-2 9c-7 1-16 2-19 9l-10-5-1 9c-5 1-10-6-15-2 1 5 5 5 9 6l2 7c8 5 18 7 28 4v-7c6-4 10-10 15-15l-7-3c2-8 10-13 11-22l-12-3c-1 2-1 6-3 7-1-7 3-11 7-16-5 3-9 6-12 10zm-898 43l8 5-5-7-3 2zm-984 5a123 123 0 010-8c-6-1-6 9 0 8zm-637-4v3l2-1c1-2 1-3-2-2zm2408 1c4 0 9 0 13-2-5-3-8-7-11-11-3 4-2 9-2 13zm-2628-23h-18l4 7-4-2c0-3 0-6-2-8h-11l-1 4c1 4 5 8 10 8v5l4 1-3 3c7 2 15 4 23 4v-3h-9l16-5c-4-4-7-8-8-13l11 3-2-11c-4 1-7 4-10 7zm2677 13l1 6 15 3-3-12-13 3zm112-11v13l-1 1-3 2-1 1 2 2c7 1 13-2 19-4l-2-10c-5-1-11 0-14-5zm-1962 10l-2 8 3 1 3-7-4-2zm1780 6c4 3 9 4 14 2l-4-12c-5 2-7 6-10 10zm-2162-1l-1 3 3 1c2-2 1-4-2-4zm-21-3v3l2-1c1-2 1-3-2-2zm-265-34c-4 4-7 8-12 10 1 5 2 9 1 13-8 2-17 1-24-4v17l9-2-4-4 18 2c5-3 9-9 15-7 5 1 8-3 9-7l-4-1c0-5-6-12-1-17-2-1-5-3-7 0zm688 23l-4-3-10 10c8 1 16 5 24 5l15-6-1-6c-6 1-10 4-14 7-4 1-11 2-10-3l11-2c4 0 5-4 2-6-4-3-11-1-13 4zm1756 7l-1 1-1 2c2 7 10-4 2-3zm-2724-5c4 0 7 3 10 6 4 2 7 4 11 1-6-5-13-7-21-7zm-78 3c-1 0-2 2-1 3 0 1 1 2 3 2 3-1 1-7-2-5zm2864 0c2 0 3-1 4-3l1-4c-4 0-4 4-5 7zm-2423-10v9h4l3-7-7-2zm2454-1c-3-1-6-5-10-2-4 1-9 5-5 9 4 3 8 4 13 3 2-2 4-5 4-8l10 4c0-2 1-3 3-4l-10-7c-3 0-4 3-5 5zm-1877-19l-1 5 1 1h3l1 1-9 8 3 3-10 11c5-2 11-2 16-3l24-10c-6-1-11-2-16 0l-12-16zm-892 22l-11-1-11 4 25 4 9-15c-4 3-7 7-12 8zm2316 2l-2 2 2 2c3-1 3-2 0-4zm-1456-8c1 3 0 10 5 9l2-7-7-2zm1859-1l-1 7 6 2c1-3 2-7 0-10l-5 1zm-2200-2a219 219 0 011 8h3l3-7-7-2v1zm1399 1v4c1 2 2 2 4 1 2-2 0-7-4-5zm-1959 2v3h3c1-3 0-4-3-3zm238-4l1 6c6 1 11-1 14-5l-15-1zm-11 1v3h3c1-3 0-4-3-3zm-215-1v3l2-1c1-2 1-3-2-2zm-233-5l-2 6 10 1-3-7h-5zm1564-16c2 6 3 13-3 16 6 1 13-2 19-3l-4-8c-5 0-9-2-12-5zm-350 7c0 3 0 8 4 8 6 1 10-3 14-7l-18-1zm-1046-4c0 4 2 6 5 5l7-4-12-1zm2914-60l-3 1c-5 4-13 7-10 14-5 1-11 1-13 6-3 4 3 8 5 11-2 3-2 6-2 10-4 0-8 1-11 4l-9-6-4 6c-6-4-12-10-19-11-1 7-2 14 1 20l-3 7c5 5 16 4 18-4l-8-4 20 2c4 1 9 2 13 0l18-13c3-1 5 3 7 4 7-3 13-8 17-14-5-2-10 0-15 1l8-5-2-7-6 1c2-3 4-7 3-10l-5-5v-1l2-2h7c-3-2-6-5-9-5zm-2641 57v4l4 1c1-3-2-6-4-5zm-554 1c-1 2 1 3 3 4 1 0 4 0 4-2-1-3-5-4-7-2zm3194-5v2h4c2-3-3-5-4-3zm-3174-1l1 3 3-1c0-3-2-4-4-2zm-30-9l1 8h7l-1-9-7 1zm3089 0v3h3c1-3 0-4-3-3zm-1773-4h-1l-1 1-1 1 8 5-5-7zm1617-11l-4 10c7 1 14 6 22 3-7-3-8-11-5-17-3 4-8 5-13 4zm178 7v3h3c1-3 0-4-3-3zm-3249-5c-1 1 0 3 1 4h3c2-3-2-6-4-4zm3278-11c-1 6 2 13 9 12 8 0 13-6 18-10-9 1-18-1-27-2zm-3117 4l-20-3v5c8-2 16 0 23 5v-14l-3 7zm3094 4v2h1c2-1 2-2-1-2zm-50-1v3h2c1-1 2-3-2-3zm54-3c-1 1 0 2 1 3h4c2-3-3-6-5-3zm-3239 1v3l2-1c1-2 1-3-2-2zm1435-11v4c1 1 2 2 3 1 3-2 0-8-3-5zm-1414-1c-1 1-2 2-1 3 0 1 1 2 3 2 3-1 1-6-2-5zm65-35l-10 8v2l-1 3v1l11-4c1 5-3 8-6 11l2 8c-2 4-7 6-9 10 5-1 9-5 13-8l-2-4c3-4 8-8 5-14l6-9-9-4zm-216 29v4h4c2-3-2-6-4-4zm111-1v2h2c1-1 1-2-2-2zm-129-7v8c5 0 7-4 7-8h-7zm209-8l1 9c5-1 8-6 5-10l-6 1zm3170-1v3c1 2 2 2 4 1 3-2-1-7-4-4zM380 394l-1 13c5 1 9-1 13-3l-3 10 7-1 1-9-17-10zm24 14l-2 2 2 2c3-1 3-2 0-4zm3339-1v4c1 1 3 1 4-1 3-2-2-6-4-3zM297 394c-1 2-1 3 1 4 1 1 2 1 3-1 3-2-2-5-4-3zm134-8v8c5 0 8-5 5-9l-5 1zm-158-9v7l-7 3c6 0 12 2 17 5l9-5-11-1 12-4c-3-7-13-7-20-5zm44 9v4h3c1-4 0-5-3-4zm3471 1v2h1c2-1 3-2-1-2zm-3456-8v2h2c1-1 2-2-2-2zm101-1v3l2-1c1-2 1-3-2-2zm-130-8c3 2 2 7 2 10 6-1 4-8 4-12-3-2-4 1-6 2zm28-3l-4 2c-1 2-1 3 1 4 4 1 6-5 3-6zm3426 1l1 2 1-1c1-1 1-3-2-1zM200 350c3 7 7 13 12 18l2-7-14-11zm98 9l-2 3c4 1 10 6 12 0-1-4-6-2-10-3zm23 0v3h3c1-3 0-5-3-3zM26 348c-3 1-3 5-4 8 5 0 7-4 9-8l7 3 2-4c-5 0-10-1-14 1zm12-18c4 4 8 8 8 13l3-2-1-8-10-3zm-34 7l-1 5c3-1 7-2 9-5H4zm149-2c-1 2 0 3 2 3 2 1 4 0 4-2 0-3-5-3-6-1zm145-3c0 6 6 3 9 4v-5l-9 1zM51 319c1 4-1 9 2 12l11 2 6-6-19-8zm26 4v8h10l-8-6 7-3-9 1zm-58-3c-2 0-3 1-4 3-1 1-1 3 1 3 4 1 7-5 3-6zm143-3l-2 3c0 2 0 3 2 4 4 0 5-8 0-7zm4-9l1 4h5l2-5-8 1zm-121-8c-1 2 1 4 2 4 2 1 4 0 5-2-1-3-5-4-7-2zM0 254l2 2-2 2v-4z" style="fill: var(--c8);"/>
<path d="M810 628l7-3c15-7 33-9 45-20 4-4 5-8 0-12l-22-13c10 0 20 3 29 7l8 3c11 6 15 15 5 21-14 11-34 13-47 25l-25-8z" style="fill: var(--c4);"/>
</svg>
</div>
</div>
<!-- landscape layer 9 - foreground 2 -->
<div class="landscape__layer landscape__layer--9" style="--offset:0.2">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M3954 700l46 14v286H0V480l22-1c12 0 24-4 36-5 11-1 21-4 31-7 16-5 33-2 49-4 15 0 30-7 45-2 17 5 33 16 43 31 4 6 11 7 18 8 15 2 29 1 44 0s27 12 42 11c21 1 43-8 64-1 15 4 25 15 37 23 7 4 11 10 17 15 11 4 24 3 35 7 10 3 20 7 30 8 13 3 25 0 37 1 15 1 31-5 45 1 16 6 33 5 49 7 12 1 22 7 32 12 6 3 10 9 16 11h22c7 1 13 6 20 6 13 1 25 1 37 6 11 3 20 9 30 13 11 3 23 4 34 9 8 4 14 11 21 15 15 5 31 7 45 15 10 6 21 6 31 10 12 4 24 4 36 4 3-5 5-10 9-14 4-3 10-5 15-7 6-3 11-7 17-9 8-2 18-1 26-4 11-2 23-4 34-2 8 2 14 8 22 10 7 2 15 1 23 1 12-1 24 0 36-4 19-6 40-9 59-3 11 5 23 11 31 21l8 8 19-1c8-3 16-9 25-8 16 3 26 16 40 22 12-1 25-5 36-1 10 2 16 10 23 15 11 4 23 2 35 6l24 3c11 0 21 5 32 9 8-7 17-12 28-13 11-2 23 0 34 2 5-2 10-6 14-9 4-7 6-15 12-19 11-9 26-8 40-6 20 4 41 10 58 22 8 4 13 11 16 19h30c4 1 6-2 9-4 9-8 23-10 34-6 14 5 28 2 42 6 8 2 14-4 20-6 18-6 37-3 54 0 7 2 13-3 20-4 14-2 27 1 41 3 9 1 18 2 27 5 5 2 9 7 14 9l19 4c9 3 17 8 25 13 6 4 13-1 20-2 23-2 47 6 66 20 2 2 5 5 9 4l24-3c6 0 10-6 16-8 12-7 27-5 41-5 11 2 23 1 34 2 11 2 20 9 27 16 14-2 27-4 40-1 27 3 47 22 72 28l33 9c3 1 8 2 11-1 8-6 14-13 23-18 6-3 14-3 22-5 7-5 12-12 19-15 23-11 52-6 71 11 11 7 16 19 28 24s25 9 38 12c8 2 14-5 22-6l27-4c29 0 54 17 82 21 22 3 44-6 66-5 25 0 49 3 74 2 41-2 80 11 119 22 21 7 43 12 64 20 6 3 12 5 19 6l72 3c10 1 18-7 27-9 10-4 22-2 31-9l27-17c10-7 22-14 35-13 11 0 21 7 32 8 13 0 26-2 38-7 7-4 16-3 23-6l4-13-15-1c-1 5-3 8-7 10v-11c-5 2-9 5-11 11l-9-2c6-5 6-14 9-20 4-8 14-2 20-5 10-5 20-6 30-9-1-3-3-6-6-8l12-1-5-7v-5c5 0 10 1 15-2 4-5 5-12 10-17l-6-8-11 4c-4-2-8-6-11-2-3 6-3 12-4 17-4 2-9 3-14 2 5-2 11-4 13-10v-11c-4 4-7 9-12 12l-13-8-14 5c5-6 13-7 19-12l-3-7-4 6c-5-3-13-7-11-15 6-6 15-3 23-4l-1-5-9-4 1-6c13-1 26-4 38 2l1-12-22 4c9-15 30-3 39-17-5-5-10-10-17-12l2-9-7 1 3-6-6-2c12-5 22 5 34 3 4-5-4-5-7-6l2-19c-4 6-11 6-17 6l-3 11c-11 1-22 1-31-5l2-9 10-1c3-4 9-7 8-13-4 1-8 4-11 7-6-4-4-10-2-16l15 2 5-6c-3-3-6-6-6-11 5-1 11-1 17 2 8 4 17 0 26 0l-2-15 5-13c-6-6-12-11-17-18 7-2 14-5 18-12l-9 1c2-8 4-17 0-24 6 4 15 9 20 1l-7-10 8 3 8-8 12-1 2 9-6 9c4-1 8 0 12 1-5 5-14 11-8 18l-7 10 11 8c-7 1-13-4-20-2 3 9 12 13 19 18 3 2 1 7 2 11l22 2v5c-4 2-8 5-10 9l-8-8 1 15-5-7c-5-1-13-2-13 5 1 10 10 16 13 26l-8 4c5 8 11 15 19 20l-2 8-7-3c3 7 10 11 16 14v8l7 5c-1 5-2 10-1 14 5 4 11 6 17 7l3 8 7 2-8 5c5 5 10 10 13 16 0 5-1 10-6 11h-20c-11-3-18-14-24-23 0 5-1 10 3 14l17 23c4 6 12 5 18 8l8 11 2-14c5 3 11 8 18 7 8-4 15-9 22-15-11 0-19-8-27-14l1-1 1-2h1c6 3 12 6 19 7-4-6-7-13-13-17-4-4-8-8-8-14 9 1 15 9 23 13 2-3 5-5 5-8-1-4-4-6-6-9-4-5-2-12-3-18 8 2 16 3 24 1l-1-7-12-9h15l15-5 3-6 18 6c7 2 12 7 18 10h14s83 4 144 5c23 0 59 7 70 11 16 8 44 11 64 16l20 5z" style="fill: var(--c9);"/>
</svg>
</div>
</div>
<!-- landscape layer 10 - empty -->
<div class="landscape__layer" style="--offset:0">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M190 55l11 1c3 1 4 5 4 8-1 9 2 19-1 28l5-8c3 1 5 4 7 7l12-2c-3 8-11 16-6 25l9-9c2 5 5 12 1 17-4 6-11 8-17 11h8c2 4 3 7 6 10l12 3-12 25-10 1 15 4-1 8c3-8 12-10 19-7l-4 17-8 4-2-10 7 3-4-11c-4 7-8 14-8 23-10 2-19 5-28 11l-2-4-14-1c6 8 16 7 25 9l12-8 7 4 9-15v12c4-5 10-8 16-9l-3 9c-2 5-7 7-11 10h14l-3 9c-4 1-9 1-13 4l-21 20c-4 4-10 2-15 2-6 0-12 3-18 5l2 2 12-1c4 0 7 5 10 7l3-6 7-3 22 18 1-5c6-1 13-3 18-7l4 5 7-5 3 7h8c-2 5-5 9-8 12-6 5-3 14-4 21l-7 4-10-4-3 5 11 2-8 12c6 0 12 3 17 1 4-1 3-4 4-7 0-5 3-9 5-13 14 4 28 3 41 3-4 6-7 12-13 16-4 1-9 0-14-1l5 9-13 5 4-12c-5 5-12 6-19 5l6 9-2 2-15-8c-12-1-23 2-34 3-8 1-16 4-23 6-5 2-11 3-14 8-2 8 0 16 0 24l8-1-6-1c-1-5 6-4 10-4 7 2 14-1 21-3l-4 7c3 2 6 5 10 4 5-1 11-3 17-1l4-2h17l4 8 10-2 2 6-16-1 3 9c-8 4-13 12-21 17v3l-6 4c7 5 15 7 23 8-3 7-12 6-19 6l4 8-4 4c-3-4-7-8-13-9l2 11c-12-5-18-18-29-24l-11 4 3 4c6 1 10 5 14 8h-20c0 18-1 36 1 54l2 40 46 11c16 7 35 7 52 10 13 4 26 9 34 20 5 6 7 15 15 17 16 6 33 12 47 23 11 7 16 20 26 29 5 4 10 9 17 11 8 2 17 5 23 12 8 9 8 23 15 33 8 2 17 3 25 7 8 5 12 13 20 18l16 14c9 13 20 25 35 31 16 7 34 5 51 8 6 1 10-3 15-6 16-11 33-22 51-28l47-16c6-2 12-5 18-5h17c13-4 24-12 36-16 6-1 11-4 16-7 13 0 25-2 37-6 15-3 28 4 41 9 10 1 21 0 31 3 16 5 32-4 48-4 8 0 16 2 24 5 8 2 17-2 26-2 20-1 38 6 56 13 37 1 71 15 106 22 10 2 20-2 31-3 24-2 47 4 70 10 20 6 40 13 61 11 14-1 28 0 42 2 20 4 38 18 54 30 11 9 23 16 35 23 7 5 17 6 25 9 8 4 16 9 23 15 12 8 25 14 37 21 8 4 16 9 24 10 16 1 32-3 48-5 17-2 33 7 48 13 8 3 16 2 24 1 19-1 38 0 57 2 13 1 24 5 36 8 13 4 26 1 39 3 11 1 21 5 32 5 10-2 19-5 29-6 9-1 17-7 27-8l16 2h32c9 0 15-7 24-7 13-2 24 5 36 8 16 4 32 3 48 6 27 3 51 16 76 22 35 8 67 21 100 34l29 11c9 3 19 2 29 3 12 2 24-4 36-3 21 1 39 13 59 18 22 6 46 7 69 4 19-2 39-3 59-2 18 2 36-3 55-2 18 1 36-2 54-1 17 0 35-3 52-2 26 1 52-8 78-7 25 0 50 3 75 4 46 3 92 8 139 8 27-1 49-18 74-25 13-4 27-4 41-3 23 2 47 2 71 0 9-1 17-4 25-7 18-8 37-12 54-18 13-5 25-8 38-11 9-2 15-11 22-16 20-15 41-30 65-36 11-3 20-12 30-15 8-2 16-4 23-9 13-9 27-17 43-21 8-3 16 2 24 3 5 0 10-1 14-3l-4-9 13 3c1 3-1 9 3 10 5 3 11 3 17 4v-5c-5 0-9-2-14-3 10-12 13-28 24-39 9-4 23 1 29-9 4-10 3-24 12-32 5-6 15-8 16-16l5-18c-1-6-6-9-9-14 1-6 5-12 5-18l-1-15c8 2 14 5 21 9 9 4 19 0 27-6-6-7-14-11-21-16l7-11c5 4 10 9 17 12 6 2 12 2 18 0 2-3 4-7 1-9-3-4-8-3-13-4l-2-9c-4 2-7 7-11 8-5 1-7-6-11-8l-6 2-1-8-11-10c-2-4-2-9-2-13 17 1 29 19 48 18-1-5-3-10-7-14-5-6-14-7-20-12-3-6-1-13-3-19-4-5-10-1-15 0 0-8-5-15-9-21h11l14-7c6 0 9 5 13 8 9 9 24 11 36 9l-4-7c-9-1-18-2-26-5l6-18-11-6c-4-5-6-12-3-18 10 4 18 11 28 15 8 3 17 2 24-3 2-5-4-7-6-10l4-9-19-3 5-6-2-12c-5 1-10 4-14 8l-6-3c-8-9-13-21-21-30 7-10 0-24 8-34 5 3 9 7 12 12h14c6 4 8 11 13 16l10 1c2-5 0-14 8-15 12-1 25-7 30-19-7-2-14-5-20-9l-11 2c-11-10-25-17-34-29 4-1 8-2 12 0 9 4 17 9 27 10l-11-13v-10c-11-6-21-16-27-27l2-8c6 2 13 5 17 10 6 8 17 8 24 15 5-5 10-12 6-19-6-8-11-17-19-23l-1-4 12-5-8-8-1-8c7 2 15 6 23 7h30c1-13-14-21-25-18l-7-9 6-6c10 2 20 4 30 3 0-11-2-22-1-32 5 6 4 15 7 23 5 5 12 6 18 8l2-23 8 7c2 9 3 18 1 27 4 6 6 12 5 18l-13 12v7l21-14 20-8c-3 8-6 16-12 22-3 4-2 10-3 15h-15c-2 7-5 13-9 20 5 1 11 0 17-2 1 4-1 11 5 12l22-5c0 3 2 6 1 10-3 9-13 14-16 23-3 8-11 12-14 20 5 0 9 1 14-1 8-3 15-11 25-8-5 3-10 5-12 10 0 5 5 6 9 7l4-9c6-2 11-6 15-11 4-1 10-2 13-5 7-4 15-7 24-7-10 8-15 19-18 31-11 0-18 11-27 16l5 9c-9 1-21 1-24 11 0 7 5 11 10 14-3 6-6 12-5 18l-14 1 4 10c-7-3-13-10-19-14-6-2-7 6-9 9l-20-13c-3-2-6-5-9-4l-3 20c-1 4 3 7 6 11l-7 8c1 4 4 5 8 6 7 4 14-3 20-6l-13-11c11 1 23 2 35 5 6 2 14 1 20-1 3-3 4-7 8-9l17-11c6-3 13-2 20-2l-8-9 2-5c13 7 28 6 43 5-1-8-8-14-16-15-5 0-9-4-12-7 3-1 5-5 9-4l22 2c-1-9-3-18 0-27 2 6 2 13 5 19 3 4 9 5 14 7l2-20 7 7 2 22c0 5 3 10 2 15-4 5-13 8-10 16 10-9 22-14 35-19-5 11-13 20-15 32l-10-1-9 16h13c2 3 1 8 5 8l18-2c4 2 2 8-1 11-5 6-11 12-13 20-4 3-12 8-6 12 10 0 18-8 28-10v3c-4 3-8 5-11 9l11 4v20l-8 8c-1 6 4 10 8 13v1c-3 4-5 9-5 13l-11 1 3 9c-6-5-12-10-18-13l-4 9c-8-6-16-12-25-16 0 9-4 20 3 27l-7 7 12 6 13-7-12-8c10 0 20 2 30 4 5 1 10 1 14-1 4 0 5-5 7-8v20l-10 6 1 5 9 3v29l-14-9 2 12-8 1c0 4-2 9 0 12 6 5 13 6 20 10v9l-10-3c-2 4-7 8-4 12l14 10v5l-14 3 5 10h-12v5l13 1-6 15c-6-3-10-7-14-11l-17 3c6 9 18 12 27 18l8-6 10 5v210H0V502l32 11c16-3 34-9 50-3 18 9 39 8 58 7 15 0 29 7 43 11l-2-58-7-1 8-4c-17-8-36-7-54-6l3 7-17 3c-5 1-11-3-16-4-6 3-10 8-15 11-6 2-13-1-20-1v-6l-12 5c-7-4-16-6-25-5 0-7 2-13 4-19l-8-8 2-6c7 2 14 5 20 10a482 482 0 0110-6c-5-3-9-7-13-12l13 5 13-4c-7-2-16 0-21-5-8-6-5-17-5-25-4 0-9 0-13-2l-8-11 4-4 8 1-14-6c1-4 2-8 5-12l14-1 13-7 6 5-5-15-11-2c3-4 4-11 10-12 5-1 10 2 14 3h15l-25 13 11 13 10-5-1-2 7-5-1-11 18 8 8-8-3-5-4 4c-23-4-44-16-67-14l9-9-16-2c-7 0-10-8-16-11l-9-1v-8l4-7 10 7 11-15c8 11 23 10 35 8v-12l-10-3-8 10c-1-8-5-17-2-25l-6-8 15-7 4 5c1-5 4-9 7-12 5 6 12 8 19 10-5-10-9-22-7-33l14-11 2 8 17 3c4-4 8-8 13-9-2-3-6-5-7-9-3-6 0-12 1-17-3 2-6 6-10 7-6 1-7-6-9-10h15l-13-18h7l5-9c6 2 12 5 17 9l8-5 8 6 10-13h-19l3-6-14-2-2-17c1-4 4-6 6-9l-1 17 11-27 17 7c0-5-2-10-4-15l8 2c2-7 5-14 11-19 1-5 4-11 8-15 4 2 4 6 5 9 5-4 9-8 11-13zm3 10c-3 1 0 6 2 4 3-2 0-6-2-4zm-19 8c-2 2 2 6 4 4s-1-6-4-4zm32 30h7l1-6-8 6zm-15 1v13l5-13h-5zm5 4c-3 6 7 1 0 0zm-42 14c-3 1-2 7 1 6 4-1 3-7-1-6zm-3 17l1 4 6-13c-5 1-9 4-7 9zm13-2c-1 3 0 4 4 3 1-3-1-4-4-3zm-15 9l4 13c3-5 2-12-4-13zm-26 16c-1 4-2 8-5 12l10-6v-6h-5zm94 29c5 2 10 2 14 0l-6-11-8 11zm-74 0c-3 0-7-1-8 3h12l2-9-6 6zm-27 1c-1 3 3 6 5 4 2-3-3-6-5-4zm45 25c6 1 12 0 18-1l-3-6c-5 1-10 4-15 7zm-80-3v8c2-2 5-4 6-8-1-2-4 0-6 0zm75-1c-3 2 1 7 4 4 3-1-1-7-4-4zm-41 15l-1 6 5-4 7 8 5-1 1-9h-17zm118-1l-1 4h6v-5l-5 1zm-95 5c-1 3 0 4 3 3 1-3 0-4-3-3zm24 3l8 3-2-5-6 2zm64 5c1 7 6-3 0 0zm-165 4l5 8 3-10-8 2zm77 8c-3 1-1 6 2 5s2-7-2-5zm-51 22l11-4 1-4c-4 2-9 4-12 8zm17-5l-10 15c2 0 4 2 5 3l4-10c10-1 20-5 31-6l-10 13 10-4c-2 7-2 13 0 20 10 2 21 0 30 5l3-5-2-5 14-2c-6-8-17-10-25-5l4-5c-10-4-19-10-28-15-2-1-5 1-7 2l-3-4c-5 3-10 4-16 3zm86 12l5 8c4-4 11-5 11-11l-16 3zm34 0c-3 6 7 0 0 0zm-117 11c5 0 10-2 13-7-5 1-13 0-13 7zm83 0l-1 8c8-2 18-1 25 4 0-3 3-9-2-10-7-2-15-5-22-2zm-88 4c2 5 3 9 6 13h12l-4 7 5 6-7 8c5-3 10-4 13-9 0-6-2-12-4-18-7 1-14-3-21-7zm136 16c-1 3 0 5 4 3 1-3 0-4-4-3zm3500 8c-1 5 4 9 6 13l4-12c-4-1-7-3-10-1zM194 340c4 3 6-2 8-5l6 3-6-5c-4 1-11 2-8 7zm-139 0c0 3 5 4 6 2 1-3-4-4-6-2zm135 2c-1 3 0 4 3 3 1-3 0-4-3-3zm-44 9l15-1-4-5c-4 1-7 4-11 6zm3656-3c-1 4 0 5 4 4 1-4 0-5-4-4zM150 366c-3 2-7 5-5 9 4 3 9 2 13 1 7-1 13 2 20 2 1-4 2-8 0-11-3-4-8-5-12-7-4 4-10 4-16 6zm-8-2c-1 3 1 4 4 3 1-3 0-4-4-3zm-116 7c-2 3 3 6 5 4 2-3-2-6-5-4zm106 2l1 5c4-1 7-4 11-6l-12 1zm27 7c0 7 6-3 0 0zm3573 1c-2 3 3 6 5 3s-3-6-5-3zm-3507 1c-1 3 0 4 3 3 1-3 0-4-3-3zm3515 6c-2 3 3 5 5 3s-3-5-5-3zM45 392c3 3 2 7 1 11l12 3v-11l-8 2-1-4-4-1zm91 6l7-1v-5l-7 6zm12-5l-2 5c5-1 10-2 15-5h-13zm25-1c-4 1-3 8 1 6 3-1 3-7-1-6zm41 0l3 7 6 1 1-6-10-2zm23 2c0 7 6-3 0 0zm-75 6c-3 6 7 1 0 0zm-50 3c-3 2 2 6 4 3 3-2-1-7-4-3zm17 0c-1 4 8 2 10 0-2-3-7-2-10 0zm77 13c4 5 9 8 15 7-1-7-10-6-15-7zm16 1c-2 2 1 6 4 4 2-2-1-5-4-4zm15 7c-3 4 3 6 5 3s-3-6-5-3zm-132 12c6 0 12 1 17 3l-1-11-16 8zm-36-6c-3 3 2 8 4 5 3-3-1-8-4-5zm60 3c1 4 2 8 1 11l-12 11 28-1 35 4 1-18c-6-1-12-3-15-7h-12l-9 7-1-5c-5 1-10 0-16-2zm20 0c1 1 1 1 0 0zm3635 13c3 9 14 7 22 6 6-2 10-8 9-14-8 0-16 0-24-3-6-2-11 6-7 11zm-32-6l1 6c2-1 6 0 7-4l-8-2zm-86 7c-3 6 7 0 0 0zm36 25c-4 1-2 7 1 6 4-1 3-7-1-6zm15 13l-4 13c2 4 6 6 10 5 7-2 15-3 21-7 0-3-1-5-3-7-5-8-16-2-24-4zm161 20l10 1 5 7c3-4 10-8 8-14-1-6-8-9-11-14-5 5-15 11-12 20zm25-16l6 12 3-11-9-1zm-155 13c-4 3-7 8-12 10-9 1-17 0-26 2v5l23 4c6-2 9-9 15-10 6-2 12-3 19-3l-2-11c-6 1-13-2-17 3zm96 12c-4 3-2 8 3 9 6 0 12-3 18-2l15 6 2-6c-7-3-12-12-20-13-6 1-13 2-18 6zm114-1c-3 6 7 0 0 0zm-130 11c3 2 7 1 11 1l1-5c-4-2-13-3-12 4zm-105 17c1 4 5 4 9 5 2-5 3-11-2-16-3 3-8 6-7 11zm83 0c6 3 11 5 16 9l4-7-14-12c-4 1-6 6-5 10zm80-6c0 3 1 4 3 3 1-3 0-4-3-3zm-97 2c-4 1-7 3-10 6-2 4 0 9 4 10 6 2 12 3 18 2 5-2 6-8 2-12-3-4-8-11-14-6zm111 3c1 7 6-3 0 0zm7 4c-5 1-2 7 1 6 5-1 2-7-1-6zm-50 7v9l-20-10c0 4 1 9 3 13l-9 2c-1 5-4 10-2 16l8 2c-1-6-1-13 3-18 4 3 8 6 10 10 4 0 8-2 12 0 4 4 6 9 10 12h9l2-8c4-4 9-3 14-5 6-2 12-7 14-14-5-1-11-3-16-7l-9 2-12-10c-6 1-11 4-17 6zm-99-3c-2 1-1 6 2 4 3-1 1-6-2-4zm59 11c-7 4 3 14 9 9 3-6-4-12-9-9zm-152 11c0 3 1 6 5 7s10 3 13-1c-2-6-3-13-8-17l-10 11zm128-10c-4 1-2 7 1 6 5-1 3-7-1-6zm-137 2v6l5-2 1-4h-6zm41 1l-1 13c-1 3 1 6 4 5 6 1 14 0 14-8l-13-2 1-9-5 1zm78 0c1 4-1 10 4 12l17 4c3-1 2-4 1-6-5-7-13-10-22-10zm-3 21c0 7 3 13 6 19 2 5 8 4 13 4-1-7 3-16-4-20-4-3-11-8-15-3zm173 1l-5 5 6 9c9 1 23 0 23-11l-24-3zm-28 3l-1 6 7-1-6-5zm-7 7c-3 6 7 0 0 0zm-224 16h8l-1-8c-3 2-5 4-7 8zm152-6c-3 2 2 7 5 5 2-3-2-8-5-5zm19 15l-7-1c3 9 13 6 20 6l-3-11c-4 0-8 2-10 6zm17-4c-3 6 7 1 0 0zm13 11l-4 11c9 7 19 0 27-3-2-3-3-9-9-10l-14 2zm-182 6l8 1-1-6c-4-1-5 3-7 5zm33-3l4 18 5-3 1-16-10 1zm112 2l9 4-7 7c4 3 9 6 14 7 5 2 11-1 16-2v-7l-6-1 5-10c-10 4-21 2-31 2zm-37 0c-2 3 2 7 5 4 2-3-3-7-5-4zm90 17c-8 1-17-2-23 3 4 5 11 3 17 5 6 1 9-5 14-7l17-4-2-9h-7c-7 1-10 9-16 12zm-173-2c-3 3 2 7 5 4s-2-7-5-4zm-7 7v9c5 1 6-4 7-8l-7-1zm258 1c-3 4 6 6 6 1 0-2-4-4-6-1zm-179 5l-2 5 15-1-13-4zm90 13c2 3 5 2 8 3 1-4 2-9-2-12-5 0-6 6-6 9zm72-10l-3 9 12 7 5-5-14-11zm-15 4l-12 7c0 10 13 11 21 10 6-6-3-17-9-17zm-206 2c-3 1-1 4-1 6l7-5-6-1zm105 4l1 4 21 2c-5-6-15-3-22-6zm-117 7c0 7 5-3 0 0zm238 6l-1 8h10c0-5-4-8-9-8zm-19 2l-2 3c2 6 9-3 2-3zm-15 3c1 3-1 9 3 9l17 4c-2-9-12-14-20-13zm-293 14l-2 7c2 3 6 6 10 7 6-1 5-6 6-10-5-2-10-4-14-4zm289 3l6 15c2 4 7 5 11 3 1-5 2-13-4-16-3-4-8-5-13-2zm-151 1v4h19c-3-8-13-3-19-4zm-162 23c6 3 12 1 17-2-2 3-4 6-4 10 6-2 11-6 11-13l-14-10c-5 4-7 10-10 15zm26 14c-4 2-2 6-2 10l8-2c2-4 1-8 1-12l-7 4zm260 1l4 14c5-4 6-11 3-17l-7 3zm63 1c0 7 5-3 0 0zm9 4c1 7 6-3 0 0zm-379 4l2 9c6 1 12 0 17-3-5-5-12-5-19-6zm73 3c-2 4 1 6 5 7v-5l-5-2zm43-1c0 7 5-3 0 0zm186 2c0 7 6-3 0 0zm-6 6c-3 3 2 7 4 4s-2-7-4-4zm-296 4c-3 8-1 17 0 25 3 2 7 0 11 0 1-3 2-6 4-7l21 1 5-9c-6-3-14-3-21-2-8 1-14-5-20-8zm311 8c-1 3 0 4 3 3 1-3 0-4-3-3zm-348 7l6 9c4-2 11-2 9-7-2-7-10-3-15-2zm8 16l-9 1c4 2 8 4 12 2l19-8-4-5c-8-1-12 6-18 10zm-4 16h7c0-3 0-6-2-8-5-1-4 5-5 8zm374-5c4 5 12 2 17 2-4-5-11-4-17-2zm-407 21l9-1c1-3 0-6-2-8l-7 9zm-26-27c2-2 4-1 4 2-2 2-4 1-4-2z" style="fill: var(--c10);"/>
</svg>
</div>
</div>
</div>
<!-- for demo -->
<main class="wrap">
<h1>Demo of Firewatch-style SVG parallax landscape</h1>
<p>You can find out more info about this at <a href="https://alistairshepherd.uk/writing/parallax-svg-landscape-1/">alistairshepherd.uk/writing/parallax-landscape-1/</a>.
</main>
// wrapping landscape
.landscape {
background: var(--c1);
height: 75vh;
overflow: hidden;
position: relative;
// positioning for each layer and parallax
&__layer {
// positioning
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
// parallax
transform: translateY(calc(var(--scrollPos, 0) * var(--offset, 0)));
@media (prefers-reduced-motion: reduce) {
transform: translateY(0);
}
}
// svg wrapper
&__image {
bottom: 0;
display: flex;
flex-direction: column;
left: 50%;
max-height: 100%;
max-width: 300%;
min-width: 100%;
position: absolute;
transform: translateX(-50%);
width: 2500px;
svg {
display: block;
height: auto;
max-width: 100%;
}
}
}
/**
* Styles for demo
*/
// colours - keep an eye on my blog (https://alistairshepherd.uk/writing/) for animating these!
html {
--c0: #feebe2;
--c1: #ffe2a6;
--c2: #ffb06d;
--c3: #ff9d60;
--c4: #ff8f4c;
--c5: #fc813a;
--c6: #f04f30;
--c7: #d2353a;
--c8: #8b1036;
--c9: #620a38;
--c10: #2f1121;
}
// typography styles and ensure body is long enough to scroll
body {
background: var(--c10);
color: #fff;
min-height: 200vh;
}
// content section
.wrap {
margin: 5rem auto;
max-width: 70rem;
padding-left: 1rem;
padding-right: 1rem;
position: relative;
}
a {
color: inherit;
text-decoration-color: var(--c6);
}
// constant elements: your main scrolling element; html element
const scrollEl = document.documentElement
const root = document.documentElement
let scrollPos
// update css property on scroll
function animation() {
// check the scroll position has changed
if (scrollPos !== scrollEl.scrollTop) {
// reset the seen scroll position
scrollPos = scrollEl.scrollTop
// update css property --scrollPos with scroll position in pixels
root.style.setProperty('--scrollPos', scrollPos + 'px')
}
// call animation again on next animation frame
window.requestAnimationFrame(animation)
}
// start animation on next animation frame
window.requestAnimationFrame(animation)
Firewatch-style SVG parallax landscape - complete
Demo of Firewatch-style SVG parallax landscape
You can find out more info about this at alistairshepherd.uk/writing/parallax-landscape-1/.
This Pen is owned by Alistair Shepherd on CodePen.
See more by @accudio on CodePen
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.
For those still with me, let's go through it.
Note: I'm writing JavaScript in ES6 and CSS in SCSS. I compile my code anyway so this makes it easier for me to work with.
Inspiration
If you recognise the art-style, it's super inspired by the game Firewatch. Firewatch is a 'walking simulator' game that came out in 2016 and people loved its art style. Featuring a bright, layered landscape it inspired many, myself included. For several years the wallpaper of my phone changed between these wallpapers based on time and weather.
When I was planning my new site, I decided to centre it on this art style. I wanted it to feel interactive, and parallax felt like a natural way to do that.
The Markup
My wonderful sister Becci Shepherd produced the landscape, and sent me a raster PNG for each layer. Although I experimented with masking, it's browser support isn't quite there. SVGs were the obvious choice.
To convert to vector I used Vector Magic Desktop Edition. It does a brilliant job of anything you throw at it, and is the best raster-to-vector converter I've found.
I tidied up the paths in a graphics program; exported it to SVG; tidied up the markup and optimised with SVGOMG. This left me with a decent sized SVG for each layer.
Try ensure the viewbox is identical as it will make sizing much easier.
Now in HTML, we need to stack them:
<div class="landscape" role="img" aria-label="This is equivalent to an img alt attribute.">
<div class="landscape__layer">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">...</svg>
</div>
</div>
<div class="landscape__layer">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">...</svg>
</div>
</div>
<div class="landscape__layer">
<div class="landscape__image">
<svg viewBox="0 0 4000 1000" xmlns="http://www.w3.org/2000/svg">...</svg>
</div>
</div>
... and so on.
</div>
Remember accessibility! Despite being a whole bunch of markup, this is really a fancy image. We userole="img" andaria-label to make it accessible.
I didn't have the two wrapping divs at first, but realised that wrappers for each layer allowed me to use flexbox. This made positioning the SVGs easier:
// wrapping landscape
.landscape {
background: var(--c1);
height: 75vh;
overflow: hidden;
position: relative;
// make each layer fill parent
.landscape__layer {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
// svg wrapper
.landscape__image {
// position at bottom of element in center
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
// set sizes that work for my image
max-height: 100%;
max-width: 300%;
min-width: 100%;
width: 2500px;
// use flexbox to center SVG elements
display: flex;
flex-direction: column;
}
// basic styling for SVG element
.landscape__image svg {
display: block;
height: auto;
max-width: 100%;
}
We now have a static landscape and are set up to make it more dynamic!
CodePen Embed - Firewatch-style SVG parallax landscape - static
// wrapping landscape
.landscape {
background: var(--c1);
height: 75vh;
overflow: hidden;
position: relative;
// make each layer fill parent
&__layer {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
// svg wrapper
&__image {
// position at bottom of element in center
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
// set sizes that work for my image
max-height: 100%;
max-width: 300%;
min-width: 100%;
width: 2500px;
// use flexbox to center SVG elements
display: flex;
flex-direction: column;
// basic styling for SVG element
svg {
display: block;
height: auto;
max-width: 100%;
}
}
}
/**
* Styles for demo
*/
// typography styles and ensure body is long enough to scroll
body {
background: var(--c10);
color: #fff;
min-height: 200vh;
}
// content section
.wrap {
margin: 5rem auto;
max-width: 70rem;
padding-left: 1rem;
padding-right: 1rem;
position: relative;
}
a {
color: inherit;
text-decoration-color: var(--c6);
}
Firewatch-style SVG parallax landscape - static
Demo of Firewatch-style SVG parallax landscape
You can find out more info about this at alistairshepherd.uk/writing/parallax-landscape-1/.
This Pen is owned by Alistair Shepherd on CodePen.
See more by @accudio on CodePen
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.
Parallax Animation
Perspective and translateZ
There are two popular methods to implement parallax on the web. The more performant implementation is a CSS-only solution using the perspective CSS property with translateZ(). This is what browser vendors suggest, as it allows the browser to render changes with the GPU. This makes it super quick and smooth and is how I tried to implement it for weeks.
Google Developer docs have a good example of this method.
Although it's great for simple implementations—I found that in my case it was unreliable. This was because:
- Browser implementations vary. Chrome handles a deep 3D perspective easily, but Firefox interprets the spec differently. This meant I had to apply
transform-style: preserve-3don every element between my scroll element and my layers. - Firefox on Android handles 3D transformations inconsistently with deep DOM trees, making it hard to adapt to my structure.
- Mobile Safari on iOS has quirks, and the current solution is to use a trick which 'reverses' the parallax direction. Not an option in my case as that would break the effect!
I spent about two weeks trying to get this working before giving up and going for method two.
JavaScript parallax
JS-based parallax has had a bad rep, as a few popular libraries weren't very performant or accessible. Their size was to deal with browser inconsistencies, but with modern CSS and JS we can do it ourselves without much work.
With CSS custom properties and calc() we can come up with a light and neat implementation ourselves. In JavaScript we use window.requestAnimationFrame and if the scroll position has changed we set it to a custom property.
// constant elements: your main scrolling element; html element
const scrollEl = document.documentElement
const root = document.documentElement
let scrollPos
// call animation again on next animation frame
window.requestAnimationFrame(animation)
}
// start animation on next animation frame
window.requestAnimationFrame(animation)
That's it. That's all the JavaScript we need. As someone who loves CSS it feels great knowing that we can keep the JS simple and use CSS to implement this descriptively.
The real action is happening in the CSS, this is what we need to add to our previous styles:
.landscape__layer {
// parallax
transform: translateY(calc(var(--scrollPos, 0) * var(--offset, 0)));
@media (prefers-reduced-motion: reduce) {
transform: translateY(0);
}
}
The key line is the first transform and it's custom properties. What we are doing is translating the layer down a certain amount based on the scroll position.
We use a prefers-reduced-motion media query to remove the parallax effect for those who might get motion-sick or prefer less movement in their browsing.
The --offset property is a value that would be between 0 and 1, and changes how much that layer scrolls. Let's look at what happens when we vary that property and scroll down by 100px:
--offset: 0— the element isn't translated and scrolls as normal;--offset: 0.5— the element will be translated down by50px. This makes it look like it's moved50px;--offset: 1— the element is translated down100px, it's in the same place it used to be. This makes it look like it's not moving with scroll;
The --offset property is the key to our parallax system. If each layer has a different value it will scroll at a different speed from the other layers. We can manually set how much each layer will scroll so it looks natural.
The way we apply this to our layers is using the style property. This way we can avoid adding any more CSS, no matter how many layers we have. We set the front layer to 0 so it scrolls with the content, and increase it with each layer. This is what worked for my image:
<div class="landscape" role="img" aria-label="This is equivalent to an img alt attribute.">
<div class="landscape__layer" style="--offset:0.96">...</div>
<div class="landscape__layer" style="--offset:0.92">...</div>
<div class="landscape__layer" style="--offset:0.9">...</div>
<div class="landscape__layer" style="--offset:0.86">...</div>
<div class="landscape__layer" style="--offset:0.83">...</div>
<div class="landscape__layer" style="--offset:0.8">...</div>
<div class="landscape__layer" style="--offset:0.75">...</div>
<div class="landscape__layer" style="--offset:0.4">...</div>
<div class="landscape__layer" style="--offset:0.2">...</div>
<div class="landscape__layer" style="--offset:0">...</div>
</div>
Notice the big gap between 0.4 and 0.75. If you look at the landscape structure, the loch is a lot further away than the trees. We produce the same effect by making the offset a lot further away from 0.
Result
And here we have our final parallax landscape!
CodePen Embed - Firewatch-style SVG parallax landscape - complete
// wrapping landscape
.landscape {
background: var(--c1);
height: 75vh;
overflow: hidden;
position: relative;
// positioning for each layer and parallax
&__layer {
// positioning
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
// parallax
transform: translateY(calc(var(--scrollPos, 0) * var(--offset, 0)));
@media (prefers-reduced-motion: reduce) {
transform: translateY(0);
}
}
svg {
display: block;
height: auto;
max-width: 100%;
}
}
}
/**
* Styles for demo
*/
// typography styles and ensure body is long enough to scroll
body {
background: var(--c10);
color: #fff;
min-height: 200vh;
}
// content section
.wrap {
margin: 5rem auto;
max-width: 70rem;
padding-left: 1rem;
padding-right: 1rem;
position: relative;
}
a {
color: inherit;
text-decoration-color: var(--c6);
}
// constant elements: your main scrolling element; html element
const scrollEl = document.documentElement
const root = document.documentElement
let scrollPos
// call animation again on next animation frame
window.requestAnimationFrame(animation)
}
// start animation on next animation frame
window.requestAnimationFrame(animation)
Firewatch-style SVG parallax landscape - complete
Demo of Firewatch-style SVG parallax landscape
You can find out more info about this at alistairshepherd.uk/writing/parallax-landscape-1/.
This Pen is owned by Alistair Shepherd on CodePen.
See more by @accudio on CodePen
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.
Thank you for reading! Next up we're going to take this landscape and add colour schemes—including one that matches the visitors local time!
Thoughts or comments?
If you have any comments or feedback on this article, let me know! I'd love to hear your thoughts, go ahead and send me an email at alistair@accudio.com or contact me on Mastodon.
Get in touch!
I'm always up for a chat, whether it be about my work, new opportunities, or just a natter! Feel free to send me an email at alistair@accudio.com or find me on social media.