- Live
- Cycle
- Sunrise
- Day
- Sunset
- Night
- Light
17th February 2021
SVG Landscape with live colour theming - new site part 2
As promised, now we're going to dig into the colour-changing effects of my new website. If you haven't seen it, check out my previous post about the SVG parallax effect in the landscape.
If you haven't tried it yet, visit my website and click the "paint bucket" icon in the top-right of my website to see the theme picker. Here you can change the colour scheme of the website.
There are four 'static' colour schemes of 'Sunrise', 'Day', 'Sunset' and 'Night'. These set the colours to a specific palette.
I implemented two special 'dynamic' colour schemes, the default of 'Live' and 'Cycle'. Live sets the colour scheme of the website to roughly match your local time, whilst Cycle is a 60 second loop animating through the four static schemes above.
The main point of this post is the colour changing functionality, but I'll briefly mention the 'Sun' animation too.
If you want straight at the code, enjoy! 👋
CodePen Embed - Firewatch-style SVG parallax landscape with dynamic live colour themes
<!-- 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.">
<!-- sun -->
<div class="landscape__sunWrap">
<div class="landscape__sun"></div>
</div>
<!-- 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 with colour changing</h1>
<h2>Themes</h2>
<button data-active aria-pressed data-theme="live">Live</button>
<button data-theme="cycle">Cycle</button>
<button data-theme="sunrise">Sunrise</button>
<button data-theme="day">Day</button>
<button data-theme="sunset">Sunset</button>
<button data-theme="night">Night</button>
<p>You can find out more info about this at <a href="https://alistairshepherd.uk/writing/parallax-svg-landscape-2/">alistairshepherd.uk/writing/parallax-landscape-1/</a>.</p>
</main>
/**
* initial colours
*/
html {
--c0: #fff;
--c1: #eee;
--c2: #d2d2d2;
--c3: #c5c5c5;
--c4: #a2a2a2;
--c5: #b1b1b1;
--c6: #838383;
--c7: #737373;
--c8: #393939;
--c9: #1f1f1f;
--c10: #000;
}
/**
* sun
*/
$sun-size: min(4rem, 10vw);
$sun-movement-v: 30%;
$sun-movement-h: 40%;
.landscape {
&__sunWrap {
$distance: 10;
bottom: 10%;
height: 75%;
left: 0;
position: absolute;
transform: translateY(var(--scrollPos, 0));
width: 100%;
@media (prefers-reduced-motion: reduce) {
display: none;
}
}
&__sun {
height: 100%;
left: 0;
position: absolute;
top: 0;
transform:
translateX(calc(#{$sun-movement-h} * var(--sun-h)))
translateY(calc(#{$sun-movement-v} * var(--sun-v)));
width: 100%;
// the actual sun element
&::before {
background: #fff;
border-radius: 50%;
content: '';
height: $sun-size;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: $sun-size;
}
}
}
/**
* wrapping landscape, see https://alistairshepherd.uk/writing/parallax-svg-landscape-1/
* for an explanation of this
*/
// 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
*/
// 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);
}
button {
font-weight: 900;
background: var(--c4);
border: 2px solid transparent;
color: var(--c10);
cursor: pointer;
display: inline-block;
padding: .5rem 2rem;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: all .2s;
&[data-active] {
background: var(--c1);
}
}
/**
* colour changing
*/
// Configuration of colours and animation states
const config = {
anims: {
live: {
interval: 60000,
getProgress: now => {
const time = (now.getHours() * 3600) + (now.getMinutes() * 60) + now.getSeconds()
return time / 86400
}
},
cycle: {
interval: 50,
getProgress: now => {
const time = (now.getSeconds() * 1000) + now.getMilliseconds()
return time / 60000
}
}
},
states: [\
{\
at: 0,\
name: 'night',\
colours: {\
c0: '#bed8f8',\
c1: '#7da5d5',\
c2: '#3078bf',\
c3: '#1860a5',\
c4: '#155798',\
c5: '#0c4e8f',\
c6: '#073866',\
c7: '#042b50',\
c8: '#02213f',\
c9: '#021a32',\
c10: '#00101f'\
}\
},\
{\
at: 6,\
name: 'sunrise',\
colours: {\
c0: '#f5e5e5',\
c1: '#fed4d5',\
c2: '#dcbed9',\
c3: '#c8aed9',\
c4: '#b19fcc',\
c5: '#a496c4',\
c6: '#7d88bd',\
c7: '#6371a9',\
c8: '#555986',\
c9: '#404364',\
c10: '#2e2c3f'\
}\
},\
{\
at: 12,\
name: 'day',\
colours: {\
c0: '#feebe2',\
c1: '#ffe2a6',\
c2: '#ffb06d',\
c3: '#ff9d60',\
c4: '#ff8f4c',\
c5: '#fc813a',\
c6: '#f04f30',\
c7: '#d2353a',\
c8: '#8b1036',\
c9: '#620a38',\
c10: '#2f1121'\
}\
},\
{\
at: 18,\
name: 'sunset',\
colours: {\
c0: '#ffc348',\
c1: '#ffad39',\
c2: '#f29a14',\
c3: '#ed8d14',\
c4: '#c86f11',\
c5: '#e17b17',\
c6: '#c0531a',\
c7: '#b04717',\
c8: '#70211a',\
c9: '#3c0b0e',\
c10: '#1e0000'\
}\
}\
]
}
const root = document.documentElement
// This changes the interval and progress calculation between
// our dynamic animations 'live' and 'cycle'.
let animMode = 'live'
// Add first element of states to end so we have a seamless loop:
// night > sunrise > day > sunset > night
config.states.push({
...config.states[0],
name: 'end',
at: 24
})
// Declaring our animation loop in a variable allows us to end it when needed.
let animation
function startAnim() {
// Run our update loop immediately after starting.
updateAnim()
// setInterval runs our update loop with a predetermined interval
// based on the animation mode we are using.
animation = setInterval(updateAnim, config.anims[animMode].interval)
}
// If we need to end the animation, this function will stop it
// running again using clearInterval
function endAnim() {
clearInterval(animation)
}
// This runs every update cycle, getting the progress, calculating
// the right colours and applying them to the root element
function updateAnim() {
// Get the progress through the animation. getProgress returns a number between 0 and 1.
// To simplify working with time, we multiply this by 24 to get progress through the day.
const progress = getProgress() * 24
// Find the next 'state' we are transitioning to based on the 'at' property.
// The 'at' property sets at what hour that state should be at.
const nextIndex = config.states.findIndex(frame => {
return frame.at !== 0 && progress < frame.at
})
// The previous 'state' is the one before the next one, so we remove 1.
const lastIndex = nextIndex - 1
// Get the onjects for the last and next states
const lastState = config.states[lastIndex]
const nextState = config.states[nextIndex]
// Calculate the difference between the 'at' values of the previous and last states,
// so we can get our progress between them based on the progress we got above.
const diff = nextState.at - lastState.at
const progressCurr = (progress - lastState.at) / diff
// Loop through all the colours. 'key' is the cutsom property name
Object.keys(lastState.colours).forEach(key => {
// We use hex codes for colours for convenience, but it's a lot easier to transition
// seperate Red, Green, Blue values so we convert them to a [R, G, B] array
const lastRGB = hexToRgb(lastState.colours[key])
const nextRGB = hexToRgb(nextState.colours[key])
// Get the new RGB by using 'lerping' to find the value between the last and next
// colours based on how far we are through the current animation.
// The lerp function doesn't necessarily return an int so we round it.
const currRGB = [\
Math.round(lerp(lastRGB[0], nextRGB[0], progressCurr)),\
Math.round(lerp(lastRGB[1], nextRGB[1], progressCurr)),\
Math.round(lerp(lastRGB[2], nextRGB[2], progressCurr))\
]
// Apply the custom property to root using the name and our new RGB value.
applyColour(key, currRGB)
})
sunPos(progress)
}
// As we have two different animation 'modes', we change the function used to work
// out the progress depending on that mode. See the config above for how they work.
function getProgress() {
const d = new Date()
const progress = config.anims[animMode].getProgress(d)
return progress
}
// A slightly bewildering regular expression that turns a hex code into [R, G. B] array.
// Well-tested though so I don't need to touch it!
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
return result ? [\
parseInt(result[1], 16),\
parseInt(result[2], 16),\
parseInt(result[3], 16)\
] : null
}
// Using 'linear interpolation' gets the value between the start and end values based on progress
function lerp(start, end, progress) {
return (1 - progress) * start + progress * end
}
// Uses name of custom property 'key' and [R, G, B] array and applies to root element
function applyColour(key, colour) {
const colourString = 'rgb(' + colour.join(',') + ')'
root.style.setProperty('--' + key, colourString)
}
// Round number to 'places' number of figures after decimal.
function round(num, places) {
const power = Math.pow(10, places)
return Math.round(num * power) / power
}
// Initialise and start animation.
function init() {
startAnim()
}
init()
/**
* theme picker
*/
const themes = document.querySelectorAll('[data-theme]')
if (themes) {
themes.forEach(function(theme) {
theme.addEventListener('click', function(e) {
// remove active state from old theme buttons
themes.forEach(theme => {
theme.removeAttribute('data-active')
theme.removeAttribute('aria-pressed')
})
// add active state to clicked button
this.setAttribute('data-active', '')
this.setAttribute('aria-pressed', '')
// get slug for current theme
const themeSlug = this.getAttribute('data-theme')
// end animation
endAnim()
// if dynamic theme, set animMode, start animation and return
if (themeSlug === 'live' || themeSlug === 'cycle') {
animMode = themeSlug
startAnim()
return
}
// find theme state and apply the colours
const state = config.states.find(item => item.name === themeSlug)
Object.keys(state.colours).forEach(key => {
applyColour(key, hexToRgb(state.colours[key]))
})
sunPos(state.at)
})
})
}
/**
* sun
*/
function sunPos(progress) {
const sunWrap = document.querySelector('.landscape__sunWrap')
if (sunWrap) {
const sunH = -Math.sin(2 * Math.PI * progress / 24)
const sunV = -Math.sin(2 * Math.PI * (progress - 6) / 24)
sunWrap.style.setProperty('--sun-h', round(sunH, 3))
sunWrap.style.setProperty('--sun-v', round(sunV, 3))
}
}
/**
* parallax
*/
// constant elements: your main scrolling element; html element
const scrollEl = document.documentElement
let scrollPos
// update css property on scroll
function parallax() {
// 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(parallax)
}
// start animation on next animation frame
window.requestAnimationFrame(parallax)
Firewatch-style SVG parallax landscape with dynamic live colour themes
Demo of Firewatch-style SVG parallax landscape with colour changing
Themes
LiveCycleSunriseDaySunsetNight
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.
Note: This post is more technical and less visual than my previous one. There aren't many demos, and it's mostly code snippets from here on. You've been warned!
Background
I have wanted to implement a 'live' functionality in my personal website for a few years. Something that makes my site feel more current and that evolves with the day excited me.
My first attempt at this was in my previous site, where I had a background video of a stream on the Isle of Skye. This was a simple 30s loop, but what I wanted was a 24-hour video that would be synced up with your local time. I liked this idea, but it was impractical thanks to the difficulty in getting 24 hours of consistent footage. It also turned out to be a pretty major technical challenge, I had no experience of streaming video and HLS and DASH weren't widely supported.
When I came up with the idea of the SVG landscape, this seemed like a perfect accompaniment. I could make the time in the 'scene' match up with your local time and demonstrate that through the colours and sun.
Initially I implemented a prototype of this with anime.js—a great JS animation library. When I boiled down the essential elements however, the problem was a lot simpler than I thought. There's more JavaScript here than my previous post but stick with me!
Static Custom Properties
We are starting from the final CodePen in my previous post. First let us set up our colours in custom properties:
CodePen Embed - Firewatch-style SVG parallax landscape with colours - static
Demo of Firewatch-style SVG parallax landscape
You can find out more info about this at alistairshepherd.uk/writing/parallax-landscape-2/.
html {
--c0: #fff;
--c1: #eee;
--c2: #d2d2d2;
--c3: #c5c5c5;
--c4: #a2a2a2;
--c5: #b1b1b1;
--c6: #838383;
--c7: #737373;
--c8: #393939;
--c9: #1f1f1f;
--c10: #000;
}
// 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
// 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 with colours - static
Demo of Firewatch-style SVG parallax landscape
You can find out more info about this at alistairshepherd.uk/writing/parallax-landscape-2/.
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.
As we are going to be using JavaScript to 'enhance' this with the colours of our animation, we're starting with greys that roughly match the tone of our colours.
This helps us in a couple different situations:
- If the visitor has JS disabled or our JS doesn't load, we can be sure the colour contrast is sufficient and the site accessible.
- For performance reasons, we don't want to include our JS blocking the render in the
<head>. That means that for a brief period our fallback colours might be displayed before the JS kicks in. By choosing neutral greys it looks more natural than going from one colour to another—like the saturation is turned up from 0.
Colour Config
So we can access them with JS later, I'm configuring my colours in the JS:
const config = {
states: [\
{\
at: 0,\
name: 'night',\
colours: {\
c0: '#7da5d5',\
c1: '#0c4e8f',\
c2: '#00101f'\
}\
},\
{\
at: 6,\
name: 'sunrise',\
colours: {\
c0: '#fed4d5',\
c1: '#a496c4',\
c2: '#2e2c3f'\
}\
},\
{\
at: 12,\
name: 'day',\
colours: {\
c0: '#ffe2a6',\
c1: '#fc813a',\
c2: '#2f1121'\
}\
},\
{\
at: 18,\
name: 'sunset',\
colours: {\
c0: '#ffad39',\
c1: '#e17b17',\
c2: '#1e0000'\
}\
}\
]
}
We'll add to this later, and the at property will become more clear with more code below. We are defining an array of different themes, giving each a name so we can look them up later, and defining our colour palette.
My website has 10 unique colours, I have reduced it to 3 in code snippets for simplicity. If you're interested in all 10 have a look at the CodePens!
Animating Custom Properties
In CSS we have the animation and transition properties. These help us animate between two values without needing JS. We should be able to use that to animate our custom properties right? Unfortunately, not right.
As great as custom properties are, at the moment they have limits. One of those limits is in animation or transitions. At the moment custom properties are strings, so the browser transition engine can't know how to interpolate between two values when they change.
This is one of the things that the Houdini Project is designed to solve, but it is currently Blink-only so that's not well-supported enough for us at the moment. The idea is you specify exactly the type of value a property represents (eg, colour) and the browser can handle interpolating it.
The Animation
I found it difficult to tutorial-ise the animation JS so what I'm going to do is include my commented code. Feel free to go back to the CodePen above and have a dig around yourself, or get in touch if you have any questions!
// Configuration of colours and animation states
const config = {
// sets the setInterval interval and the progress function for each animation mode
anims: {
live: {
// A high interval as live changes very infrequently.
interval: 60000,
getProgress: now => {
// Current seconds elapsed this day, divided by number of seconds in the day
const time = (now.getHours() * 3600) + (now.getMinutes() * 60) + now.getSeconds()
return time / 86400
}
},
cycle: {
// A low interval as cycle changes in milliseconds.
interval: 50,
getProgress: now => {
// Current milliseconss elapsed this minute, divided by number of milliseconds in a minute
const time = (now.getSeconds() * 1000) + now.getMilliseconds()
return time / 60000
}
}
},
// States with 'at' specifying the time in hours the state should be.
// 'name' allows referring to it when we add themes later.
// 'colours' is object with key as custom property name and value as colour.
states: [\
{\
at: 0,\
name: 'night',\
colours: {\
c0: '#7da5d5',\
c1: '#0c4e8f',\
c2: '#00101f'\
}\
},\
{\
at: 6,\
name: 'sunrise',\
colours: {\
c0: '#fed4d5',\
c1: '#a496c4',\
c2: '#2e2c3f'\
}\
},\
{\
at: 12,\
name: 'day',\
colours: {\
c0: '#ffe2a6',\
c1: '#fc813a',\
c2: '#2f1121'\
}\
},\
{\
at: 18,\
name: 'sunset',\
colours: {\
c0: '#ffad39',\
c1: '#e17b17',\
c2: '#1e0000'\
}\
}\
]
}
const root = document.documentElement
// This changes the interval and progress calculation between
// our dynamic animations 'live' and 'cycle'.
let animMode = 'live'
// If we need to end the animation, this function will stop it
// running again using clearInterval
function endAnim() {
clearInterval(animation)
}
// Get the onjects for the last and next states
const lastState = config.states[lastIndex]
const nextState = config.states[nextIndex]
// Apply the custom property to root using the name and our new RGB value.
applyColour(key, currRGB)
})
}
return progress
}
// Initialise and start animation.
function init() {
startAnim()
}
init()
Theme Picker
With the above code, we have an animated live colour scheme and the flexibility to extend it further. Let's do just that by creating methods to switch between 'dynamic' schemes and our named states.
We'll go through the basic code to change, and then a basic 'theme picker'.
Switching between dynamic states
In our configuration, we have set the progress function and interval for each dynamic theme. When we start the animation and when our updateAnim() function run, they use the value of animMode to choose the correct interval and progress function for the current mode.
This means all we need to do is stop the animation, change animMode, and start it again. For example to change to 'cycle':
endAnim()
animMode = 'cycle'
startAnim()
And likewise, to switch to 'live', we would do the same process but instead set animMode to 'live'.
Switching to a static 'named' state
We included the name property within our state so that we can refer to it when setting the theme. First we need to stop the animation, so that the dynamic state doesn't replace our changes when it next runs. Then, we need to find the colours for the state we would like to apply and apply them. We can do that with this short piece of code.
const theme = 'sunset'
endAnim()
const state = config.states.find(item => item.name === theme)
Object.keys(state.colours).forEach(key => {
applyColour(key, hexToRgb(state.colours[key]))
})
Line 3 uses the handy Array method 'find' which will return the item that matches our condition: where item.name equals our theme name.
We then loop through all the colours of that state and apply them as we did for our dynamic 'themes'.
Theme Picker
It's worth building out a theme picker for yourself, but here's a simple implementation to get us started:
<button data-active aria-pressed data-theme="live">Live</button>
<button data-theme="cycle">Cycle</button>
<button data-theme="sunrise">Sunrise</button>
<button data-theme="day">Day</button>
<button data-theme="sunset">Sunset</button>
<button data-theme="night">Night</button>
const themes = document.querySelectorAll('[data-theme]')
if (themes) {
themes.forEach(function(theme) {
theme.addEventListener('click', function(e) {
// remove active state from old theme buttons
themes.forEach(theme => {
theme.removeAttribute('data-active')
theme.removeAttribute('aria-pressed')
})
// add active state to clicked button
this.setAttribute('data-active', '')
this.setAttribute('aria-pressed', '')
// get slug for current theme
const themeSlug = this.getAttribute('data-theme')
// end animation
endAnim()
// if dynamic theme, set animMode, start animation and return
if (themeSlug === 'live' || themeSlug === 'cycle') {
animMode = themeSlug
startAnim()
return
}
// find theme state and apply the colours
const state = config.states.find(item => item.name === themeSlug)
Object.keys(state.colours).forEach(key => {
applyColour(key, hexToRgb(state.colours[key]))
})
})
})
}
Sun Animation
The final piece to our landscape is a moving sun. You would have thought it would be easy to implement, but it turned out to be more tricky than I first thought.
Lets go over our requirements:
- A small circle that is on the far left at 6, top at 12, right at 18, and bottom at 24.
- Respects screen width so it works for wide and narrow screens.
- Respects screen height so it is positioned in the right place compared to the landscape.
- Follows an ellipse based on the width and height
Due to all these reasons, my first thought of using animations becomes hard to implement. Respecting width, height and following an ellipse though sounds like a tricky challenge.
The solution ends up using our favourite feature the Custom Property, and exploiting the relationship between ellipses and the Sin function.
We can continue to keep our JavaScript minimal and respect the screen size by using transforms and elements the size of the screen. To our .landscape from the previous post:
<div class="landscape__sunWrap">
<div class="landscape__sun"></div>
</div>
$sun-size: min(4rem, 10vw);
$sun-movement-v: 30%;
$sun-movement-h: 40%;
.landscape {
&__sunWrap {
$distance: 10;
bottom: 10%;
height: 75%;
left: 0;
position: absolute;
transform: translateY(var(--scrollPos, 0));
width: 100%;
@media (prefers-reduced-motion: reduce) {
display: none;
}
}
// the actual sun element
&::before {
background: #fff;
border-radius: 50%;
content: '';
height: $sun-size;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: $sun-size;
}
}
}
Using this code the positioning of our sun is based on rails, constrained by the size of our landscape. --sun-h and --sun-v are numbers between -1 and 1 which are used in the calc within our transform property to set how far up/down and left/right the sun is.
The advantage of using an element filling our landscape means that as the element is narrower, the less the sun moves horizontally. This leaves us with minimal JS:
function sunPos(progress) {
const sunWrap = document.querySelector('.landscape__sunWrap')
if (sunWrap) {
const sunH = -Math.sin(2 * Math.PI * progress / 24)
const sunV = -Math.sin(2 * Math.PI * (progress - 6) / 24)
sunWrap.style.setProperty('--sun-h', round(sunH, 3))
sunWrap.style.setProperty('--sun-v', round(sunV, 3))
}
}
This involves maths that I'm pretty sure I was taught in High School and University, but I am certain I have almost entirely forgotten! For a square element, this would create a circular movement but by splitting it up into separate components we have our ellipse.
We then run sunPos with our progress in our updateAnim() function and using the state.at property after setting a static theme.
Conclusion
If you've gotten this far, congratulations and thank you for sticking with me! Here's our final landscape, as above:
CodePen Embed - Firewatch-style SVG parallax landscape with dynamic live colour themes
Demo of Firewatch-style SVG parallax landscape with colour changing
/**
- sun */ $sun-size: min(4rem, 10vw); $sun-movement-v: 30%; $sun-movement-h: 40%; .landscape { &__sunWrap { $distance: 10;
bottom: 10%; height: 75%; left: 0; position: absolute; transform: translateY(var(--scrollPos, 0)); width: 100%;
@media (prefers-reduced-motion: reduce) { display: none; } }
// 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); }
&[data-active] { background: var(--c1); } }
const root = document.documentElement
// This changes the interval and progress calculation between
// our dynamic animations 'live' and 'cycle'.
let animMode = 'live'
// If we need to end the animation, this function will stop it
// running again using clearInterval
function endAnim() {
clearInterval(animation)
}
// Get the onjects for the last and next states
const lastState = config.states[lastIndex]
const nextState = config.states[nextIndex]
// Apply the custom property to root using the name and our new RGB value.
applyColour(key, currRGB)
})
sunPos(progress)
}
return progress
}
// Initialise and start animation.
function init() {
startAnim()
}
init()
// add active state to clicked button
this.setAttribute('data-active', '')
this.setAttribute('aria-pressed', '')
// get slug for current theme
const themeSlug = this.getAttribute('data-theme')
// end animation
endAnim()
// if dynamic theme, set animMode, start animation and return
if (themeSlug === 'live' || themeSlug === 'cycle') {
animMode = themeSlug
startAnim()
return
}
/**
* parallax
*/
// constant elements: your main scrolling element; html element
const scrollEl = document.documentElement
let scrollPos
// call animation again on next animation frame
window.requestAnimationFrame(parallax)
}
// start animation on next animation frame
window.requestAnimationFrame(parallax)
Firewatch-style SVG parallax landscape with dynamic live colour themes
Demo of Firewatch-style SVG parallax landscape with colour changing
Themes
LiveCycleSunriseDaySunsetNight
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.
This is not the easiest post to read by any stretch of the imagination, but I wanted to get down a lot of info and I struggled to in a way that felt natural. Initial drafts were tutorial-like before I realised I was writing a 10,000 word tutorial!
I am planning to write more, but will be making them shorter and simpler than this one. Keep an eye out for future posts about:
- The 'hilly' dividers
- Blog setup with 11ty, esbuild and gulp
- Implementing mouse-based painting with canvas and JS
and a few more I have planned!
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.