
The card room
3D, Transitions, Images
Free
The homes of an estate agency, and every photo is a window with green shutters on a plaster wall: the slats tilt to let you peek, the latch turns, the leaves swing open in 3D, bang against the wall and the catches hold them. Going to another home the shutters slam shut and open again on the new photo.
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!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>Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
50 values to change
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “Homes behind the shutters” from Animorio and fit it into my siteThe scene has the perspective (3.4 times the window’s width); over the photo there is a box with transform-style: preserve-3d and in it the two leaves, half a window wide, which turn with rotationY round their outer edge (transform-origin 0% 50% and 100% 50%). The left one goes to −179 degrees and the right one to +179: open, they lie nearly flat on the wall. The photo and the stone frame are outside the 3D context, painted first: the leaves always pass over them, without fighting for the same plane.
Every leaf is made of parts: four rails and stiles, a rail in the middle and eighteen slats (SLATS per half) placed in percentages, not overlapping, so at rest they do not fight over the plane. The slats turn with rotationX round their centre: at TILT degrees they get shorter and the photo shows between them. The wave goes row by row, with one delay for the left and the right slat (Math.floor(k / 2) · 0.026 s), and back.out takes them a little too far. Behind the slats a dark back sits two pixels further away and vanishes as they open: shut, it keeps the photo from showing through the antialiasing seams.
Opening is a timeline: slats, latch (rotation 90, back.out), a small 5 degree jolt, then the leaf goes to the wall in SWING seconds with power2.in, faster and faster. On impact it comes back by 30 · BOUNCE degrees with power2.out, falls again, bounces a second smaller time, and the slats rattle with keyframes and elastic.out. The catch, an SVG in the 3D context just in front of the wall, springs from 90 to 0 degrees only once the leaf has stopped. Closing, the leaves go to 0 with power3.in, bounce off the frame, the scene shakes with keyframes on x and the pot hops with bounce.out.
A function on the GSAP ticker reads the angle of each leaf (gsap.getProperty) and, only if it has changed, writes a --dim variable: the colours of the slats are a color-mix of the paint with black in that amount, so the leaf darkens as it turns. The shadow on the wall is a blurred span behind the leaves, with scaleX equal to −cos of the angle: it starts when the leaf passes 90 degrees and grows until it lies right under it. The same sum lifts the dark veil over the photo as the leaves open.
The three photos are SVGs drawn by hand with data-depth groups: coming in they scale from 1 + depth · 0.1 to 1 round the bottom, and with the pointer they move with gsap.quickTo in proportion to their depth. Every photo has its own life (the lemon tree turns with elastic round its trunk, the mill wheel with rotation += 240, the windows light up with a random stagger). The name is split into letters inside a mask with overflow: clip and rises with back.out; price and numbers are a tweened object that rewrites the text. The pill of the tabs stretches over both tabs and then goes to the new one with elastic.out; the tabs keep their widest size thanks to an invisible ::after with attr(data-label), so the pill is never off when the text widens.
| Name | File | Default | What it changes |
|---|---|---|---|
SWING | script.js | 0.95 | The seconds a leaf takes to swing open, from the frame to the wall. |
SLAM | script.js | 0.46 | The seconds the leaves take to slam shut. |
BOUNCE | script.js | 0.6 | How hard the leaves bounce off the wall and the frame, from 0 to 1; at 0 there is no bounce and no shaking. |
TILT | script.js | 58 | The degrees the slats turn to let the photo show through. |
SLATS | script.js | 9 | The slats in each half of a leaf. |
DEPTH | script.js | 12 | How many pixels the nearest part of the photo moves under the pointer. |
HOMES | script.js | 3 case | One row per photo, in order: name, place, price in euros, bedrooms, bathrooms, square metres. |
--shutter | style.css | #2f6a4c | The green of the shutters (with --shutter-light and --shutter-dark for the light and shade of the slats). |
For the homes of an estate agency, the rooms of a hotel or a holiday home, a villa to let, a village to tell about: anywhere a photo is a place you step into and it is worth making it wait a moment before showing it.
The same animations, with the sizes adapted: the window is taller and narrower, so the two open leaves fit on the wall inside the screen; the drawing is cropped at the sides and what matters stays in the middle. The tabs narrow with the font’s wdth axis; a tap on the arrows or the tabs, or a sideways swipe on the window, changes home.
Nothing turns and nothing moves: the closed shutters fade away and leave the photo, its windows already lit. Changing home the shutters fade back in, the photo and the card change under them and they fade away again; no movement of the photo with the pointer and no wave on the slats.
GSAP 3.15.0, Newsreader (font variabile) 5.3.0, Mona Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 25 KB; the libraries: GSAP 28 KB.
Tested on 13 October 2026
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
With your account’s email and password.
or with your email
You’re signed in as .
With your account, you can download the zip of every animation and every pack, for free.