
La stanza delle carte
3D, Transizioni, Immagini
Gratis
Le case di un’agenzia immobiliare, e ogni foto è una finestra con le persiane verdi su un muro d’intonaco: le stecche si inclinano per sbirciare, la maniglia gira, le ante si spalancano in 3D, sbattono contro il muro e i fermi le tengono. Passando a un’altra casa le persiane si richiudono di colpo e si riaprono sulla foto nuova.
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Homes behind the shutters</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/newsreader@5.3.0/opsz-italic.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/mona-sans@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage" data-stage>
<!-- the listings of an estate agency on a plaster wall, each photo behind a pair of louvred shutters: the slats
tilt to let you peek, the latch turns, the leaves swing open and bang against the wall, where the catches
hold them. Going to another home they swing shut, the slats close, the photo changes and they open again.
The leaves, slats and catches are built by script.js; the homes (name, place, price) are in HOMES -->
<header class="top" data-top>
<span class="brand">
<svg class="brand__mark" viewBox="0 0 32 32" aria-hidden="true">
<rect x="3" y="4" width="12" height="24" rx="1.5"/>
<rect x="17" y="4" width="12" height="24" rx="1.5"/>
<path d="M5.5 8.5h7M5.5 12h7M5.5 15.5h7M5.5 20h7M5.5 23.5h7M19.5 8.5h7M19.5 12h7M19.5 15.5h7M19.5 20h7M19.5 23.5h7"/>
</svg>
<span class="brand__name">Larkspur Homes</span>
</span>
<span class="top__note">Homes for sale with a view</span>
</header>
<section class="listing" aria-roledescription="carousel" aria-label="Homes for sale" data-listing>
<div class="scene" data-scene>
<span class="cast cast--l" aria-hidden="true" data-cast></span>
<span class="cast cast--r" aria-hidden="true" data-cast></span>
<div class="window" data-window>
<div class="view" data-view>
<svg class="photo" data-photo viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" role="img" aria-label="A white villa with arched windows and teal shutters above a harbour, a pergola covered in pink bougainvillea, the sea and a sailing boat behind, a lemon tree and a terracotta terrace in front">
<defs>
<linearGradient id="lh-sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#7fb8da"/><stop offset=".6" stop-color="#c9e2ea"/><stop offset="1" stop-color="#f5ead7"/></linearGradient>
<linearGradient id="lh-sea" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#5aa6c6"/><stop offset="1" stop-color="#1f6a90"/></linearGradient>
<linearGradient id="lh-floor" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#d2825a"/><stop offset="1" stop-color="#b25f3d"/></linearGradient>
</defs>
<g data-depth="0.06">
<rect x="-60" y="-60" width="520" height="330" fill="url(#lh-sky)"/>
<path d="M42 96c6-13 27-16 37-5 9-8 27-6 31 7 12 0 17 10 11 15H35c-9-3-6-17 7-17z" fill="#fff" opacity=".8"/>
<path d="M262 64c5-10 21-12 29-4 7-6 21-4 24 6 9 0 13 7 9 11h-66c-7-2-5-13 4-13z" fill="#fff" opacity=".65"/>
</g>
<g data-depth="0.16">
<rect x="-60" y="232" width="520" height="160" fill="url(#lh-sea)"/>
<path d="M-60 240C-10 214 40 210 80 224c22 8 40 12 70 14v6H-60z" fill="#6e988c"/>
<rect x="18" y="226" width="9" height="7" fill="#f6efe2"/><rect x="27" y="227" width="2" height="6" fill="#d9cfbd"/><rect x="30" y="222" width="8" height="10" fill="#f6efe2"/><rect x="38" y="223" width="2" height="9" fill="#d9cfbd"/><rect x="41" y="225" width="10" height="7" fill="#f6efe2"/><rect x="51" y="226" width="2" height="6" fill="#d9cfbd"/><rect x="54" y="228" width="7" height="6" fill="#f6efe2"/><rect x="61" y="229" width="2" height="5" fill="#d9cfbd"/><rect x="64" y="230" width="9" height="6" fill="#f6efe2"/><rect x="73" y="231" width="2" height="5" fill="#d9cfbd"/><rect x="10" y="231" width="7" height="5" fill="#f6efe2"/><rect x="17" y="232" width="2" height="4" fill="#d9cfbd"/>
<path d="M330 238c18-10 44-12 70-6l60 8v4H320z" fill="#86a79c"/>
<path d="M210 262h40M262 274h30M178 288h56M300 296h46M226 310h38M150 302h24M340 318h40" stroke="#c6e6f0" stroke-width="1.6" stroke-linecap="round" opacity=".75"/>
<g class="boat"><path d="M286 252l14-24v24z" fill="#fffaf0"/><path d="M302 252l9-14v14z" fill="#f2e6d2"/><path d="M282 253h34l-4 5h-27z" fill="#27465a"/></g>
</g>
<g data-depth="0.3">
<path d="M260 300c40-26 90-46 200-52v80H250z" fill="#6b8a4c"/>
<path d="M330 262c10-8 32-10 44-2 6 4 2 8-6 8h-34c-8 0-10-3-4-6z" fill="#3d5f34"/><path d="M350 268v24" stroke="#5a3e2b" stroke-width="3"/>
<path d="M378 254c9-7 28-8 38-1 5 3 1 7-5 7h-29c-7 0-9-3-4-6z" fill="#355a30"/><path d="M396 260v28" stroke="#5a3e2b" stroke-width="3"/>
</g>
<g data-depth="0.48">
<path d="M-60 318C30 300 120 292 200 296s170 0 260 10v200H-60z" fill="#86a35a"/>
<path d="M-60 336c90-16 180-20 260-16s170 6 260 18v170H-60z" fill="#77954e"/>
<path d="M290 226l30-12v96l-30 8z" fill="#e3c9a8"/>
<rect x="116" y="226" width="174" height="92" fill="#f6e7d3"/>
<path d="M112 219h182v8H112zM294 219l30-12v7l-30 13z" fill="#ecd7bc"/>
<path d="M250 180l18-7v51h-18z" fill="#e6cfb1"/>
<rect x="148" y="178" width="102" height="48" fill="#f9eddd"/>
<path d="M144 172h110v8H144zM254 172l18-7v7l-18 8z" fill="#efdcc2"/>
<path d="M166 216V196A8 8 0 0 1 182 196V216Z" fill="#2a4d5c"/><path d="M174 191V216M166 203.4H182" stroke="#f6ead8" stroke-width="1.2" opacity=".55"/><rect x="156.2" y="191.2" width="8.3" height="24.8" rx="1" fill="#2f8a85"/><rect x="183.5" y="191.2" width="8.3" height="24.8" rx="1" fill="#2f8a85"/><path d="M157.7 194.2h5.3M185 194.2h5.3M157.7 197.2h5.3M185 197.2h5.3M157.7 200.2h5.3M185 200.2h5.3M157.7 203.2h5.3M185 203.2h5.3M157.7 206.2h5.3M185 206.2h5.3M157.7 209.2h5.3M185 209.2h5.3M157.7 212.2h5.3M185 212.2h5.3" stroke="#000" stroke-opacity=".18" stroke-width=".8"/>
<path d="M220 216V196A8 8 0 0 1 236 196V216Z" fill="#2a4d5c"/><path d="M228 191V216M220 203.4H236" stroke="#f6ead8" stroke-width="1.2" opacity=".55"/><rect x="210.2" y="191.2" width="8.3" height="24.8" rx="1" fill="#2f8a85"/><rect x="237.5" y="191.2" width="8.3" height="24.8" rx="1" fill="#2f8a85"/><path d="M211.7 194.2h5.3M239 194.2h5.3M211.7 197.2h5.3M239 197.2h5.3M211.7 200.2h5.3M239 200.2h5.3M211.7 203.2h5.3M239 203.2h5.3M211.7 206.2h5.3M239 206.2h5.3M211.7 209.2h5.3M239 209.2h5.3M211.7 212.2h5.3M239 212.2h5.3" stroke="#000" stroke-opacity=".18" stroke-width=".8"/>
<path d="M134 282V256A10 10 0 0 1 154 256V282Z" fill="#2a4d5c"/><path d="M144 249V282M134 265.8H154" stroke="#f6ead8" stroke-width="1.2" opacity=".55"/><rect x="122.1" y="250" width="10.4" height="32" rx="1" fill="#2f8a85"/><rect x="155.5" y="250" width="10.4" height="32" rx="1" fill="#2f8a85"/><path d="M123.6 253h7.4M157 253h7.4M123.6 256h7.4M157 256h7.4M123.6 259h7.4M157 259h7.4M123.6 262h7.4M157 262h7.4M123.6 265h7.4M157 265h7.4M123.6 268h7.4M157 268h7.4M123.6 271h7.4M157 271h7.4M123.6 274h7.4M157 274h7.4M123.6 277h7.4M157 277h7.4M123.6 280h7.4M157 280h7.4" stroke="#000" stroke-opacity=".18" stroke-width=".8"/>
<path d="M252 282V256A10 10 0 0 1 272 256V282Z" fill="#2a4d5c"/><path d="M262 249V282M252 265.8H272" stroke="#f6ead8" stroke-width="1.2" opacity=".55"/><rect x="240.1" y="250" width="10.4" height="32" rx="1" fill="#2f8a85"/><rect x="273.5" y="250" width="10.4" height="32" rx="1" fill="#2f8a85"/><path d="M241.6 253h7.4M275 253h7.4M241.6 256h7.4M275 256h7.4M241.6 259h7.4M275 259h7.4M241.6 262h7.4M275 262h7.4M241.6 265h7.4M275 265h7.4M241.6 268h7.4M275 268h7.4M241.6 271h7.4M275 271h7.4M241.6 274h7.4M275 274h7.4M241.6 277h7.4M275 277h7.4M241.6 280h7.4M275 280h7.4" stroke="#000" stroke-opacity=".18" stroke-width=".8"/>
<path d="M190 318v-30a13 13 0 0 1 26 0v30z" fill="#2f8a85"/><path d="M203 278v40" stroke="#1f6460" stroke-width="1.4"/><circle cx="208" cy="300" r="1.4" fill="#e9d38f"/>
<path d="M180 318h46v5h-46zM174 323h58v5h-58z" fill="#e3cdb0"/>
<path d="M298 300l8-36 8 36z" fill="#2e4a2a"/><path d="M312 306l7-46 8 46z" fill="#27412a"/>
<path d="M66 316v-56M102 316v-56" stroke="#7a5236" stroke-width="4" stroke-linecap="round"/>
<path d="M56 258h76" stroke="#8a5f3e" stroke-width="5" stroke-linecap="round"/>
<path d="M62 250l6 12M78 250l6 12M94 250l6 12M110 250l6 12M126 250l6 12" stroke="#6d4a30" stroke-width="2.4" stroke-linecap="round"/>
<g class="bougain"><ellipse cx="111.4" cy="244.3" rx="6.2" ry="2.6" transform="rotate(172 111.4 244.3)" fill="#4f8d48"/><ellipse cx="116.2" cy="254.5" rx="5.9" ry="2.5" transform="rotate(16 116.2 254.5)" fill="#3f7a3e"/><ellipse cx="129.9" cy="230" rx="5.8" ry="2.4" transform="rotate(15 129.9 230)" fill="#4f8d48"/><ellipse cx="72.6" cy="244.8" rx="5.5" ry="2.3" transform="rotate(30 72.6 244.8)" fill="#4f8d48"/><ellipse cx="91.3" cy="236.6" rx="5.1" ry="2.1" transform="rotate(56 91.3 236.6)" fill="#4f8d48"/><ellipse cx="112.8" cy="212.5" rx="5.1" ry="2.1" transform="rotate(105 112.8 212.5)" fill="#4f8d48"/><ellipse cx="78.4" cy="225.2" rx="6.1" ry="2.5" transform="rotate(153 78.4 225.2)" fill="#3f7a3e"/><ellipse cx="140.4" cy="251.1" rx="6.4" ry="2.7" transform="rotate(20 140.4 251.1)" fill="#3f7a3e"/><ellipse cx="120.9" cy="252.1" rx="6.6" ry="2.8" transform="rotate(122 120.9 252.1)" fill="#3f7a3e"/><ellipse cx="81.4" cy="231.6" rx="6.6" ry="2.8" transform="rotate(72 81.4 231.6)" fill="#3f7a3e"/><ellipse cx="112.5" cy="229.6" rx="6.2" ry="2.6" transform="rotate(168 112.5 229.6)" fill="#4f8d48"/><ellipse cx="131.9" cy="239.7" rx="5.5" ry="2.3" transform="rotate(168 131.9 239.7)" fill="#4f8d48"/><ellipse cx="106.8" cy="213.8" rx="5" ry="2.1" transform="rotate(48 106.8 213.8)" fill="#4f8d48"/><ellipse cx="104.2" cy="258.8" rx="6.5" ry="2.7" transform="rotate(99 104.2 258.8)" fill="#4f8d48"/><ellipse cx="108.7" cy="241.8" rx="6.5" ry="2.7" transform="rotate(122 108.7 241.8)" fill="#4f8d48"/><ellipse cx="123.1" cy="236.6" rx="4.9" ry="2.1" transform="rotate(180 123.1 236.6)" fill="#4f8d48"/><ellipse cx="107" cy="255.2" rx="6.7" ry="2.8" transform="rotate(124 107 255.2)" fill="#4f8d48"/><ellipse cx="98.6" cy="254" rx="4.8" ry="2" transform="rotate(8 98.6 254)" fill="#4f8d48"/><ellipse cx="127.6" cy="259.5" rx="6.5" ry="2.7" transform="rotate(136 127.6 259.5)" fill="#3f7a3e"/><ellipse cx="126.3" cy="258.3" rx="7.5" ry="3.1" transform="rotate(135 126.3 258.3)" fill="#3f7a3e"/><ellipse cx="104.7" cy="250.3" rx="5.6" ry="2.3" transform="rotate(129 104.7 250.3)" fill="#3f7a3e"/><ellipse cx="95.8" cy="238.6" rx="6.2" ry="2.6" transform="rotate(157 95.8 238.6)" fill="#4f8d48"/><ellipse cx="127.6" cy="237.9" rx="7" ry="2.9" transform="rotate(91 127.6 237.9)" fill="#3f7a3e"/><ellipse cx="116.8" cy="233.7" rx="6.7" ry="2.8" transform="rotate(108 116.8 233.7)" fill="#4f8d48"/><ellipse cx="103.8" cy="251.3" rx="4.7" ry="2" transform="rotate(125 103.8 251.3)" fill="#4f8d48"/><ellipse cx="128.8" cy="238.6" rx="4.8" ry="2" transform="rotate(84 128.8 238.6)" fill="#4f8d48"/><circle cx="115.9" cy="240.9" r="5.4" fill="#f07db1"/><circle cx="130.5" cy="238.1" r="2.6" fill="#d6377f"/><circle cx="117.7" cy="219.1" r="2.6" fill="#d6377f"/><circle cx="130.5" cy="239" r="4.3" fill="#d6377f"/><circle cx="131.8" cy="217.6" r="3.4" fill="#e8579a"/><circle cx="120.2" cy="242.7" r="2.7" fill="#e8579a"/><circle cx="111.5" cy="213.2" r="3.9" fill="#c42a6c"/><circle cx="91.4" cy="238.7" r="4.7" fill="#f07db1"/><circle cx="99" cy="222" r="5" fill="#e8579a"/><circle cx="91.7" cy="245.5" r="5.9" fill="#e8579a"/><circle cx="104.3" cy="231" r="4.8" fill="#d6377f"/><circle cx="99" cy="227.1" r="5.3" fill="#f07db1"/><circle cx="121" cy="260.1" r="4" fill="#e8579a"/><circle cx="110.9" cy="238.8" r="5.6" fill="#d6377f"/><circle cx="78.7" cy="233.8" r="5.6" fill="#d6377f"/><circle cx="127.9" cy="226.9" r="4.5" fill="#e8579a"/><circle cx="103.8" cy="242.5" r="2.7" fill="#e8579a"/><circle cx="127.2" cy="241.3" r="4.7" fill="#e8579a"/><circle cx="110.5" cy="254.8" r="4.7" fill="#c42a6c"/><circle cx="123.5" cy="231.2" r="4.1" fill="#d6377f"/><circle cx="104.1" cy="222.1" r="3.1" fill="#f07db1"/><circle cx="109.1" cy="246.4" r="4.8" fill="#d6377f"/><circle cx="111.2" cy="248.5" r="2.6" fill="#d6377f"/><circle cx="128.1" cy="241.2" r="4.4" fill="#e8579a"/><circle cx="138.3" cy="231.8" r="5" fill="#e8579a"/><circle cx="99.3" cy="221.3" r="5.6" fill="#e8579a"/><circle cx="111.4" cy="225.2" r="3.4" fill="#c42a6c"/><circle cx="107.8" cy="242.6" r="5.5" fill="#c42a6c"/><circle cx="110" cy="236.7" r="3.1" fill="#e8579a"/><circle cx="137.1" cy="241.3" r="5" fill="#f07db1"/><circle cx="94.6" cy="234.1" r="5.8" fill="#c42a6c"/><circle cx="103.2" cy="228.8" r="3.7" fill="#e8579a"/><circle cx="79.5" cy="235.1" r="5.8" fill="#d6377f"/><circle cx="106.5" cy="252.1" r="5.8" fill="#f07db1"/><circle cx="97.2" cy="238" r="4.8" fill="#f07db1"/><circle cx="83.1" cy="249.6" r="4.2" fill="#c42a6c"/><circle cx="120.2" cy="246" r="4.7" fill="#c42a6c"/><circle cx="102.4" cy="248.3" r="2.8" fill="#e8579a"/><circle cx="126.3" cy="214.8" r="3.6" fill="#e8579a"/><circle cx="90.2" cy="242.4" r="4" fill="#f07db1"/><circle cx="125.1" cy="245.3" r="3.4" fill="#c42a6c"/><circle cx="111.9" cy="238.3" r="4.6" fill="#d6377f"/><circle cx="140.9" cy="236.7" r="5" fill="#d6377f"/><circle cx="110" cy="234" r="2.8" fill="#d6377f"/><circle cx="113.2" cy="236.6" r="5.8" fill="#c42a6c"/><circle cx="114.5" cy="215.4" r="4.6" fill="#c42a6c"/><circle cx="109.5" cy="241.8" r="3.9" fill="#d6377f"/><circle cx="106.4" cy="252.4" r="3.6" fill="#d6377f"/><circle cx="125.7" cy="222.6" r="5.6" fill="#f07db1"/><circle cx="125.3" cy="250.6" r="4.9" fill="#d6377f"/><circle cx="87.6" cy="249.5" r="5.4" fill="#e8579a"/><circle cx="94.9" cy="223.1" r="3.3" fill="#f07db1"/><circle cx="125.2" cy="234.3" r="2.9" fill="#e8579a"/><circle cx="91.3" cy="237" r="5.2" fill="#c42a6c"/><circle cx="92" cy="243.6" r="3" fill="#f07db1"/><circle cx="94.3" cy="241.1" r="3" fill="#d6377f"/><circle cx="96.1" cy="231.5" r="4.6" fill="#e8579a"/><circle cx="129.2" cy="217.2" r="3" fill="#e8579a"/><circle cx="95.4" cy="243.9" r="3.1" fill="#c42a6c"/><circle cx="115.9" cy="255.1" r="2.9" fill="#f07db1"/><circle cx="87.1" cy="222.3" r="4.3" fill="#e8579a"/><circle cx="121.8" cy="232.4" r="5.1" fill="#e8579a"/><circle cx="110.1" cy="215.8" r="5.1" fill="#f07db1"/><circle cx="108.6" cy="233.2" r="3.6" fill="#e8579a"/><circle cx="99.4" cy="222.1" r="4.8" fill="#f07db1"/><circle cx="92.7" cy="216.5" r="2.6" fill="#f07db1"/><circle cx="114.3" cy="217" r="4.6" fill="#d6377f"/><circle cx="124" cy="251.8" r="3.2" fill="#e8579a"/><circle cx="97.2" cy="242.4" r="2.9" fill="#e8579a"/><circle cx="113.6" cy="215.1" r="5.4" fill="#d6377f"/></g>
</g>
<g data-depth="0.9">
<path d="M-60 448l520-14v120H-60z" fill="url(#lh-floor)"/>
<path d="M-60 448l520-14" stroke="#ebc7a3" stroke-width="5"/>
<path d="M40 445l-30 70M120 443l-14 70M200 441v70M280 439l14 70M360 437l30 70M-60 478l520-12" stroke="#9c4f31" stroke-width="1.6" opacity=".55"/>
<path d="M44 520c4-46-10-82 18-122 12-17 8-40 24-60" fill="none" stroke="#6b4a2f" stroke-width="9" stroke-linecap="round"/>
<path d="M58 404c18-10 34-30 40-52M50 430c-14-10-24-28-26-50" fill="none" stroke="#6b4a2f" stroke-width="4" stroke-linecap="round"/>
<g class="sway" data-origin="70 520"><ellipse cx="21.4" cy="314.7" rx="11.6" ry="4.9" transform="rotate(106 21.4 314.7)" fill="#5aa057"/><ellipse cx="56.6" cy="313.8" rx="11.2" ry="4.7" transform="rotate(109 56.6 313.8)" fill="#4b8f4b"/><ellipse cx="6.9" cy="325.1" rx="10.6" ry="4.4" transform="rotate(121 6.9 325.1)" fill="#26502e"/><ellipse cx="95.5" cy="340.2" rx="9.8" ry="4.1" transform="rotate(71 95.5 340.2)" fill="#3b7a42"/><ellipse cx="53.8" cy="307" rx="11.5" ry="4.8" transform="rotate(104 53.8 307)" fill="#4b8f4b"/><ellipse cx="117.1" cy="271.8" rx="12.5" ry="5.2" transform="rotate(57 117.1 271.8)" fill="#26502e"/><ellipse cx="77.8" cy="332.7" rx="12.3" ry="5.2" transform="rotate(176 77.8 332.7)" fill="#3b7a42"/><ellipse cx="118.7" cy="360.6" rx="10.2" ry="4.3" transform="rotate(100 118.7 360.6)" fill="#4b8f4b"/><ellipse cx="94.7" cy="298.6" rx="12.9" ry="5.4" transform="rotate(148 94.7 298.6)" fill="#3b7a42"/><ellipse cx="99.3" cy="320.7" rx="12.9" ry="5.4" transform="rotate(90 99.3 320.7)" fill="#4b8f4b"/><ellipse cx="70.9" cy="361.6" rx="12.3" ry="5.2" transform="rotate(16 70.9 361.6)" fill="#26502e"/><ellipse cx="127.9" cy="329.6" rx="11.7" ry="4.9" transform="rotate(177 127.9 329.6)" fill="#4b8f4b"/><ellipse cx="32.7" cy="325.8" rx="8.5" ry="3.6" transform="rotate(132 32.7 325.8)" fill="#4b8f4b"/><ellipse cx="80.5" cy="284.1" rx="11.3" ry="4.7" transform="rotate(63 80.5 284.1)" fill="#5aa057"/><ellipse cx="92.4" cy="336" rx="11.7" ry="4.9" transform="rotate(112 92.4 336)" fill="#2c5f35"/><ellipse cx="45.4" cy="345.9" rx="13.4" ry="5.6" transform="rotate(154 45.4 345.9)" fill="#26502e"/><ellipse cx="14.7" cy="349.6" rx="11.5" ry="4.8" transform="rotate(78 14.7 349.6)" fill="#3b7a42"/><ellipse cx="70.8" cy="317.5" rx="13.1" ry="5.5" transform="rotate(54 70.8 317.5)" fill="#4b8f4b"/><ellipse cx="93.7" cy="330.3" rx="12.3" ry="5.2" transform="rotate(98 93.7 330.3)" fill="#4b8f4b"/><ellipse cx="124.5" cy="346.1" rx="11.7" ry="4.9" transform="rotate(159 124.5 346.1)" fill="#5aa057"/><ellipse cx="28.6" cy="290.1" rx="11.4" ry="4.8" transform="rotate(88 28.6 290.1)" fill="#2c5f35"/><ellipse cx="41.6" cy="277.2" rx="13.7" ry="5.8" transform="rotate(128 41.6 277.2)" fill="#2c5f35"/><ellipse cx="118.7" cy="355.9" rx="13.6" ry="5.7" transform="rotate(62 118.7 355.9)" fill="#5aa057"/><ellipse cx="29.4" cy="355.9" rx="11.8" ry="5" transform="rotate(13 29.4 355.9)" fill="#3b7a42"/><ellipse cx="49.8" cy="280.7" rx="11.7" ry="4.9" transform="rotate(41 49.8 280.7)" fill="#26502e"/><ellipse cx="68.6" cy="335.3" rx="11.3" ry="4.7" transform="rotate(69 68.6 335.3)" fill="#2c5f35"/><ellipse cx="108.7" cy="263.2" rx="12.4" ry="5.2" transform="rotate(1 108.7 263.2)" fill="#4b8f4b"/><ellipse cx="112.7" cy="280.2" rx="12.1" ry="5.1" transform="rotate(113 112.7 280.2)" fill="#2c5f35"/><ellipse cx="23.3" cy="319.1" rx="9.1" ry="3.8" transform="rotate(145 23.3 319.1)" fill="#2c5f35"/><ellipse cx="145.1" cy="349.4" rx="11.6" ry="4.9" transform="rotate(127 145.1 349.4)" fill="#5aa057"/><ellipse cx="145.4" cy="287.9" rx="8.5" ry="3.6" transform="rotate(30 145.4 287.9)" fill="#4b8f4b"/><ellipse cx="38.2" cy="342.6" rx="11.2" ry="4.7" transform="rotate(9 38.2 342.6)" fill="#2c5f35"/><ellipse cx="38.6" cy="325.5" rx="10.5" ry="4.4" transform="rotate(131 38.6 325.5)" fill="#4b8f4b"/><ellipse cx="46.5" cy="358.5" rx="10.3" ry="4.3" transform="rotate(176 46.5 358.5)" fill="#3b7a42"/><ellipse cx="41.6" cy="328.3" rx="12" ry="5" transform="rotate(57 41.6 328.3)" fill="#4b8f4b"/><ellipse cx="75.4" cy="315.4" rx="9" ry="3.8" transform="rotate(30 75.4 315.4)" fill="#5aa057"/><ellipse cx="124.4" cy="360.2" rx="9.3" ry="3.9" transform="rotate(114 124.4 360.2)" fill="#5aa057"/><ellipse cx="73.1" cy="262.3" rx="8.8" ry="3.7" transform="rotate(16 73.1 262.3)" fill="#26502e"/><ellipse cx="83.6" cy="338.4" rx="10.1" ry="4.3" transform="rotate(17 83.6 338.4)" fill="#5aa057"/><ellipse cx="35.5" cy="277.7" rx="11.4" ry="4.8" transform="rotate(136 35.5 277.7)" fill="#26502e"/><ellipse cx="27.2" cy="354.2" rx="9.5" ry="4" transform="rotate(37 27.2 354.2)" fill="#2c5f35"/><ellipse cx="72.9" cy="314" rx="11.4" ry="4.8" transform="rotate(174 72.9 314)" fill="#5aa057"/><ellipse cx="5.6" cy="310.8" rx="8.6" ry="3.6" transform="rotate(95 5.6 310.8)" fill="#26502e"/><ellipse cx="76.6" cy="379.5" rx="9" ry="3.8" transform="rotate(158 76.6 379.5)" fill="#4b8f4b"/><ellipse cx="147.6" cy="290.7" rx="10.4" ry="4.4" transform="rotate(83 147.6 290.7)" fill="#4b8f4b"/><ellipse cx="105.5" cy="333.6" rx="8.8" ry="3.7" transform="rotate(16 105.5 333.6)" fill="#5aa057"/><ellipse cx="22" cy="303.5" rx="9.5" ry="4" transform="rotate(168 22 303.5)" fill="#2c5f35"/><ellipse cx="98.9" cy="290.3" rx="8.6" ry="3.6" transform="rotate(80 98.9 290.3)" fill="#3b7a42"/><ellipse cx="108.3" cy="347.2" rx="9" ry="3.8" transform="rotate(161 108.3 347.2)" fill="#4b8f4b"/><ellipse cx="2.6" cy="333" rx="10.2" ry="4.3" transform="rotate(102 2.6 333)" fill="#4b8f4b"/><ellipse cx="75" cy="361.9" rx="13.4" ry="5.6" transform="rotate(54 75 361.9)" fill="#4b8f4b"/><ellipse cx="54.8" cy="330.2" rx="9.6" ry="4" transform="rotate(114 54.8 330.2)" fill="#2c5f35"/><ellipse cx="134.2" cy="347.2" rx="9.1" ry="3.8" transform="rotate(38 134.2 347.2)" fill="#4b8f4b"/><ellipse cx="90.4" cy="271" rx="11.6" ry="4.9" transform="rotate(122 90.4 271)" fill="#3b7a42"/><ellipse cx="81.6" cy="258.5" rx="10.1" ry="4.2" transform="rotate(128 81.6 258.5)" fill="#2c5f35"/><ellipse cx="116.3" cy="350.9" rx="12" ry="5" transform="rotate(18 116.3 350.9)" fill="#5aa057"/><ellipse cx="102.3" cy="306.1" rx="13.2" ry="5.5" transform="rotate(69 102.3 306.1)" fill="#26502e"/><ellipse cx="15.6" cy="294.5" rx="13.6" ry="5.7" transform="rotate(80 15.6 294.5)" fill="#3b7a42"/><ellipse cx="49.8" cy="365.4" rx="12.1" ry="5.1" transform="rotate(9 49.8 365.4)" fill="#26502e"/><ellipse cx="114.7" cy="346.2" rx="12.4" ry="5.2" transform="rotate(77 114.7 346.2)" fill="#5aa057"/><ellipse cx="76.5" cy="296.3" rx="8.8" ry="3.7" transform="rotate(30 76.5 296.3)" fill="#2c5f35"/><ellipse cx="114.7" cy="307.1" rx="11.8" ry="5" transform="rotate(53 114.7 307.1)" fill="#3b7a42"/><ellipse cx="63.6" cy="265.4" rx="11.6" ry="4.9" transform="rotate(175 63.6 265.4)" fill="#4b8f4b"/><ellipse cx="98.6" cy="275.1" rx="10.4" ry="4.4" transform="rotate(52 98.6 275.1)" fill="#5aa057"/><ellipse cx="124.7" cy="344.9" rx="10.7" ry="4.5" transform="rotate(121 124.7 344.9)" fill="#4b8f4b"/><ellipse cx="101.5" cy="365.2" rx="9.8" ry="4.1" transform="rotate(54 101.5 365.2)" fill="#2c5f35"/><ellipse cx="115.4" cy="292.4" rx="8.8" ry="3.7" transform="rotate(103 115.4 292.4)" fill="#4b8f4b"/><ellipse cx="84.1" cy="332.9" rx="8.6" ry="3.6" transform="rotate(70 84.1 332.9)" fill="#5aa057"/><ellipse cx="13.4" cy="347" rx="10.1" ry="4.3" transform="rotate(62 13.4 347)" fill="#26502e"/><ellipse cx="125.4" cy="319.6" rx="11.3" ry="4.7" transform="rotate(143 125.4 319.6)" fill="#26502e"/><ellipse cx="44" cy="300" rx="7.4" ry="5.6" transform="rotate(8 44 300)" fill="#f1c02c"/><ellipse cx="42" cy="298" rx="2.4" ry="1.5" fill="#fbe58f"/><ellipse cx="92" cy="288" rx="7.4" ry="5.6" transform="rotate(27 92 288)" fill="#f1c02c"/><ellipse cx="90" cy="286" rx="2.4" ry="1.5" fill="#fbe58f"/><ellipse cx="118" cy="330" rx="7.4" ry="5.6" transform="rotate(8 118 330)" fill="#f1c02c"/><ellipse cx="116" cy="328" rx="2.4" ry="1.5" fill="#fbe58f"/><ellipse cx="60" cy="350" rx="7.4" ry="5.6" transform="rotate(-20 60 350)" fill="#f1c02c"/><ellipse cx="58" cy="348" rx="2.4" ry="1.5" fill="#fbe58f"/><ellipse cx="132" cy="296" rx="7.4" ry="5.6" transform="rotate(-25 132 296)" fill="#f1c02c"/><ellipse cx="130" cy="294" rx="2.4" ry="1.5" fill="#fbe58f"/><ellipse cx="26" cy="336" rx="7.4" ry="5.6" transform="rotate(-22 26 336)" fill="#f1c02c"/><ellipse cx="24" cy="334" rx="2.4" ry="1.5" fill="#fbe58f"/><ellipse cx="100" cy="356" rx="7.4" ry="5.6" transform="rotate(-17 100 356)" fill="#f1c02c"/><ellipse cx="98" cy="354" rx="2.4" ry="1.5" fill="#fbe58f"/><ellipse cx="74" cy="268" rx="7.4" ry="5.6" transform="rotate(21 74 268)" fill="#f1c02c"/><ellipse cx="72" cy="266" rx="2.4" ry="1.5" fill="#fbe58f"/><ellipse cx="140" cy="352" rx="7.4" ry="5.6" transform="rotate(-21 140 352)" fill="#f1c02c"/><ellipse cx="138" cy="350" rx="2.4" ry="1.5" fill="#fbe58f"/></g>
<path d="M318 440h62l-8 60h-46z" fill="#c4643f"/><path d="M314 432h70v12h-70z" fill="#d97a50"/>
<path d="M330 434c-8-26-20-40-34-48M340 432c-2-30-6-48-16-62M350 432c4-30 12-48 22-58M360 434c10-22 22-34 38-40M346 432c0-24 0-40 4-56" fill="none" stroke="#6f9a74" stroke-width="5" stroke-linecap="round"/>
</g>
</svg>
<svg class="photo" data-photo viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" role="img" aria-label="A stone cottage with a terracotta roof and green shutters in golden afternoon light, a wooden water wheel turning in the stream beside it, hills and cypresses behind, poppies and tall grass in front" hidden>
<defs>
<linearGradient id="mc-sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#e7b47c"/><stop offset=".55" stop-color="#f4d6a6"/><stop offset="1" stop-color="#fbecd2"/></linearGradient>
<linearGradient id="mc-water" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#7fb4c4"/><stop offset="1" stop-color="#3f7f98"/></linearGradient>
</defs>
<g data-depth="0.06">
<rect x="-60" y="-60" width="520" height="320" fill="url(#mc-sky)"/>
<path d="M268 84c7-12 26-14 35-4 8-7 24-5 28 6 10 0 15 9 10 13h-80c-8-3-5-15 7-15z" fill="#fff6e6" opacity=".75"/>
<path d="M40 120c5-9 19-10 26-3 6-5 18-3 21 5 8 0 11 6 7 10H34c-6-2-4-12 6-12z" fill="#fff6e6" opacity=".6"/>
</g>
<g data-depth="0.14">
<path d="M-60 214c60-26 120-30 170-14s110 4 160-12 120-6 190 10v60H-60z" fill="#b7a6b4"/>
<path d="M-60 232c80-18 150-12 210 0s130 6 190-8 80-4 120 4v50H-60z" fill="#a39fb2"/>
</g>
<g data-depth="0.28">
<path d="M-60 226c70-12 130-6 190 6s140 6 200-8 70-6 130 4v90H-60z" fill="#b7b066"/>
<path d="M-20 250l120-14M10 262l150-16M240 238l140 14M260 252l160 16" stroke="#a29d55" stroke-width="2.4" opacity=".7"/>
<path d="M22 196c-5-11.899999999999999 -3-25.5 0-34c3 8.5 5 22.1 0 34z" fill="#34492a"/><path d="M40 200c-5-9.799999999999999 -3-21 0-28c3 7 5 18.2 0 28z" fill="#34492a"/><path d="M312 192c-5-14 -3-30 0-40c3 10 5 26 0 40z" fill="#34492a"/><path d="M330 196c-5-11.2 -3-24 0-32c3 8 5 20.8 0 32z" fill="#34492a"/><path d="M348 200c-5-9.1 -3-19.5 0-26c3 6.5 5 16.900000000000002 0 26z" fill="#34492a"/><path d="M372 194c-5-12.6 -3-27 0-36c3 9 5 23.400000000000002 0 36z" fill="#34492a"/>
</g>
<g data-depth="0.48">
<path d="M-60 296c90-24 190-28 270-20s180 10 250 28v200H-60z" fill="#8ea24f"/>
<rect x="270" y="282" width="56" height="46" fill="#cfb68f"/>
<path d="M264 284l34-24 34 24z" fill="#a85234"/>
<rect x="130" y="250" width="140" height="80" fill="#dcc6a2"/>
<rect x="134" y="258" width="12.6" height="6" rx="2.4" fill="#c9b08a" opacity="0.4"/><rect x="155.8" y="258" width="13.8" height="6" rx="2.4" fill="#c9b08a" opacity="0.5"/><rect x="175.1" y="258" width="15.1" height="6" rx="2.4" fill="#c9b08a" opacity="0.7"/><rect x="198" y="258" width="12.1" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="217.3" y="258" width="12.5" height="6" rx="2.4" fill="#c9b08a" opacity="0.7"/><rect x="240.3" y="258" width="14.8" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="258.7" y="258" width="14.7" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="143" y="267" width="13.3" height="6" rx="2.4" fill="#c9b08a" opacity="0.7"/><rect x="162.4" y="267" width="13.1" height="6" rx="2.4" fill="#c9b08a" opacity="0.7"/><rect x="181.3" y="267" width="16.3" height="6" rx="2.4" fill="#c9b08a" opacity="0.5"/><rect x="202.4" y="267" width="17.7" height="6" rx="2.4" fill="#c9b08a" opacity="0.7"/><rect x="225.7" y="267" width="17.5" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="248.6" y="267" width="16.3" height="6" rx="2.4" fill="#c9b08a" opacity="0.4"/><rect x="134" y="276" width="15.1" height="6" rx="2.4" fill="#c9b08a" opacity="0.7"/><rect x="157.7" y="276" width="16.9" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="177.6" y="276" width="17.4" height="6" rx="2.4" fill="#c9b08a" opacity="0.4"/><rect x="198" y="276" width="16.8" height="6" rx="2.4" fill="#c9b08a" opacity="0.4"/><rect x="220.1" y="276" width="17.4" height="6" rx="2.4" fill="#c9b08a" opacity="0.7"/><rect x="238.1" y="276" width="15.5" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="260.6" y="276" width="14.2" height="6" rx="2.4" fill="#c9b08a" opacity="0.5"/><rect x="143" y="285" width="12.1" height="6" rx="2.4" fill="#c9b08a" opacity="0.4"/><rect x="164.9" y="285" width="12.5" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="188.5" y="285" width="16.2" height="6" rx="2.4" fill="#c9b08a" opacity="0.4"/><rect x="207.5" y="285" width="16.4" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="227.4" y="285" width="12.4" height="6" rx="2.4" fill="#c9b08a" opacity="0.7"/><rect x="249.8" y="285" width="17" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="134" y="294" width="13" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="155.8" y="294" width="13.3" height="6" rx="2.4" fill="#c9b08a" opacity="0.5"/><rect x="175.2" y="294" width="13.4" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="199.2" y="294" width="12.1" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="220.1" y="294" width="12.7" height="6" rx="2.4" fill="#c9b08a" opacity="0.7"/><rect x="241.6" y="294" width="16.1" height="6" rx="2.4" fill="#c9b08a" opacity="0.7"/><rect x="264.4" y="294" width="17.1" height="6" rx="2.4" fill="#c9b08a" opacity="0.4"/><rect x="143" y="303" width="16.7" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="164.5" y="303" width="16.2" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="186.1" y="303" width="15.6" height="6" rx="2.4" fill="#c9b08a" opacity="0.4"/><rect x="208.6" y="303" width="13.2" height="6" rx="2.4" fill="#c9b08a" opacity="0.7"/><rect x="230.9" y="303" width="12.5" height="6" rx="2.4" fill="#c9b08a" opacity="0.4"/><rect x="254.4" y="303" width="12.9" height="6" rx="2.4" fill="#c9b08a" opacity="0.5"/><rect x="134" y="312" width="13.6" height="6" rx="2.4" fill="#c9b08a" opacity="0.4"/><rect x="157" y="312" width="15.3" height="6" rx="2.4" fill="#c9b08a" opacity="0.5"/><rect x="178.5" y="312" width="17.5" height="6" rx="2.4" fill="#c9b08a" opacity="0.4"/><rect x="197.9" y="312" width="15.2" height="6" rx="2.4" fill="#c9b08a" opacity="0.4"/><rect x="218.9" y="312" width="15" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="239.6" y="312" width="12.1" height="6" rx="2.4" fill="#c9b08a" opacity="0.4"/><rect x="261.4" y="312" width="14.5" height="6" rx="2.4" fill="#c9b08a" opacity="0.5"/><rect x="143" y="321" width="12.7" height="6" rx="2.4" fill="#c9b08a" opacity="0.7"/><rect x="166.5" y="321" width="13.5" height="6" rx="2.4" fill="#c9b08a" opacity="0.7"/><rect x="187.7" y="321" width="14.2" height="6" rx="2.4" fill="#c9b08a" opacity="0.5"/><rect x="208.5" y="321" width="14.8" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/><rect x="227.6" y="321" width="12.7" height="6" rx="2.4" fill="#c9b08a" opacity="0.4"/><rect x="250.6" y="321" width="13.8" height="6" rx="2.4" fill="#c9b08a" opacity="0.6"/>
<path d="M118 254l82-58 82 58z" fill="#b65a3a"/>
<path d="M195.6 202.9h8.9M186.7 208.7h26.7M177.8 214.4h44.4M168.9 220.2h62.2M160 226h80M151.1 231.8h97.8M142.2 237.6h115.6M133.3 243.3h133.3M124.4 249.1h151.1" stroke="#94432a" stroke-width="1.6" opacity=".7"/>
<path d="M118 254l82-58 82 58" fill="none" stroke="#8a3d26" stroke-width="3" stroke-linejoin="round"/>
<rect x="236" y="206" width="14" height="30" fill="#b9a07c"/><rect x="233" y="202" width="20" height="6" fill="#8e7656"/>
<path d="M188 330v-34a12 12 0 0 1 24 0v34z" fill="#6a4429"/><path d="M200 284v46" stroke="#4d2f1c" stroke-width="1.2"/>
<rect x="146" y="272" width="22" height="22" fill="#33413a"/><rect x="134" y="272" width="11" height="22" fill="#4f7a52"/><rect x="169" y="272" width="11" height="22" fill="#4f7a52"/>
<rect x="232" y="272" width="22" height="22" fill="#33413a"/><rect x="220" y="272" width="11" height="22" fill="#4f7a52"/><rect x="255" y="272" width="11" height="22" fill="#4f7a52"/>
<rect x="290" y="296" width="16" height="16" fill="#33413a"/>
<path d="M146 283h22M157 272v22M232 283h22M243 272v22" stroke="#e8dcc2" stroke-width="1.2" opacity=".6"/>
<path d="M60 520c40-70 50-120 70-176 8-22 30-24 40-12 16 20-10 60 0 100s40 50 60 88z" fill="url(#mc-water)"/>
<path d="M92 400c10-4 20-2 28 2M104 430c12-4 22-2 32 3M84 470c14-5 28-3 40 3M130 360c6-3 12-2 18 1M150 488c12-4 24-2 34 4" stroke="#d6eef2" stroke-width="1.6" stroke-linecap="round" fill="none" opacity=".8"/>
<path d="M128 330v-46h18v46z" fill="#9c8462"/>
<g class="wheel">
<circle cx="112" cy="306" r="34" fill="none" stroke="#5b3b24" stroke-width="5"/>
<circle cx="112" cy="306" r="22" fill="none" stroke="#6a4429" stroke-width="2.4"/>
<path d="M117 306L143 306M115.5 309.5L133.9 327.9M112 311L112 337M108.5 309.5L90.1 327.9M107 306L81 306M108.5 302.5L90.1 284.1M112 301L112 275M115.5 302.5L133.9 284.1" stroke="#5b3b24" stroke-width="3" stroke-linecap="round"/>
<rect x="141" y="302" width="9" height="8" rx="1" fill="#6a4429" transform="rotate(0 112 306)"/><rect x="141" y="302" width="9" height="8" rx="1" fill="#6a4429" transform="rotate(30 112 306)"/><rect x="141" y="302" width="9" height="8" rx="1" fill="#6a4429" transform="rotate(60 112 306)"/><rect x="141" y="302" width="9" height="8" rx="1" fill="#6a4429" transform="rotate(90 112 306)"/><rect x="141" y="302" width="9" height="8" rx="1" fill="#6a4429" transform="rotate(120 112 306)"/><rect x="141" y="302" width="9" height="8" rx="1" fill="#6a4429" transform="rotate(150 112 306)"/><rect x="141" y="302" width="9" height="8" rx="1" fill="#6a4429" transform="rotate(180 112 306)"/><rect x="141" y="302" width="9" height="8" rx="1" fill="#6a4429" transform="rotate(210 112 306)"/><rect x="141" y="302" width="9" height="8" rx="1" fill="#6a4429" transform="rotate(240 112 306)"/><rect x="141" y="302" width="9" height="8" rx="1" fill="#6a4429" transform="rotate(270 112 306)"/><rect x="141" y="302" width="9" height="8" rx="1" fill="#6a4429" transform="rotate(300 112 306)"/><rect x="141" y="302" width="9" height="8" rx="1" fill="#6a4429" transform="rotate(330 112 306)"/>
<circle cx="112" cy="306" r="5.5" fill="#3d2717"/>
</g>
<path d="M80 340c4 10 2 22-2 30M88 342c2 8 2 16 0 24M72 336c2 8 0 18-4 24" stroke="#d6eef2" stroke-width="1.6" stroke-linecap="round" fill="none" opacity=".75"/>
</g>
<g data-depth="0.9">
<g class="sway" data-sway="skew" data-origin="200 510"><path d="M333.8 510q3.7 -15.8 12.3 -26.3" fill="none" stroke="#86a24c" stroke-width="2.7" stroke-linecap="round"/><path d="M444.1 510q4 -15.5 13.2 -25.9" fill="none" stroke="#5f7d36" stroke-width="2.9" stroke-linecap="round"/><path d="M353.4 510q3.4 -19.5 11.3 -32.5" fill="none" stroke="#4c6a2c" stroke-width="2.7" stroke-linecap="round"/><path d="M396.7 510q1.8 -19.1 6.1 -31.8" fill="none" stroke="#5f7d36" stroke-width="3" stroke-linecap="round"/><path d="M295.4 510q2.4 -32.7 7.9 -54.4" fill="none" stroke="#5f7d36" stroke-width="3" stroke-linecap="round"/><path d="M83.5 510q2.4 -15.8 7.9 -26.3" fill="none" stroke="#4c6a2c" stroke-width="1.6" stroke-linecap="round"/><path d="M401.9 510q4.6 -18.9 15.4 -31.5" fill="none" stroke="#6f8f3f" stroke-width="1.7" stroke-linecap="round"/><path d="M66.5 510q3.6 -31 12.2 -51.7" fill="none" stroke="#5f7d36" stroke-width="2.3" stroke-linecap="round"/><path d="M174.3 510q3 -19.9 10 -33.1" fill="none" stroke="#86a24c" stroke-width="2.1" stroke-linecap="round"/><path d="M187.9 510q4.3 -21.1 14.3 -35.1" fill="none" stroke="#6f8f3f" stroke-width="2.1" stroke-linecap="round"/><path d="M379.7 510q3.5 -17.9 11.8 -29.8" fill="none" stroke="#5f7d36" stroke-width="2.9" stroke-linecap="round"/><path d="M99.2 510q2.3 -32.6 7.8 -54.4" fill="none" stroke="#6f8f3f" stroke-width="1.6" stroke-linecap="round"/><path d="M428.1 510q3.8 -20.8 12.5 -34.7" fill="none" stroke="#4c6a2c" stroke-width="3.1" stroke-linecap="round"/><path d="M54.5 510q3 -31.3 10.1 -52.1" fill="none" stroke="#5f7d36" stroke-width="2.2" stroke-linecap="round"/><path d="M106.9 510q1.9 -14.2 6.2 -23.7" fill="none" stroke="#5f7d36" stroke-width="2.4" stroke-linecap="round"/><path d="M339.9 510q2.4 -32.4 7.8 -54" fill="none" stroke="#86a24c" stroke-width="3.1" stroke-linecap="round"/><path d="M158.1 510q4.4 -23.1 14.8 -38.5" fill="none" stroke="#86a24c" stroke-width="2.8" stroke-linecap="round"/><path d="M66.1 510q4.1 -16.8 13.8 -28" fill="none" stroke="#4c6a2c" stroke-width="2.5" stroke-linecap="round"/><path d="M-0.2 510q3.3 -23.3 11 -38.8" fill="none" stroke="#4c6a2c" stroke-width="2" stroke-linecap="round"/><path d="M121.1 510q3.5 -23.8 11.8 -39.6" fill="none" stroke="#4c6a2c" stroke-width="3" stroke-linecap="round"/><path d="M334 510q1.9 -31.4 6.3 -52.3" fill="none" stroke="#4c6a2c" stroke-width="2.1" stroke-linecap="round"/><path d="M105.3 510q1.8 -23.6 6.2 -39.3" fill="none" stroke="#4c6a2c" stroke-width="2.9" stroke-linecap="round"/><path d="M199 510q3.7 -17.6 12.3 -29.3" fill="none" stroke="#6f8f3f" stroke-width="1.6" stroke-linecap="round"/><path d="M104 510q2.1 -21.5 7 -35.9" fill="none" stroke="#6f8f3f" stroke-width="2" stroke-linecap="round"/><path d="M19.9 510q4.1 -33 13.6 -55" fill="none" stroke="#5f7d36" stroke-width="2.4" stroke-linecap="round"/><path d="M352.7 510q3.4 -15.9 11.3 -26.6" fill="none" stroke="#4c6a2c" stroke-width="2" stroke-linecap="round"/><path d="M390.7 510q2.6 -19.8 8.8 -32.9" fill="none" stroke="#5f7d36" stroke-width="2" stroke-linecap="round"/><path d="M387.1 510q3.4 -24.7 11.2 -41.2" fill="none" stroke="#6f8f3f" stroke-width="3.1" stroke-linecap="round"/><path d="M281.4 510q3.4 -27.9 11.5 -46.6" fill="none" stroke="#6f8f3f" stroke-width="1.7" stroke-linecap="round"/><path d="M205.7 510q3.1 -14.1 10.3 -23.6" fill="none" stroke="#4c6a2c" stroke-width="1.8" stroke-linecap="round"/><path d="M53.9 510q2 -25.8 6.6 -43.1" fill="none" stroke="#4c6a2c" stroke-width="2" stroke-linecap="round"/><path d="M297.7 510q2.3 -20 7.8 -33.3" fill="none" stroke="#4c6a2c" stroke-width="2.1" stroke-linecap="round"/><path d="M98.8 510q2.1 -32 7 -53.3" fill="none" stroke="#6f8f3f" stroke-width="2.6" stroke-linecap="round"/><path d="M446.9 510q2 -25.3 6.7 -42.1" fill="none" stroke="#86a24c" stroke-width="1.8" stroke-linecap="round"/><path d="M202.3 510q3 -21.9 9.9 -36.5" fill="none" stroke="#5f7d36" stroke-width="2.1" stroke-linecap="round"/><path d="M446.7 510q3.9 -24.8 13 -41.3" fill="none" stroke="#86a24c" stroke-width="3.1" stroke-linecap="round"/><path d="M8.9 510q3.9 -20.1 13 -33.5" fill="none" stroke="#86a24c" stroke-width="2.1" stroke-linecap="round"/><path d="M159.6 510q2.9 -28.7 9.6 -47.9" fill="none" stroke="#5f7d36" stroke-width="2" stroke-linecap="round"/><path d="M305.1 510q4.4 -26.1 14.5 -43.5" fill="none" stroke="#6f8f3f" stroke-width="1.9" stroke-linecap="round"/><path d="M165.8 510q3.6 -18.8 12 -31.4" fill="none" stroke="#6f8f3f" stroke-width="2.5" stroke-linecap="round"/><path d="M337.7 510q2.4 -28 7.9 -46.7" fill="none" stroke="#4c6a2c" stroke-width="2.2" stroke-linecap="round"/><path d="M384.5 510q3.6 -25.6 12 -42.6" fill="none" stroke="#6f8f3f" stroke-width="2.6" stroke-linecap="round"/><path d="M103.1 510q4.3 -25.5 14.4 -42.5" fill="none" stroke="#4c6a2c" stroke-width="3" stroke-linecap="round"/><path d="M181.4 510q2.8 -14 9.3 -23.4" fill="none" stroke="#5f7d36" stroke-width="1.9" stroke-linecap="round"/><path d="M142.1 510q2.2 -24.3 7.4 -40.5" fill="none" stroke="#86a24c" stroke-width="2.9" stroke-linecap="round"/><path d="M176.7 510q3 -18.9 9.9 -31.5" fill="none" stroke="#86a24c" stroke-width="2.3" stroke-linecap="round"/><path d="M405.9 510q4.1 -13.6 13.8 -22.6" fill="none" stroke="#5f7d36" stroke-width="2" stroke-linecap="round"/><path d="M113.6 510q3.3 -20.9 11 -34.9" fill="none" stroke="#86a24c" stroke-width="2.4" stroke-linecap="round"/><path d="M441.5 510q1.9 -21.7 6.4 -36.1" fill="none" stroke="#4c6a2c" stroke-width="3.1" stroke-linecap="round"/><path d="M214.9 510q3.7 -32.1 12.3 -53.6" fill="none" stroke="#86a24c" stroke-width="3.1" stroke-linecap="round"/><path d="M220.2 510q2.1 -32.5 7.2 -54.1" fill="none" stroke="#5f7d36" stroke-width="2.5" stroke-linecap="round"/><path d="M263.3 510q3.1 -17.8 10.4 -29.6" fill="none" stroke="#4c6a2c" stroke-width="3" stroke-linecap="round"/><path d="M434.3 510q4.3 -18.4 14.4 -30.7" fill="none" stroke="#4c6a2c" stroke-width="2.5" stroke-linecap="round"/><path d="M16.1 510q2.5 -31.7 8.2 -52.8" fill="none" stroke="#4c6a2c" stroke-width="3" stroke-linecap="round"/><path d="M287.1 510q4.7 -21.7 15.7 -36.1" fill="none" stroke="#4c6a2c" stroke-width="2" stroke-linecap="round"/><path d="M372.4 510q2.6 -13.5 8.7 -22.6" fill="none" stroke="#6f8f3f" stroke-width="1.7" stroke-linecap="round"/><path d="M390.9 510q2.6 -17.5 8.7 -29.1" fill="none" stroke="#86a24c" stroke-width="2.2" stroke-linecap="round"/><path d="M154 510q2 -24.2 6.5 -40.3" fill="none" stroke="#86a24c" stroke-width="2" stroke-linecap="round"/><path d="M-37.2 510q2.1 -32.5 7.1 -54.1" fill="none" stroke="#86a24c" stroke-width="1.9" stroke-linecap="round"/><path d="M281.6 510q2.3 -22.4 7.5 -37.4" fill="none" stroke="#5f7d36" stroke-width="3.2" stroke-linecap="round"/><path d="M61.7 510q1.8 -15.6 6 -26.1" fill="none" stroke="#5f7d36" stroke-width="2.6" stroke-linecap="round"/><path d="M321.4 510q2 -32.8 6.8 -54.6" fill="none" stroke="#86a24c" stroke-width="2.8" stroke-linecap="round"/><path d="M188 510q4.8 -16.7 15.9 -27.9" fill="none" stroke="#6f8f3f" stroke-width="3" stroke-linecap="round"/><path d="M346.9 510q4.6 -27.7 15.4 -46.2" fill="none" stroke="#86a24c" stroke-width="1.6" stroke-linecap="round"/><path d="M177.8 510q3.1 -26.8 10.3 -44.7" fill="none" stroke="#4c6a2c" stroke-width="2" stroke-linecap="round"/><path d="M142.3 510q3.1 -22.9 10.2 -38.2" fill="none" stroke="#86a24c" stroke-width="1.8" stroke-linecap="round"/><path d="M7.4 510q3.7 -32.9 12.4 -54.8" fill="none" stroke="#6f8f3f" stroke-width="2.9" stroke-linecap="round"/><path d="M128.1 510q1.8 -25 6.1 -41.7" fill="none" stroke="#5f7d36" stroke-width="2.2" stroke-linecap="round"/><path d="M293.2 510q3.7 -15.3 12.5 -25.5" fill="none" stroke="#4c6a2c" stroke-width="2.2" stroke-linecap="round"/><path d="M220.2 510q2.1 -15.5 6.9 -25.8" fill="none" stroke="#4c6a2c" stroke-width="2.6" stroke-linecap="round"/><path d="M34 482q-2-16 0-30" stroke="#55702f" stroke-width="1.4" fill="none"/><circle cx="34" cy="452" r="6.2" fill="#d8402c"/><circle cx="34" cy="452" r="1.6" fill="#2a1d18"/><path d="M70 500q-2-16 0-30" stroke="#55702f" stroke-width="1.4" fill="none"/><circle cx="70" cy="470" r="5.7" fill="#d8402c"/><circle cx="70" cy="470" r="1.6" fill="#2a1d18"/><path d="M112 476q-2-16 0-30" stroke="#55702f" stroke-width="1.4" fill="none"/><circle cx="112" cy="446" r="5.2" fill="#d8402c"/><circle cx="112" cy="446" r="1.6" fill="#2a1d18"/><path d="M300 488q-2-16 0-30" stroke="#55702f" stroke-width="1.4" fill="none"/><circle cx="300" cy="458" r="6.4" fill="#d8402c"/><circle cx="300" cy="458" r="1.6" fill="#2a1d18"/><path d="M338 474q-2-16 0-30" stroke="#55702f" stroke-width="1.4" fill="none"/><circle cx="338" cy="444" r="5.9" fill="#d8402c"/><circle cx="338" cy="444" r="1.6" fill="#2a1d18"/><path d="M372 500q-2-16 0-30" stroke="#55702f" stroke-width="1.4" fill="none"/><circle cx="372" cy="470" r="5.4" fill="#d8402c"/><circle cx="372" cy="470" r="1.6" fill="#2a1d18"/><path d="M262 508q-2-16 0-30" stroke="#55702f" stroke-width="1.4" fill="none"/><circle cx="262" cy="478" r="6.8" fill="#d8402c"/><circle cx="262" cy="478" r="1.6" fill="#2a1d18"/><path d="M16 510q-2-16 0-30" stroke="#55702f" stroke-width="1.4" fill="none"/><circle cx="16" cy="480" r="5" fill="#d8402c"/><circle cx="16" cy="480" r="1.6" fill="#2a1d18"/><path d="M150 502q-2-16 0-30" stroke="#55702f" stroke-width="1.4" fill="none"/><circle cx="150" cy="472" r="5.7" fill="#d8402c"/><circle cx="150" cy="472" r="1.6" fill="#2a1d18"/></g>
<path d="M330 520v-70M372 520v-66M290 520v-62" stroke="#7b5838" stroke-width="6" stroke-linecap="round"/>
<path d="M282 470l100-6M282 490l100-6" stroke="#8b6644" stroke-width="4" stroke-linecap="round"/>
</g>
</svg>
<svg class="photo" data-photo viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" role="img" aria-label="A tall blue townhouse with white trim, a balcony full of flowers and a stepped gable, between other narrow coloured houses along a canal at dusk; the windows light up one by one and the houses shine in the water" hidden>
<defs>
<linearGradient id="bt-sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#202a57"/><stop offset=".45" stop-color="#5d4c86"/><stop offset=".78" stop-color="#d9846f"/><stop offset="1" stop-color="#f3b986"/></linearGradient>
<linearGradient id="bt-water" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#3b3f73"/><stop offset="1" stop-color="#1a1f43"/></linearGradient>
</defs>
<g data-depth="0.06">
<rect x="-60" y="-60" width="520" height="440" fill="url(#bt-sky)"/>
<path d="M156.4 59.6h81.1" stroke="#f5b98f" stroke-width="1.8" stroke-linecap="round" opacity="0.5"/><path d="M239.5 115.5h75" stroke="#f5b98f" stroke-width="1.2" stroke-linecap="round" opacity="0.3"/><path d="M154.6 62.6h78" stroke="#f5b98f" stroke-width="2.6" stroke-linecap="round" opacity="0.5"/><path d="M287.2 84.1h65" stroke="#f5b98f" stroke-width="2.1" stroke-linecap="round" opacity="0.4"/><path d="M230.5 101.5h52.8" stroke="#f5b98f" stroke-width="1.8" stroke-linecap="round" opacity="0.3"/><path d="M10 44.7h88.3" stroke="#f5b98f" stroke-width="2.4" stroke-linecap="round" opacity="0.5"/>
</g>
<g data-depth="0.16">
<path d="M-60 300h40v-30h30v18h24v-40h8v-24h8v24h8v40h30v-20h40v-12a26 26 0 0 1 52 0v12h40v20h36v-34h22v34h40v-16h40v16h60v100H-60z" fill="#3c3866"/>
</g>
<g data-depth="0.46">
<rect x="-30" y="196" width="74" height="164" fill="#c97b62"/><path d="M-30 196h13.32v-14h11.84v-14h23.68v14h11.84v14h13.32z" fill="#c97b62"/><rect x="-30" y="196" width="4" height="164" fill="#000" opacity=".12"/><rect x="-14.7" y="212" width="14" height="22" fill="#2a2c46"/><path d="M-14.7 221.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="14.7" y="212" width="14" height="22" fill="#2a2c46"/><path d="M14.7 221.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="-14.7" y="250" width="14" height="22" fill="#2a2c46"/><path d="M-14.7 259.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="14.7" y="250" width="14" height="22" fill="#2a2c46"/><path d="M14.7 259.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="-14.7" y="288" width="14" height="22" fill="#2a2c46"/><path d="M-14.7 297.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="14.7" y="288" width="14" height="22" fill="#2a2c46"/><path d="M14.7 297.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><path d="M-1 360v-26h16v26z" fill="#3a2a2a"/><rect x="44" y="170" width="68" height="190" fill="#d8a75a"/><path d="M48 170c6.800000000000001 0 10.88-10 13.600000000000001-22 2.72-12 8.16-18 17.68-18s14.96 6 17.68 18 6.800000000000001 22 13.600000000000001 22z" fill="#d8a75a"/><rect x="44" y="170" width="4" height="190" fill="#000" opacity=".12"/><rect x="57.3" y="192.5" width="14" height="22" fill="#2a2c46"/><path d="M57.3 202.4h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="84.7" y="192.5" width="14" height="22" fill="#2a2c46"/><path d="M84.7 202.4h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="57.3" y="237" width="14" height="22" fill="#2a2c46"/><path d="M57.3 246.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="84.7" y="237" width="14" height="22" fill="#2a2c46"/><path d="M84.7 246.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="57.3" y="281.5" width="14" height="22" fill="#2a2c46"/><path d="M57.3 291.4h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="84.7" y="281.5" width="14" height="22" fill="#2a2c46"/><path d="M84.7 291.4h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><path d="M70 360v-26h16v26z" fill="#3a2a2a"/><rect x="238" y="186" width="66" height="174" fill="#e5d3b4"/><path d="M244 186l9.24-10v-24h29.04v24l9.24 10z" fill="#e5d3b4"/><circle cx="271" cy="164" r="5" fill="#2a2c46" opacity=".55"/><rect x="238" y="186" width="4" height="174" fill="#000" opacity=".12"/><rect x="250.7" y="204.5" width="14" height="22" fill="#2a2c46"/><path d="M250.7 214.4h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="277.3" y="204.5" width="14" height="22" fill="#2a2c46"/><path d="M277.3 214.4h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="250.7" y="245" width="14" height="22" fill="#2a2c46"/><path d="M250.7 254.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="277.3" y="245" width="14" height="22" fill="#2a2c46"/><path d="M277.3 254.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="250.7" y="285.5" width="14" height="22" fill="#2a2c46"/><path d="M250.7 295.4h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="277.3" y="285.5" width="14" height="22" fill="#2a2c46"/><path d="M277.3 295.4h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><path d="M263 360v-26h16v26z" fill="#3a2a2a"/><rect x="304" y="166" width="72" height="194" fill="#6f8d69"/><path d="M304 166h12.959999999999999v-14h11.52v-14h23.04v14h11.52v14h12.959999999999999z" fill="#6f8d69"/><rect x="304" y="166" width="4" height="194" fill="#000" opacity=".12"/><rect x="318.7" y="189.5" width="14" height="22" fill="#2a2c46"/><path d="M318.7 199.4h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="347.3" y="189.5" width="14" height="22" fill="#2a2c46"/><path d="M347.3 199.4h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="318.7" y="235" width="14" height="22" fill="#2a2c46"/><path d="M318.7 244.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="347.3" y="235" width="14" height="22" fill="#2a2c46"/><path d="M347.3 244.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="318.7" y="280.5" width="14" height="22" fill="#2a2c46"/><path d="M318.7 290.4h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="347.3" y="280.5" width="14" height="22" fill="#2a2c46"/><path d="M347.3 290.4h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><path d="M332 360v-26h16v26z" fill="#3a2a2a"/><rect x="376" y="200" width="74" height="160" fill="#b8655e"/><path d="M380 200c7.4 0 11.84-10 14.8-22 2.96-12 8.879999999999999-18 19.240000000000002-18s16.28 6 19.240000000000002 18 7.4 22 14.8 22z" fill="#b8655e"/><rect x="376" y="200" width="4" height="160" fill="#000" opacity=".12"/><rect x="391.3" y="215" width="14" height="22" fill="#2a2c46"/><path d="M391.3 224.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="420.7" y="215" width="14" height="22" fill="#2a2c46"/><path d="M420.7 224.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="391.3" y="252" width="14" height="22" fill="#2a2c46"/><path d="M391.3 261.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="420.7" y="252" width="14" height="22" fill="#2a2c46"/><path d="M420.7 261.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="391.3" y="289" width="14" height="22" fill="#2a2c46"/><path d="M391.3 298.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><rect x="420.7" y="289" width="14" height="22" fill="#2a2c46"/><path d="M420.7 298.9h14" stroke="#f4ead6" stroke-width="1" opacity=".5"/><path d="M405 360v-26h16v26z" fill="#3a2a2a"/>
<rect x="112" y="132" width="126" height="228" fill="#3d6ca6"/><path d="M122 132l14-12v-16h10v-14h12v-14h34v14h12v14h10v16l14 12z" fill="#3d6ca6"/><path d="M120 132h110" stroke="#f2ead9" stroke-width="3"/><path d="M112 192h126M112 256h126" stroke="#f2ead9" stroke-width="2.2" opacity=".9"/><circle cx="175" cy="106" r="8" fill="#f2ead9"/><circle cx="175" cy="106" r="5" fill="#2a2c46"/><rect class="lit" x="170" y="101" width="10" height="10" rx="5" fill="#ffcf7c" opacity="0"/><rect x="124" y="144" width="26" height="40" fill="#f2ead9"/><rect x="126" y="146" width="22" height="36" fill="#26283f"/><path d="M137 146v36M126 161h22" stroke="#f2ead9" stroke-width="1.4"/><rect x="162" y="144" width="26" height="40" fill="#f2ead9"/><rect x="164" y="146" width="22" height="36" fill="#26283f"/><path d="M175 146v36M164 161h22" stroke="#f2ead9" stroke-width="1.4"/><rect x="200" y="144" width="26" height="40" fill="#f2ead9"/><rect x="202" y="146" width="22" height="36" fill="#26283f"/><path d="M213 146v36M202 161h22" stroke="#f2ead9" stroke-width="1.4"/><rect x="124" y="206" width="26" height="40" fill="#f2ead9"/><rect x="126" y="208" width="22" height="36" fill="#26283f"/><path d="M137 208v36M126 223h22" stroke="#f2ead9" stroke-width="1.4"/><rect x="162" y="206" width="26" height="40" fill="#f2ead9"/><rect x="164" y="208" width="22" height="36" fill="#26283f"/><path d="M175 208v36M164 223h22" stroke="#f2ead9" stroke-width="1.4"/><rect x="200" y="206" width="26" height="40" fill="#f2ead9"/><rect x="202" y="208" width="22" height="36" fill="#26283f"/><path d="M213 208v36M202 223h22" stroke="#f2ead9" stroke-width="1.4"/><rect x="124" y="270" width="26" height="40" fill="#f2ead9"/><rect x="126" y="272" width="22" height="36" fill="#26283f"/><path d="M137 272v36M126 287h22" stroke="#f2ead9" stroke-width="1.4"/><rect x="200" y="270" width="26" height="40" fill="#f2ead9"/><rect x="202" y="272" width="22" height="36" fill="#26283f"/><path d="M213 272v36M202 287h22" stroke="#f2ead9" stroke-width="1.4"/><path d="M120 248h110" stroke="#20243a" stroke-width="3"/><path d="M124 236v12M130 236v12M136 236v12M142 236v12M148 236v12M154 236v12M160 236v12M166 236v12M172 236v12M178 236v12M184 236v12M190 236v12M196 236v12M202 236v12M208 236v12M214 236v12M220 236v12M226 236v12M120 236h110" stroke="#20243a" stroke-width="1.6"/><circle cx="205.6" cy="233.6" r="3.8" fill="#f08aa0"/><circle cx="209.1" cy="236.8" r="5.7" fill="#e5576b"/><circle cx="182" cy="237" r="5" fill="#e5576b"/><circle cx="188.4" cy="232.7" r="3.3" fill="#f4c25b"/><circle cx="213.8" cy="234.4" r="6" fill="#f4c25b"/><circle cx="201.9" cy="234.7" r="3.6" fill="#f4c25b"/><circle cx="141.7" cy="233.8" r="5.3" fill="#f4c25b"/><circle cx="146.1" cy="234.1" r="4.2" fill="#f4c25b"/><circle cx="155.6" cy="232.6" r="3" fill="#e5576b"/><circle cx="171.6" cy="231.2" r="3.7" fill="#f4c25b"/><circle cx="189.7" cy="230.4" r="4.2" fill="#f08aa0"/><circle cx="196.4" cy="235.5" r="3.7" fill="#f4c25b"/><circle cx="157.7" cy="235.6" r="3.9" fill="#e5576b"/><circle cx="214.1" cy="232.5" r="2.6" fill="#e5576b"/><circle cx="171.4" cy="236.5" r="3.3" fill="#f08aa0"/><circle cx="199.5" cy="235.9" r="5.9" fill="#f4c25b"/><circle cx="132.3" cy="236.1" r="3.5" fill="#e5576b"/><circle cx="193.2" cy="235.6" r="4.4" fill="#f4c25b"/><circle cx="199.7" cy="235.1" r="5.1" fill="#f4c25b"/><circle cx="142.5" cy="233.3" r="3.9" fill="#f4c25b"/><circle cx="133.9" cy="234.5" r="4.2" fill="#e5576b"/><circle cx="160.1" cy="237.6" r="2.7" fill="#e5576b"/><circle cx="190.6" cy="234.6" r="3.3" fill="#f08aa0"/><circle cx="169.7" cy="234.1" r="3.4" fill="#e5576b"/><circle cx="151.7" cy="236.7" r="2.9" fill="#e5576b"/><circle cx="171" cy="231.8" r="2.9" fill="#f08aa0"/><circle cx="198.1" cy="236.9" r="2.7" fill="#f08aa0"/><circle cx="195.9" cy="230.4" r="3.6" fill="#f08aa0"/><circle cx="167.2" cy="230.7" r="5.8" fill="#f4c25b"/><circle cx="183.4" cy="236.8" r="4.5" fill="#f08aa0"/><circle cx="137.1" cy="233.3" r="5.3" fill="#f08aa0"/><circle cx="170.7" cy="230.6" r="3.3" fill="#e5576b"/><circle cx="198.9" cy="237.2" r="4.4" fill="#f4c25b"/><circle cx="199.5" cy="233.9" r="2.6" fill="#e5576b"/><circle cx="178.5" cy="230.3" r="3.4" fill="#f4c25b"/><circle cx="212.2" cy="232.1" r="5" fill="#e5576b"/><path d="M158 352v-40a17 17 0 0 1 34 0v40z" fill="#f2ead9"/><path d="M161 352v-40a14 14 0 0 1 28 0v40z" fill="#1f3f6b"/><path d="M152 352h46v4h-46zM146 356h58v4h-58z" fill="#c9bfae"/>
<g class="lights"><rect class="lit" x="-14.7" y="212" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="-14.7" y="250" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="-14.7" y="288" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="14.7" y="288" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="57.3" y="192.5" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="84.7" y="237" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="57.3" y="281.5" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="250.7" y="204.5" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="277.3" y="285.5" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="318.7" y="189.5" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="318.7" y="235" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="347.3" y="235" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="318.7" y="280.5" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="391.3" y="215" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="391.3" y="252" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="391.3" y="289" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="420.7" y="289" width="14" height="22" fill="#ffcf7c" opacity="0"/><rect class="lit" x="126" y="146" width="22" height="36" fill="#ffd38a" opacity="0"/><rect class="lit" x="164" y="146" width="22" height="36" fill="#ffd38a" opacity="0"/><rect class="lit" x="202" y="146" width="22" height="36" fill="#ffd38a" opacity="0"/><rect class="lit" x="126" y="208" width="22" height="36" fill="#ffd38a" opacity="0"/><rect class="lit" x="164" y="208" width="22" height="36" fill="#ffd38a" opacity="0"/><rect class="lit" x="202" y="208" width="22" height="36" fill="#ffd38a" opacity="0"/><rect class="lit" x="126" y="272" width="22" height="36" fill="#ffd38a" opacity="0"/><rect class="lit" x="202" y="272" width="22" height="36" fill="#ffd38a" opacity="0"/><path class="lit" d="M163 312a12 12 0 0 1 24 0z" fill="#ffd38a" opacity="0"/></g>
<path d="M-60 360h520v14H-60z" fill="#6f6478"/>
<path d="M-60 360h520" stroke="#8d8298" stroke-width="2"/>
<path d="M40 360v-60" stroke="#1d1f33" stroke-width="3"/><path d="M33 300h14l-2-14h-10z" fill="#1d1f33"/><rect x="36" y="288" width="8" height="10" fill="#ffd38a"/>
</g>
<g data-depth="0.7">
<rect x="-60" y="374" width="520" height="160" fill="url(#bt-water)"/>
<path d="M-3 484.4h36" stroke="#ffcf7c" stroke-width="3" stroke-linecap="round" opacity="0.3"/><path d="M-18.4 484.7h27.7" stroke="#e5d3b4" stroke-width="3.7" stroke-linecap="round" opacity="0.4"/><path d="M13.8 491.1h37.1" stroke="#3d6ca6" stroke-width="3.7" stroke-linecap="round" opacity="0.3"/><path d="M347.6 428h14.1" stroke="#3d6ca6" stroke-width="3.1" stroke-linecap="round" opacity="0.4"/><path d="M244.8 387.2h18.9" stroke="#e5d3b4" stroke-width="2.3" stroke-linecap="round" opacity="0.6"/><path d="M47.5 387.6h26.3" stroke="#e5d3b4" stroke-width="1.7" stroke-linecap="round" opacity="0.5"/><path d="M43.6 434.8h27.5" stroke="#c97b62" stroke-width="3.2" stroke-linecap="round" opacity="0.5"/><path d="M274.3 444.4h38.5" stroke="#3d6ca6" stroke-width="1.6" stroke-linecap="round" opacity="0.4"/><path d="M139.7 424.3h35.7" stroke="#3d6ca6" stroke-width="1.8" stroke-linecap="round" opacity="0.3"/><path d="M32.4 488.1h20.4" stroke="#d8a75a" stroke-width="1.8" stroke-linecap="round" opacity="0.4"/><path d="M9.6 485.7h27.3" stroke="#6f8d69" stroke-width="2.2" stroke-linecap="round" opacity="0.4"/><path d="M-20.9 491h19.4" stroke="#3d6ca6" stroke-width="2.1" stroke-linecap="round" opacity="0.5"/><path d="M384.6 404.9h10.6" stroke="#d8a75a" stroke-width="3.3" stroke-linecap="round" opacity="0.5"/><path d="M224.5 452.9h12" stroke="#ffcf7c" stroke-width="2.7" stroke-linecap="round" opacity="0.3"/><path d="M55.2 452.2h40.2" stroke="#c97b62" stroke-width="3.2" stroke-linecap="round" opacity="0.5"/><path d="M131.5 392.7h24.9" stroke="#3d6ca6" stroke-width="2.1" stroke-linecap="round" opacity="0.5"/><path d="M192 483.4h36.6" stroke="#b8655e" stroke-width="1.6" stroke-linecap="round" opacity="0.5"/><path d="M370.5 384.8h23.6" stroke="#3d6ca6" stroke-width="2.7" stroke-linecap="round" opacity="0.5"/><path d="M222.8 470h22.2" stroke="#e5d3b4" stroke-width="2.2" stroke-linecap="round" opacity="0.4"/><path d="M385.6 462.7h34" stroke="#ffcf7c" stroke-width="2.2" stroke-linecap="round" opacity="0.5"/><path d="M96.9 400.8h30.9" stroke="#ffcf7c" stroke-width="1.9" stroke-linecap="round" opacity="0.4"/><path d="M408.7 443.8h37.4" stroke="#ffcf7c" stroke-width="3.6" stroke-linecap="round" opacity="0.3"/><path d="M290.6 487.1h40.2" stroke="#3d6ca6" stroke-width="3.7" stroke-linecap="round" opacity="0.5"/><path d="M81.8 466h21.7" stroke="#d8a75a" stroke-width="3.8" stroke-linecap="round" opacity="0.5"/><path d="M139.7 451.5h30" stroke="#3d6ca6" stroke-width="3.6" stroke-linecap="round" opacity="0.6"/><path d="M279 450h38.6" stroke="#c97b62" stroke-width="3.4" stroke-linecap="round" opacity="0.5"/><path d="M130.1 490.2h23.3" stroke="#b8655e" stroke-width="3.2" stroke-linecap="round" opacity="0.6"/><path d="M159.5 400.3h25.8" stroke="#d8a75a" stroke-width="3.6" stroke-linecap="round" opacity="0.5"/><path d="M233.9 393.5h26.4" stroke="#e5d3b4" stroke-width="3.8" stroke-linecap="round" opacity="0.3"/><path d="M73.4 416h30.7" stroke="#e5d3b4" stroke-width="3.8" stroke-linecap="round" opacity="0.4"/><path d="M340.3 405.5h33.5" stroke="#3d6ca6" stroke-width="2.1" stroke-linecap="round" opacity="0.3"/><path d="M96.2 482.9h42.9" stroke="#3d6ca6" stroke-width="3.5" stroke-linecap="round" opacity="0.3"/><path d="M331.6 447h19.1" stroke="#ffcf7c" stroke-width="3.9" stroke-linecap="round" opacity="0.3"/><path d="M249.9 478.2h20.2" stroke="#e5d3b4" stroke-width="2.8" stroke-linecap="round" opacity="0.3"/><path d="M189.1 396.7h33" stroke="#3d6ca6" stroke-width="2.6" stroke-linecap="round" opacity="0.6"/><path d="M36.1 475.3h11.9" stroke="#6f8d69" stroke-width="4" stroke-linecap="round" opacity="0.6"/><path d="M268 461.1h36.9" stroke="#3d6ca6" stroke-width="3.1" stroke-linecap="round" opacity="0.5"/><path d="M-16.3 393.8h15.4" stroke="#c97b62" stroke-width="1.6" stroke-linecap="round" opacity="0.3"/><path d="M216.3 484.5h39.1" stroke="#c97b62" stroke-width="2.3" stroke-linecap="round" opacity="0.5"/><path d="M273.1 456h30.3" stroke="#6f8d69" stroke-width="3.7" stroke-linecap="round" opacity="0.4"/><path d="M199.2 442.5h29.3" stroke="#3d6ca6" stroke-width="2.9" stroke-linecap="round" opacity="0.6"/><path d="M309.9 443.4h23.6" stroke="#3d6ca6" stroke-width="3.4" stroke-linecap="round" opacity="0.4"/><path d="M-27.2 455.6h42.3" stroke="#b8655e" stroke-width="2.6" stroke-linecap="round" opacity="0.3"/><path d="M300.9 468.4h33.1" stroke="#3d6ca6" stroke-width="3.6" stroke-linecap="round" opacity="0.6"/><path d="M120.1 420.3h24.9" stroke="#ffcf7c" stroke-width="1.9" stroke-linecap="round" opacity="0.3"/><path d="M372 427.4h16.8" stroke="#3d6ca6" stroke-width="3.3" stroke-linecap="round" opacity="0.5"/>
<path d="M226 432h112l-12 14h-92z" fill="#151a36"/><path d="M252 432v-12h40v12z" fill="#1c2244"/><path d="M226 448h112" stroke="#f3b986" stroke-width="1.2" opacity=".35"/>
</g>
<g data-depth="0.95">
<g class="sway" data-origin="440 -20">
<path d="M460 -20c-40 30-80 50-140 60" fill="none" stroke="#151c36" stroke-width="5" stroke-linecap="round"/>
<ellipse cx="342.5" cy="74.7" rx="14.3" ry="6" transform="rotate(96 342.5 74.7)" fill="#232d52"/><ellipse cx="405.5" cy="30.5" rx="13.4" ry="5.6" transform="rotate(138 405.5 30.5)" fill="#232d52"/><ellipse cx="409.6" cy="43.8" rx="13.5" ry="5.7" transform="rotate(164 409.6 43.8)" fill="#232d52"/><ellipse cx="313" cy="30.9" rx="11.4" ry="4.8" transform="rotate(83 313 30.9)" fill="#1b2442"/><ellipse cx="354.1" cy="79.1" rx="13.6" ry="5.7" transform="rotate(51 354.1 79.1)" fill="#232d52"/><ellipse cx="296.7" cy="50.6" rx="13.9" ry="5.8" transform="rotate(91 296.7 50.6)" fill="#1b2442"/><ellipse cx="362.4" cy="73.9" rx="12.1" ry="5.1" transform="rotate(104 362.4 73.9)" fill="#232d52"/><ellipse cx="293.4" cy="50.6" rx="10.4" ry="4.4" transform="rotate(141 293.4 50.6)" fill="#2b3560"/><ellipse cx="311.4" cy="48.3" rx="13.9" ry="5.9" transform="rotate(157 311.4 48.3)" fill="#232d52"/><ellipse cx="392.7" cy="49.1" rx="14.5" ry="6.1" transform="rotate(75 392.7 49.1)" fill="#1b2442"/><ellipse cx="416" cy="34.5" rx="11.9" ry="5" transform="rotate(87 416 34.5)" fill="#1b2442"/><ellipse cx="307.2" cy="59.9" rx="10.6" ry="4.4" transform="rotate(130 307.2 59.9)" fill="#1b2442"/><ellipse cx="400.6" cy="40.3" rx="14.4" ry="6" transform="rotate(84 400.6 40.3)" fill="#1b2442"/><ellipse cx="316.5" cy="56.6" rx="14.9" ry="6.2" transform="rotate(129 316.5 56.6)" fill="#2b3560"/><ellipse cx="421.6" cy="42.3" rx="10.8" ry="4.5" transform="rotate(40 421.6 42.3)" fill="#232d52"/><ellipse cx="411.8" cy="24.7" rx="12.2" ry="5.1" transform="rotate(1 411.8 24.7)" fill="#1b2442"/><ellipse cx="380.3" cy="47.6" rx="10" ry="4.2" transform="rotate(148 380.3 47.6)" fill="#232d52"/><ellipse cx="350.7" cy="16.5" rx="12.9" ry="5.4" transform="rotate(144 350.7 16.5)" fill="#2b3560"/><ellipse cx="304.6" cy="41.1" rx="12.7" ry="5.3" transform="rotate(143 304.6 41.1)" fill="#2b3560"/><ellipse cx="425.3" cy="46.8" rx="11.8" ry="5" transform="rotate(104 425.3 46.8)" fill="#232d52"/><ellipse cx="321.8" cy="68.2" rx="11.7" ry="4.9" transform="rotate(39 321.8 68.2)" fill="#1b2442"/><ellipse cx="410.9" cy="42.1" rx="13.4" ry="5.6" transform="rotate(46 410.9 42.1)" fill="#232d52"/><ellipse cx="377.7" cy="11.9" rx="11.2" ry="4.7" transform="rotate(130 377.7 11.9)" fill="#2b3560"/><ellipse cx="383.8" cy="4.3" rx="14.1" ry="5.9" transform="rotate(132 383.8 4.3)" fill="#2b3560"/><ellipse cx="351.7" cy="36.4" rx="12.8" ry="5.4" transform="rotate(145 351.7 36.4)" fill="#232d52"/><ellipse cx="330.3" cy="55.9" rx="13.3" ry="5.6" transform="rotate(107 330.3 55.9)" fill="#2b3560"/><ellipse cx="423.9" cy="39.3" rx="12" ry="5" transform="rotate(136 423.9 39.3)" fill="#1b2442"/><ellipse cx="349.3" cy="40.1" rx="12.2" ry="5.1" transform="rotate(81 349.3 40.1)" fill="#1b2442"/><ellipse cx="326.8" cy="66.1" rx="11.3" ry="4.8" transform="rotate(30 326.8 66.1)" fill="#1b2442"/><ellipse cx="362.5" cy="56.5" rx="12.1" ry="5.1" transform="rotate(39 362.5 56.5)" fill="#2b3560"/><ellipse cx="341.4" cy="69" rx="11.8" ry="4.9" transform="rotate(94 341.4 69)" fill="#2b3560"/><ellipse cx="328.1" cy="21.9" rx="12.8" ry="5.4" transform="rotate(150 328.1 21.9)" fill="#1b2442"/><ellipse cx="320.6" cy="72.9" rx="9.3" ry="3.9" transform="rotate(108 320.6 72.9)" fill="#1b2442"/><ellipse cx="356.2" cy="30.7" rx="9.2" ry="3.8" transform="rotate(17 356.2 30.7)" fill="#2b3560"/><ellipse cx="354.8" cy="46.4" rx="13.9" ry="5.9" transform="rotate(81 354.8 46.4)" fill="#2b3560"/><ellipse cx="367.6" cy="61.6" rx="10.1" ry="4.2" transform="rotate(70 367.6 61.6)" fill="#1b2442"/><ellipse cx="318.6" cy="56.3" rx="13.6" ry="5.7" transform="rotate(165 318.6 56.3)" fill="#1b2442"/><ellipse cx="296.5" cy="24.6" rx="12.6" ry="5.3" transform="rotate(67 296.5 24.6)" fill="#2b3560"/><ellipse cx="411.3" cy="36.8" rx="12.2" ry="5.1" transform="rotate(123 411.3 36.8)" fill="#232d52"/><ellipse cx="388.2" cy="39.5" rx="9.5" ry="4" transform="rotate(96 388.2 39.5)" fill="#1b2442"/><ellipse cx="390.2" cy="12.1" rx="11.7" ry="4.9" transform="rotate(14 390.2 12.1)" fill="#232d52"/><ellipse cx="343.2" cy="61.6" rx="12.3" ry="5.2" transform="rotate(72 343.2 61.6)" fill="#232d52"/><ellipse cx="353.1" cy="24.8" rx="14.2" ry="6" transform="rotate(148 353.1 24.8)" fill="#1b2442"/><ellipse cx="360.3" cy="32.3" rx="11.7" ry="4.9" transform="rotate(18 360.3 32.3)" fill="#2b3560"/><ellipse cx="349.8" cy="38.9" rx="15" ry="6.3" transform="rotate(154 349.8 38.9)" fill="#2b3560"/><ellipse cx="380.5" cy="35.2" rx="13" ry="5.4" transform="rotate(118 380.5 35.2)" fill="#232d52"/>
</g>
<path d="M-60 476h180v40H-60z" fill="#161b33"/>
<path d="M-60 470h184" stroke="#262c4c" stroke-width="5" stroke-linecap="round"/>
<path d="M-40 470v30M0 470v30M40 470v30M80 470v30M118 470v30" stroke="#262c4c" stroke-width="3"/>
</g>
</svg>
<span class="view__shade" aria-hidden="true" data-shade></span>
<span class="view__sheen" aria-hidden="true" data-sheen></span>
</div>
</div>
<div class="leaves" aria-hidden="true" data-leaves>
<div class="leaf leaf--l" data-leaf></div>
<div class="leaf leaf--r" data-leaf></div>
<div class="sill">
<svg class="pot" viewBox="0 0 60 64" data-pot>
<g class="pot__plant">
<path d="M30 40c-2-10-10-16-18-18M30 40c0-12 2-20 8-26M30 40c4-8 12-12 20-12" fill="none" stroke="#4d7a3c" stroke-width="2.4" stroke-linecap="round"/>
<ellipse cx="13" cy="22" rx="8" ry="5.5" fill="#4f8a3f"/><ellipse cx="48" cy="28" rx="8" ry="5.5" fill="#447c37"/><ellipse cx="22" cy="31" rx="6" ry="4" fill="#5c9a4a"/>
<circle cx="38" cy="12" r="5" fill="#d9412f"/><circle cx="43" cy="16" r="4.4" fill="#e85a44"/><circle cx="34" cy="17" r="4.2" fill="#c8392a"/><circle cx="39" cy="18" r="3.8" fill="#f06a52"/>
<circle cx="12" cy="14" r="4" fill="#d9412f"/><circle cx="16" cy="17" r="3.6" fill="#e85a44"/><circle cx="9" cy="18" r="3.4" fill="#c8392a"/>
</g>
<path d="M14 40h32l-4 22H18z" fill="#c4643f"/><path d="M11 36h38v6H11z" fill="#d97a50"/><path d="M18 62h24" stroke="#9c4b2e" stroke-width="2"/>
</svg>
</div>
</div>
</div>
<div class="card" data-card>
<h2 class="card__name"><span class="card__mask" data-name>The Lemon House</span></h2>
<p class="card__place" data-place>Above the harbour, Porto Alba</p>
<div class="card__facts">
<p class="card__price"><span class="sr">Price </span><span data-price>€1,240,000</span></p>
<ul class="card__stats">
<li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 18v-7.5h18V18M3 15h18M6 10.5V7.8C6 7 6.6 6.5 7.4 6.5h3.3c.7 0 1.3.6 1.3 1.3v2.7M12 10.5V7.8c0-.7.6-1.3 1.3-1.3h3.3c.8 0 1.4.5 1.4 1.3v2.7"/></svg><span data-beds>4</span><span class="card__unit">beds</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3.5 12h17v1.5a5 5 0 0 1-5 5h-7a5 5 0 0 1-5-5zM7 18.5L6 20.5M17 18.5l1 2M6 12V5.6A2 2 0 0 1 9.6 4.4"/></svg><span data-baths>3</span><span class="card__unit">baths</span></li>
<li><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5M4 4l6 6M20 4l-6 6M20 20l-6-6M4 20l6-6"/></svg><span data-area>210</span><span class="card__unit">m²</span></li>
</ul>
</div>
</div>
</section>
<nav class="nav" aria-label="Choose a home" data-nav>
<button class="arrow arrow--prev" type="button" aria-label="Previous home" data-prev>
<span class="arrow__ground" aria-hidden="true"></span>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.5 6.5L9 12l5.5 5.5"/></svg>
</button>
<div class="tabs" data-tabs>
<span class="tabs__pill" aria-hidden="true" data-pill></span>
<button class="tab" type="button" aria-pressed="true" data-tab>Lemon House</button>
<button class="tab" type="button" aria-pressed="false" data-tab>Mill Cottage</button>
<button class="tab" type="button" aria-pressed="false" data-tab>Blue Townhouse</button>
</div>
<button class="arrow arrow--next" type="button" aria-label="Next home" data-next data-autoclic>
<span class="arrow__ground" aria-hidden="true"></span>
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9.5 6.5L15 12l-5.5 5.5"/></svg>
</button>
</nav>
<p class="sr" aria-live="polite" aria-atomic="true" data-live></p>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="script.js"></script>
</body>
</html>Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
50 valori da cambiare
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «Le case dietro le persiane» da Animorio e adattala al mio sitoLa scena ha la prospettiva (3,4 volte la larghezza della finestra); sopra la foto c’è un contenitore con transform-style: preserve-3d e dentro le due ante, larghe metà finestra, che girano con rotationY intorno al bordo esterno (transform-origin 0% 50% e 100% 50%). La sinistra va a −179 gradi e la destra a +179: aperte, stanno quasi piatte sul muro. La foto e la cornice di pietra stanno fuori dal contesto 3D, dipinte prima: le ante passano sempre sopra, senza combattere sullo stesso piano.
Ogni anta è fatta di pezzi: quattro traversi, un traverso in mezzo e diciotto stecche (SLATS per metà) messe in percentuale, senza sovrapporsi, così da ferme non si contendono il piano. Le stecche girano con rotationX intorno al loro centro: a TILT gradi diventano più basse e fra l’una e l’altra si vede la foto. L’onda va per file, con un ritardo che è lo stesso per la stecca di sinistra e di destra (Math.floor(k / 2) · 0,026 s), e back.out le fa andare un poco oltre. Dietro le stecche c’è un fondo scuro due pixel più indietro, che sparisce quando si aprono: da chiuse non lascia vedere la foto nelle fessure dell’antialiasing.
L’apertura è una timeline: stecche, maniglia (rotation 90, back.out), un piccolo scatto di 5 gradi, poi l’anta va al muro in SWING secondi con power2.in, sempre più veloce. All’urto torna indietro di 30 · BOUNCE gradi con power2.out, ricade, fa un secondo rimbalzo più piccolo, e le stecche tremano con keyframes ed elastic.out. Il fermo, un SVG nel contesto 3D poco davanti al muro, scatta da 90 a 0 gradi solo quando l’anta si è fermata. Chiudendo le ante vanno a 0 con power3.in, rimbalzano sulla cornice, la scena trema con keyframes su x e il vaso salta con bounce.out.
Una funzione sul ticker di GSAP legge l’angolo di ogni anta (gsap.getProperty) e, solo se è cambiato, scrive una variabile --dim: i colori delle stecche sono color-mix della vernice col nero in quella misura, così l’anta si scurisce girando. L’ombra sul muro è uno span sfocato dietro le ante, con scaleX uguale a −cos dell’angolo: nasce quando l’anta passa i 90 gradi e cresce fino a stare tutta sotto di lei. Lo stesso calcolo apre il velo scuro sopra la foto mentre le ante si aprono.
Le tre foto sono SVG disegnati a mano con i gruppi data-depth: entrando scalano da 1 + profondità · 0,1 a 1 intorno al fondo, e col puntatore si spostano con gsap.quickTo in proporzione alla profondità. Ogni foto ha la sua vita (il limone ruota con elastic intorno al tronco, la ruota del mulino con rotation += 240, le finestre accese con stagger random). Il nome si divide in lettere dentro una maschera con overflow: clip e sale con back.out; prezzo e numeri sono un oggetto tweenato che riscrive il testo. La pillola delle linguette si allunga a coprire le due linguette e poi va a quella nuova con elastic.out; le linguette tengono la larghezza più grande grazie a un ::after invisibile con attr(data-label), così la pillola non sbaglia quando il testo si allarga.
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
SWING | script.js | 0.95 | I secondi che un’anta impiega ad aprirsi, dalla cornice al muro. |
SLAM | script.js | 0.46 | I secondi che le ante impiegano a chiudersi di colpo. |
BOUNCE | script.js | 0.6 | Quanto rimbalzano le ante sul muro e sulla cornice, da 0 a 1; con 0 niente rimbalzi né tremori. |
TILT | script.js | 58 | I gradi di cui girano le stecche per lasciar vedere la foto. |
SLATS | script.js | 9 | Le stecche in ogni metà di un’anta. |
DEPTH | script.js | 12 | Di quanti pixel si sposta la parte più vicina della foto sotto il puntatore. |
HOMES | script.js | 3 case | Una riga per foto, in ordine: nome, posto, prezzo in euro, camere, bagni, metri quadri. |
--shutter | style.css | #2f6a4c | Il verde delle persiane (con --shutter-light e --shutter-dark per la luce e l’ombra delle stecche). |
Per le case di un’agenzia immobiliare, le camere di un albergo o di una casa vacanze, una villa in affitto, un borgo o un paese da raccontare: ovunque una foto sia un posto dove si entra e valga la pena di farla aspettare un attimo prima di mostrarla.
Le stesse animazioni, con le misure adattate: la finestra è più alta e stretta, così le due ante aperte stanno sul muro dentro lo schermo; il disegno si ritaglia ai lati e resta al centro quello che conta. Le linguette si stringono con l’asse wdth del carattere; un tocco sulle frecce o sulle linguette, o un trascinamento di lato sulla finestra, cambia casa.
Niente gira e niente si sposta: le persiane chiuse svaniscono in dissolvenza e lasciano la foto, già con le finestre accese. Cambiando casa le persiane ricompaiono in dissolvenza, la foto e la scheda cambiano sotto di loro e svaniscono di nuovo; niente movimento della foto col puntatore né onda sulle stecche.
GSAP 3.15.0, Newsreader (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 25 KB; le librerie: GSAP 28 KB.
Provata il 13 ottobre 2026
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
Con l’email e la password del tuo account.
oppure con l’email
Hai fatto l’accesso come .
Con l’account scarichi lo zip di ogni animazione e di ogni pacchetto, gratis.