
Il pulsante d’invio
Pulsanti, Transizioni, SVG
NuovaGratis
Il benvenuto a passi di un'app per guardare le stelle, con un disegno notturno sopra i passi: a ogni passo la luna cresce, da falce a piena, e il disegno si trasforma nel successivo, la prima stella che si gonfia in Saturno, Saturno che si allunga in una cometa, la coda della cometa che diventa il cannocchiale puntato sulla luna piena; il posto scelto, città, periferia o campagna, resta nel disegno con le stelle che quel cielo lascia vedere.
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">
<title>The waxing moon steps</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/bricolage-grotesque@5.3.0/standard.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the welcome steps of a stargazing app: where you watch from, what you want to find, when to be nudged, and
a last look. The drawing over the steps turns from one into the next (a first star swells into Saturn, Saturn
stretches into a comet, the comet's tail becomes a telescope), and the moon waxes a little at every step:
a thin crescent at the start, full at the end. Going back, everything goes the way it came -->
<div class="tour" data-tour data-autoclic>
<div class="scene">
<svg class="scene__svg" viewBox="0 0 360 216" preserveAspectRatio="xMidYMid slice" aria-hidden="true" data-scene>
<defs>
<linearGradient id="lune-sky" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" data-sky-top/>
<stop offset="1" data-sky-low/>
</linearGradient>
<linearGradient id="lune-glow" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" class="glow-stop" stop-opacity="0"/>
<stop offset="1" class="glow-stop" stop-opacity="0.75"/>
</linearGradient>
<filter id="lune-haze" x="-20%" y="-40%" width="140%" height="180%">
<feGaussianBlur stdDeviation="14"/>
</filter>
<filter id="lune-haze-core" x="-20%" y="-40%" width="140%" height="180%">
<feGaussianBlur stdDeviation="5"/>
</filter>
<clipPath id="lune-lit-clip">
<path data-lit-clip/>
</clipPath>
<linearGradient id="lune-paint-back" gradientUnits="userSpaceOnUse" data-paint="back"><stop offset="0"/><stop offset="1"/></linearGradient>
<linearGradient id="lune-paint-body" gradientUnits="userSpaceOnUse" data-paint="body"><stop offset="0"/><stop offset="1"/></linearGradient>
<linearGradient id="lune-paint-front" gradientUnits="userSpaceOnUse" data-paint="front"><stop offset="0"/><stop offset="1"/></linearGradient>
<linearGradient id="lune-paint-detail" gradientUnits="userSpaceOnUse" data-paint="detail"><stop offset="0"/><stop offset="1"/></linearGradient>
</defs>
<rect width="360" height="216" fill="url(#lune-sky)"/>
<!-- the glow of street lights over the horizon: strong in the city, gone in the countryside -->
<rect y="96" width="360" height="120" fill="url(#lune-glow)" data-glow/>
<!-- the sky turns a little at every step, like the night going on -->
<g data-sky-turn>
<g class="milky" data-milky>
<path class="milky__haze" d="M-76 171.7L-64.3 165.6L-52 161.6L-39.3 159.7L-26.2 159.2L-13.1 158.8L-0.3 157.2L12.1 153.9L24 149.2L35.8 143.8L47.7 138.8L59.9 134.8L72.4 131.8L85.1 128.9L97.6 125.4L109.7 120.6L121.5 114.7L133.1 108.4L145.1 102.8L157.8 98.7L171.4 96.3L185.7 94.9L200.2 93.3L214.2 90.3L227.3 85.2L239.4 78L250.9 69.4L262.1 60.3L273.7 51.7L285.6 43.6L297.8 35.8L309.8 27.5L321.2 18.1L332 7.6L342.4 -3.5L353 -14.2L364.6 -23.7L377.4 -31.5L391.1 -37.8L405.3 -43.7L419.2 -50.1L440.8 -17.9L429.7 -7.5L418.9 3.5L407.6 13.9L395.4 22.7L382 29.8L367.6 35.4L353 40.4L338.8 45.8L325.2 52.2L312.2 59.3L299.4 66.6L286.3 73.3L272.9 79.1L259.1 84.2L245.6 89.3L232.7 95.4L220.8 103.3L209.8 112.9L199.3 123.4L188.6 133.7L177.2 142.6L164.9 149.4L151.9 154.2L138.5 158L125.3 161.7L112.4 166.2L99.9 171.6L87.6 177.3L75.1 182.4L62.3 186.3L49.2 188.9L36 190.8L22.9 193.1L10.3 196.7L-1.9 201.7L-13.8 207.8L-25.7 213.6L-38 218.1L-50.7 220.3L-64 220.3Z" filter="url(#lune-haze)"/>
<path class="milky__core" d="M-71.3 190.5L-59.1 186.4L-46.7 183L-34.1 180.3L-21.4 178.1L-8.7 175.8L4 173.1L16.4 169.7L28.8 165.7L41.1 161.5L53.4 157.3L65.8 153.3L78.3 149.5L90.9 145.7L103.5 141.6L115.9 136.9L128.2 131.7L140.4 126.2L152.8 120.8L165.4 115.8L178.3 111.3L191.5 106.9L204.7 102.4L217.7 97.3L230.5 91.2L242.9 84.4L255 76.9L267.1 69.1L279.3 61.4L291.7 53.7L304.1 46.1L316.4 38.1L328.6 29.8L340.5 20.9L352.3 11.8L364.2 2.7L376.4 -6L389 -14.1L401.9 -21.8L415 -29.3L428 -37L435.4 -26L423.4 -16.9L411.4 -7.6L399.4 1.5L387 10L374.1 17.8L361 25.1L347.7 32.2L334.6 39.3L321.7 46.6L309 54.1L296.4 61.6L283.7 68.8L270.8 75.6L257.9 82L245 88.2L232.3 94.7L220 101.7L208 109.1L196.1 116.8L184.2 124.2L172.1 130.9L159.6 136.8L146.9 142L134 146.6L121.2 151L108.6 155.6L96 160.4L83.6 165.2L71 169.6L58.4 173.6L45.7 176.9L32.9 180L20.2 183.1L7.6 186.6L-4.8 190.5L-17.1 194.8L-29.4 198.9L-41.9 202.4L-54.5 205.2L-67.2 207.3Z" filter="url(#lune-haze-core)"/>
</g>
<g class="stars" data-stars>
<path class="star" data-level="1" d="M-80 35.5C-79.7 38.1 -79.2 38.6 -76.6 38.9C-79.2 39.3 -79.7 39.7 -80 42.3C-80.3 39.7 -80.8 39.3 -83.4 38.9C-80.8 38.6 -80.3 38.1 -80 35.5Z"/>
<path class="star" data-level="1" d="M115.5 75.9C115.9 78.8 116.4 79.3 119.2 79.7C116.4 80 115.9 80.6 115.5 83.4C115.1 80.6 114.6 80 111.8 79.7C114.6 79.3 115.1 78.8 115.5 75.9Z"/>
<path class="star" data-level="1" d="M-6.6 -35.9C-6.3 -33.5 -5.8 -33 -3.4 -32.7C-5.8 -32.4 -6.3 -31.9 -6.6 -29.5C-6.9 -31.9 -7.4 -32.4 -9.8 -32.7C-7.4 -33 -6.9 -33.5 -6.6 -35.9Z"/>
<path class="star" data-level="1" d="M338.1 -13.5C338.5 -10.8 339 -10.2 341.8 -9.9C339 -9.5 338.5 -9 338.1 -6.3C337.8 -9 337.2 -9.5 334.5 -9.9C337.2 -10.2 337.8 -10.8 338.1 -13.5Z"/>
<path class="star" data-level="1" d="M176.3 -22.6C176.6 -20.1 177.1 -19.6 179.6 -19.3C177.1 -18.9 176.6 -18.5 176.3 -15.9C176 -18.5 175.5 -18.9 173 -19.3C175.5 -19.6 176 -20.1 176.3 -22.6Z"/>
<path class="star" data-level="1" d="M226.3 -40.5C226.6 -38.1 227.1 -37.6 229.6 -37.3C227.1 -37 226.6 -36.5 226.3 -34.1C226 -36.5 225.6 -37 223.1 -37.3C225.6 -37.6 226 -38.1 226.3 -40.5Z"/>
<path class="star" data-level="1" d="M-1.9 -3.3C-1.5 -0.7 -1.1 -0.2 1.5 0.1C-1.1 0.4 -1.5 0.9 -1.9 3.5C-2.2 0.9 -2.7 0.4 -5.3 0.1C-2.7 -0.2 -2.2 -0.7 -1.9 -3.3Z"/>
<path class="star" data-level="1" d="M-48.6 109.6C-48.3 112.5 -47.7 113 -44.8 113.4C-47.7 113.8 -48.3 114.3 -48.6 117.2C-49 114.3 -49.6 113.8 -52.5 113.4C-49.6 113 -49 112.5 -48.6 109.6Z"/>
<path class="star" data-level="1" d="M63.5 149C63.8 151.5 64.3 152 66.9 152.4C64.3 152.7 63.8 153.2 63.5 155.7C63.1 153.2 62.6 152.7 60.1 152.4C62.6 152 63.1 151.5 63.5 149Z"/>
<path class="star" data-level="1" d="M69 114.2C69.3 116.7 69.8 117.2 72.3 117.5C69.8 117.8 69.3 118.3 69 120.8C68.7 118.3 68.2 117.8 65.7 117.5C68.2 117.2 68.7 116.7 69 114.2Z"/>
<path class="star" data-level="1" d="M28.3 153C28.7 156 29.2 156.6 32.2 156.9C29.2 157.3 28.7 157.9 28.3 160.9C27.9 157.9 27.3 157.3 24.4 156.9C27.3 156.6 27.9 156 28.3 153Z"/>
<path class="star" data-level="2" d="M412.8 -8.8C413 -7 413.4 -6.6 415.2 -6.4C413.4 -6.2 413 -5.8 412.8 -4C412.5 -5.8 412.2 -6.2 410.3 -6.4C412.2 -6.6 412.5 -7 412.8 -8.8Z"/>
<path class="star" data-level="2" d="M385.4 88.1C385.6 90.2 386 90.6 388.1 90.8C386 91.1 385.6 91.5 385.4 93.5C385.1 91.5 384.7 91.1 382.6 90.8C384.7 90.6 385.1 90.2 385.4 88.1Z"/>
<path class="star" data-level="2" d="M80.8 17.4C81 19.3 81.4 19.7 83.3 19.9C81.4 20.1 81 20.5 80.8 22.4C80.6 20.5 80.2 20.1 78.3 19.9C80.2 19.7 80.6 19.3 80.8 17.4Z"/>
<path class="star" data-level="2" d="M290.9 122.6C291.2 124.4 291.5 124.7 293.3 124.9C291.5 125.2 291.2 125.5 290.9 127.3C290.7 125.5 290.4 125.2 288.6 124.9C290.4 124.7 290.7 124.4 290.9 122.6Z"/>
<path class="star" data-level="2" d="M179.8 49.3C180 51.3 180.4 51.7 182.4 51.9C180.4 52.2 180 52.5 179.8 54.6C179.5 52.5 179.1 52.2 177.1 51.9C179.1 51.7 179.5 51.3 179.8 49.3Z"/>
<path class="star" data-level="2" d="M298.4 -6.3C298.6 -4.3 299 -3.9 301 -3.7C299 -3.4 298.6 -3 298.4 -1C298.1 -3 297.7 -3.4 295.7 -3.7C297.7 -3.9 298.1 -4.3 298.4 -6.3Z"/>
<path class="star" data-level="2" d="M417.7 149.4C417.9 151.4 418.3 151.7 420.2 152C418.3 152.2 417.9 152.6 417.7 154.5C417.4 152.6 417.1 152.2 415.2 152C417.1 151.7 417.4 151.4 417.7 149.4Z"/>
<path class="star" data-level="2" d="M352.2 105.7C352.5 107.7 352.9 108 354.8 108.3C352.9 108.5 352.5 108.9 352.2 110.9C352 108.9 351.6 108.5 349.7 108.3C351.6 108 352 107.7 352.2 105.7Z"/>
<path class="star" data-level="2" d="M124.5 122.2C124.8 124 125.1 124.4 126.9 124.6C125.1 124.8 124.8 125.2 124.5 127C124.3 125.2 124 124.8 122.2 124.6C124 124.4 124.3 124 124.5 122.2Z"/>
<path class="star" data-level="2" d="M-55.2 -29.5C-55 -27.6 -54.6 -27.2 -52.6 -26.9C-54.6 -26.7 -55 -26.3 -55.2 -24.3C-55.5 -26.3 -55.9 -26.7 -57.8 -26.9C-55.9 -27.2 -55.5 -27.6 -55.2 -29.5Z"/>
<path class="star" data-level="2" d="M382.1 -0.7C382.3 1.2 382.7 1.5 384.5 1.7C382.7 2 382.3 2.3 382.1 4.1C381.9 2.3 381.5 2 379.7 1.7C381.5 1.5 381.9 1.2 382.1 -0.7Z"/>
<path class="star" data-level="2" d="M439.2 90.5C439.4 92.5 439.8 92.9 441.8 93.1C439.8 93.4 439.4 93.8 439.2 95.8C438.9 93.8 438.5 93.4 436.5 93.1C438.5 92.9 438.9 92.5 439.2 90.5Z"/>
<path class="star" data-level="2" d="M397.9 -32C398.1 -30 398.5 -29.6 400.4 -29.4C398.5 -29.1 398.1 -28.8 397.9 -26.8C397.6 -28.8 397.2 -29.1 395.3 -29.4C397.2 -29.6 397.6 -30 397.9 -32Z"/>
<path class="star" data-level="2" d="M322.1 65.2C322.4 67 322.7 67.4 324.6 67.6C322.7 67.8 322.4 68.2 322.1 70C321.9 68.2 321.6 67.8 319.7 67.6C321.6 67.4 321.9 67 322.1 65.2Z"/>
<path class="star" data-level="2" d="M192.8 119.2C193 121 193.3 121.4 195.2 121.6C193.3 121.8 193 122.2 192.8 124C192.5 122.2 192.2 121.8 190.3 121.6C192.2 121.4 192.5 121 192.8 119.2Z"/>
<path class="star" data-level="3" d="M238.2 38.8C238.4 40.3 238.7 40.6 240.1 40.8C238.7 40.9 238.4 41.2 238.2 42.7C238 41.2 237.7 40.9 236.2 40.8C237.7 40.6 238 40.3 238.2 38.8Z"/>
<path class="star" data-level="3" d="M291.8 39.8C291.9 41 292.2 41.3 293.4 41.4C292.2 41.6 291.9 41.8 291.8 43.1C291.6 41.8 291.4 41.6 290.1 41.4C291.4 41.3 291.6 41 291.8 39.8Z"/>
<path class="star" data-level="3" d="M265.2 92.5C265.3 94 265.6 94.3 267.1 94.4C265.6 94.6 265.3 94.9 265.2 96.4C265 94.9 264.7 94.6 263.2 94.4C264.7 94.3 265 94 265.2 92.5Z"/>
<path class="star" data-level="3" d="M251.9 -12.9C252.1 -11.6 252.3 -11.3 253.6 -11.2C252.3 -11 252.1 -10.8 251.9 -9.4C251.7 -10.8 251.5 -11 250.1 -11.2C251.5 -11.3 251.7 -11.6 251.9 -12.9Z"/>
<path class="star" data-level="3" d="M-75.3 6.9C-75.2 8.2 -74.9 8.4 -73.7 8.6C-74.9 8.7 -75.2 9 -75.3 10.2C-75.5 9 -75.7 8.7 -77 8.6C-75.7 8.4 -75.5 8.2 -75.3 6.9Z"/>
<path class="star" data-level="3" d="M-12.7 120.9C-12.5 122.3 -12.2 122.6 -10.8 122.7C-12.2 122.9 -12.5 123.2 -12.7 124.6C-12.9 123.2 -13.1 122.9 -14.6 122.7C-13.1 122.6 -12.9 122.3 -12.7 120.9Z"/>
<path class="star" data-level="3" d="M202.2 148.7C202.4 150.1 202.6 150.3 204.1 150.5C202.6 150.7 202.4 151 202.2 152.4C202 151 201.8 150.7 200.3 150.5C201.8 150.3 202 150.1 202.2 148.7Z"/>
<path class="star" data-level="3" d="M417.2 48.6C417.4 49.8 417.6 50 418.8 50.2C417.6 50.4 417.4 50.6 417.2 51.8C417.1 50.6 416.8 50.4 415.6 50.2C416.8 50 417.1 49.8 417.2 48.6Z"/>
<path class="star" data-level="3" d="M320.6 131.4C320.7 132.8 321 133.1 322.4 133.2C321 133.4 320.7 133.7 320.6 135.1C320.4 133.7 320.1 133.4 318.7 133.2C320.1 133.1 320.4 132.8 320.6 131.4Z"/>
<path class="star" data-level="3" d="M151.1 148.3C151.3 149.6 151.5 149.8 152.8 150C151.5 150.1 151.3 150.4 151.1 151.7C151 150.4 150.7 150.1 149.4 150C150.7 149.8 151 149.6 151.1 148.3Z"/>
<path class="star" data-level="3" d="M141.2 97C141.4 98.5 141.7 98.8 143.1 98.9C141.7 99.1 141.4 99.4 141.2 100.8C141.1 99.4 140.8 99.1 139.3 98.9C140.8 98.8 141.1 98.5 141.2 97Z"/>
<path class="star" data-level="3" d="M379.3 33.8C379.5 35.2 379.7 35.4 381.1 35.6C379.7 35.8 379.5 36.1 379.3 37.5C379.1 36.1 378.9 35.8 377.5 35.6C378.9 35.4 379.1 35.2 379.3 33.8Z"/>
<path class="star" data-level="3" d="M117.7 148.8C117.9 150.3 118.1 150.6 119.6 150.8C118.1 150.9 117.9 151.2 117.7 152.7C117.5 151.2 117.2 150.9 115.7 150.8C117.2 150.6 117.5 150.3 117.7 148.8Z"/>
<path class="star" data-level="3" d="M143.2 -8.3C143.4 -6.9 143.7 -6.6 145.1 -6.4C143.7 -6.2 143.4 -6 143.2 -4.6C143.1 -6 142.8 -6.2 141.4 -6.4C142.8 -6.6 143.1 -6.9 143.2 -8.3Z"/>
<path class="star" data-level="3" d="M30.9 -22.7C31 -21.3 31.3 -21 32.8 -20.8C31.3 -20.6 31 -20.3 30.9 -18.9C30.7 -20.3 30.4 -20.6 29 -20.8C30.4 -21 30.7 -21.3 30.9 -22.7Z"/>
<path class="star" data-level="3" d="M130.8 28.1C130.9 29.5 131.2 29.7 132.5 29.9C131.2 30.1 130.9 30.3 130.8 31.6C130.6 30.3 130.4 30.1 129 29.9C130.4 29.7 130.6 29.5 130.8 28.1Z"/>
<path class="star" data-level="3" d="M-54.7 29.6C-54.6 31 -54.3 31.2 -53 31.4C-54.3 31.6 -54.6 31.8 -54.7 33.2C-54.9 31.8 -55.2 31.6 -56.5 31.4C-55.2 31.2 -54.9 31 -54.7 29.6Z"/>
<path class="star" data-level="3" d="M-24.6 150.3C-24.4 151.8 -24.1 152.1 -22.6 152.3C-24.1 152.5 -24.4 152.8 -24.6 154.2C-24.7 152.8 -25 152.5 -26.5 152.3C-25 152.1 -24.7 151.8 -24.6 150.3Z"/>
<path class="star" data-level="3" d="M238.4 66.9C238.5 68.2 238.8 68.5 240.1 68.7C238.8 68.8 238.5 69.1 238.4 70.4C238.2 69.1 238 68.8 236.7 68.7C238 68.5 238.2 68.2 238.4 66.9Z"/>
<path class="star" data-level="3" d="M45.9 104.2C46.1 105.6 46.3 105.9 47.7 106C46.3 106.2 46.1 106.5 45.9 107.9C45.7 106.5 45.4 106.2 44 106C45.4 105.9 45.7 105.6 45.9 104.2Z"/>
<path class="star" data-level="3" d="M-7.1 51.8C-6.9 53 -6.7 53.2 -5.5 53.4C-6.7 53.5 -6.9 53.8 -7.1 55C-7.2 53.8 -7.4 53.5 -8.7 53.4C-7.4 53.2 -7.2 53 -7.1 51.8Z"/>
<path class="star" data-level="3" d="M-56 77.8C-55.8 79.3 -55.5 79.6 -54.1 79.7C-55.5 79.9 -55.8 80.2 -56 81.6C-56.2 80.2 -56.5 79.9 -57.9 79.7C-56.5 79.6 -56.2 79.3 -56 77.8Z"/>
<path class="star" data-level="3" d="M230.8 92.2C231 93.6 231.2 93.8 232.6 94C231.2 94.2 231 94.5 230.8 95.9C230.6 94.5 230.3 94.2 228.9 94C230.3 93.8 230.6 93.6 230.8 92.2Z"/>
<path class="star" data-level="3" d="M250 157.7C250.1 159 250.4 159.3 251.8 159.5C250.4 159.6 250.1 159.9 250 161.3C249.8 159.9 249.5 159.6 248.2 159.5C249.5 159.3 249.8 159 250 157.7Z"/>
<path class="star" data-level="3" d="M383.6 128.2C383.7 129.4 383.9 129.7 385.2 129.8C383.9 130 383.7 130.2 383.6 131.4C383.4 130.2 383.2 130 382 129.8C383.2 129.7 383.4 129.4 383.6 128.2Z"/>
<path class="star" data-level="3" d="M172.8 15C172.9 16.3 173.2 16.6 174.5 16.7C173.2 16.9 172.9 17.1 172.8 18.4C172.6 17.1 172.4 16.9 171.1 16.7C172.4 16.6 172.6 16.3 172.8 15Z"/>
</g>
</g>
<!-- the moon: the dark disc lit by the earth, and the lit part redrawn from its phase on every frame -->
<g class="moon" data-moon>
<circle class="moon__dark" cx="70" cy="56" r="21"/>
<g class="moon__dark-craters">
<ellipse cx="62" cy="47" rx="4.2" ry="3.6"/>
<ellipse cx="77" cy="62" rx="5.4" ry="4.6"/>
<ellipse cx="65" cy="67" rx="2.8" ry="2.4"/>
<ellipse cx="80" cy="46" rx="2.4" ry="2.1"/>
<ellipse cx="57" cy="58" rx="2.2" ry="2"/>
</g>
<path class="moon__lit" data-lit/>
<g class="moon__craters" clip-path="url(#lune-lit-clip)">
<ellipse cx="62" cy="47" rx="4.2" ry="3.6"/>
<ellipse cx="77" cy="62" rx="5.4" ry="4.6"/>
<ellipse cx="65" cy="67" rx="2.8" ry="2.4"/>
<ellipse cx="80" cy="46" rx="2.4" ry="2.1"/>
<ellipse cx="57" cy="58" rx="2.2" ry="2"/>
</g>
</g>
<path class="land" data-land d="M0 216L0 172L1 172L2 172L3 172L4 171.9L5 171.9L6 171.9L7 171.9L8 171.9L9 171.9L10 160L11 159.2L12 158.4L13 157.7L14 156.9L15 156.1L16 155.3L17 154.6L18 153.8L19 153L20 152.2L21 151.4L22 150.7L23 149.9L24 149.1L25 148.3L26 147.6L27 146.8L28 146L29 146.8L30 147.6L31 148.3L32 149.1L33 149.9L34 150.7L35 151.4L36 152.2L37 153L38 153.8L39 154.6L40 155.3L41 156.1L42 156.9L43 157.7L44 158.4L45 159.2L46 160L47 171.2L48 168.3L49 167.4L50 166.4L51 165.5L52 158.4L53 157.2L54 156L55 148.6L56 146.9L57 145.3L58 143.6L59 142L60 140.3L61 138.7L62 137L63 138.7L64 140.3L65 142L66 143.6L67 145.3L68 146.9L69 148.6L70 156L71 157.2L72 158.4L73 165.5L74 166.4L75 167.4L76 168.3L77 170.8L78 170.8L79 170.7L80 156L81 155.3L82 154.5L83 153.8L84 153.1L85 152.4L86 151.6L87 150.9L88 150.2L89 149.5L90 148.7L91 148L92 147.3L93 146.5L94 145.8L95 145.1L96 144.4L97 143.6L98 142.9L99 142.2L100 141.5L101 140.7L102 140L103 140.7L104 141.5L105 142.2L106 142.9L107 143.6L108 144.4L109 145.1L110 145.8L111 146.5L112 147.3L113 148L114 148.7L115 149.5L116 150.2L117 150.9L118 151.6L119 152.4L120 153.1L121 153.8L122 154.5L123 155.3L124 156L125 170L126 170L127 170L128 170L129 169.9L130 169.9L131 169.9L132 162L133 161.2L134 160.4L135 159.6L136 158.9L137 158.1L138 157.3L139 156.5L140 155.7L141 154.9L142 154.1L143 153.4L144 152.6L145 151.8L146 151L147 151.8L148 152.6L149 153.4L150 154.1L151 154.9L152 155.7L153 156.5L154 157.3L155 158.1L156 158.9L157 159.6L158 160.4L159 161.2L160 162L161 169.4L162 169.4L163 166.1L164 165.1L165 164.2L166 163.2L167 155.4L168 154.1L169 152.9L170 151.7L171 143.2L172 141.5L173 139.8L174 138L175 136.3L176 134.6L177 132.9L178 131.2L179 132.9L180 134.6L181 136.3L182 138L183 139.8L184 141.5L185 143.2L186 151.7L187 152.9L188 154.1L189 155.4L190 163.2L191 164.2L192 165.1L193 166.1L194 168.9L195 168.9L196 168.9L197 168.8L198 154L199 153.3L200 152.6L201 151.9L202 151.2L203 150.5L204 149.8L205 149.1L206 148.4L207 147.7L208 147L209 146.3L210 145.7L211 145L212 144.3L213 143.6L214 142.9L215 142.2L216 141.5L217 140.8L218 140.1L219 139.4L220 138.7L221 138L222 138.7L223 139.4L224 140.1L225 140.8L226 141.5L227 142.2L228 142.9L229 143.6L230 144.3L231 145L232 145.7L233 146.3L234 147L235 147.7L236 148.4L237 149.1L238 149.8L239 150.5L240 151.2L241 151.9L242 152.6L243 153.3L244 154L245 168.1L246 168.1L247 168L248 168L249 165.3L250 164.4L251 163.5L252 157.1L253 155.9L254 154.8L255 153.6L256 146.5L257 144.9L258 143.3L259 141.7L260 140.1L261 138.4L262 136.8L263 138.4L264 140.1L265 141.7L266 143.3L267 144.9L268 146.5L269 153.6L270 154.8L271 155.9L272 157.1L273 163.5L274 164.4L275 165.3L276 167.6L277 167.6L278 167.6L279 167.5L280 160L281 159.3L282 158.5L283 157.8L284 157L285 156.3L286 155.5L287 154.8L288 154L289 153.3L290 152.5L291 151.8L292 151L293 150.3L294 149.5L295 148.8L296 148L297 148.8L298 149.5L299 150.3L300 151L301 151.8L302 152.5L303 153.3L304 154L305 154.8L306 155.5L307 156.3L308 157L309 157.8L310 158.5L311 159.3L312 160L313 167L314 167L315 167L316 163.9L317 163L318 162L319 161.1L320 153.7L321 152.5L322 151.3L323 143.6L324 141.9L325 140.2L326 138.5L327 136.8L328 135.1L329 133.4L330 131.7L331 133.4L332 135.1L333 136.8L334 138.5L335 140.2L336 141.9L337 143.6L338 151.3L339 152.5L340 153.7L341 161.1L342 162L343 163L344 163.9L345 166.5L346 158L347 157.3L348 156.6L349 155.9L350 155.2L351 154.5L352 153.8L353 153.1L354 152.4L355 151.6L356 150.9L357 150.2L358 149.5L359 148.8L360 148.1L360 216Z"/>
<path class="windows" data-windows="city" d="M4 156h3v4h-3ZM10 165h3v4h-3ZM26 176h3v4h-3ZM40 167h3v4h-3ZM60 164h3v4h-3ZM72 182h3v4h-3ZM104 134h3v4h-3ZM116 134h3v4h-3ZM104 152h3v4h-3ZM104 170h3v4h-3ZM146 144h3v4h-3ZM158 144h3v4h-3ZM152 153h3v4h-3ZM158 153h3v4h-3ZM152 162h3v4h-3ZM146 171h3v4h-3ZM146 180h3v4h-3ZM172 171h3v4h-3ZM172 180h3v4h-3ZM178 180h3v4h-3ZM178 189h3v4h-3ZM188 147h3v4h-3ZM200 147h3v4h-3ZM200 156h3v4h-3ZM194 165h3v4h-3ZM200 174h3v4h-3ZM194 183h3v4h-3ZM210 161h3v4h-3ZM216 161h3v4h-3ZM210 170h3v4h-3ZM222 179h3v4h-3ZM210 188h3v4h-3ZM222 188h3v4h-3ZM232 175h3v4h-3ZM256 160h3v4h-3ZM262 187h3v4h-3ZM274 183h3v4h-3ZM294 142h3v4h-3ZM294 160h3v4h-3ZM306 160h3v4h-3ZM300 187h3v4h-3ZM322 152h3v4h-3ZM322 161h3v4h-3ZM322 170h3v4h-3ZM328 188h3v4h-3ZM344 153h3v4h-3ZM350 153h3v4h-3ZM338 162h3v4h-3ZM344 162h3v4h-3ZM350 162h3v4h-3ZM338 171h3v4h-3ZM338 180h3v4h-3ZM344 180h3v4h-3ZM350 180h3v4h-3Z"/>
<path class="windows" data-windows="suburbs" d="M24 154h4v5h-4ZM94 150h4v5h-4ZM108 150h4v5h-4ZM216 148h4v5h-4ZM228 156h4v5h-4ZM292 156h4v5h-4Z"/>
<path class="windows" data-windows="country" d="M110 151h6v7h-6Z"/>
<path class="ridge" d="M0 216V196C48 190 104 194 160 193C214 192 262 187 300 189C326 190 346 192 360 191V216Z"/>
<!-- the drawing of the step: four shapes that turn into the four shapes of the next step -->
<g class="hero" data-hero>
<path data-slot="back" fill="url(#lune-paint-back)" d="M191.5 85.7L191.6 85.5L191.7 85.2L191.9 85.1L192 84.9L192.2 84.8L192.4 84.6L192.6 84.5L192.8 84.3L193 84.2L193.2 84.1L193.4 84L193.7 83.9L193.9 83.8L194.1 83.7L194.3 83.6L194.5 83.5L194.7 83.4L195 83.3L195.2 83.2L195.4 83.1L195.6 83L195.9 82.9L196.1 82.8L196.3 82.8L196.5 82.7L196.8 82.6L197 82.5L197.2 82.5L197.4 82.4L197.7 82.3L197.9 82.3L198.1 82.2L198.4 82.2L198.6 82.1L198.8 82.1L199.1 82L199.3 81.9L199.5 81.9L199.8 81.9L200 81.8L200.2 81.8L200.5 81.7L200.7 81.7L200.9 81.7L201.2 81.6L201.4 81.6L201.6 81.6L201.9 81.6L202.1 81.6L202.4 81.5L202.6 81.5L202.8 81.6L203.1 81.6L203.3 81.6L203.6 81.6L203.8 81.7L204 81.7L204.2 81.9L204.4 82L204.4 82.2L204.2 82.3L204 82.3L203.7 82.4L203.5 82.5L203.3 82.5L203.1 82.6L202.8 82.7L202.6 82.7L202.4 82.8L202.2 82.6L202 82.5L201.8 82.4L201.6 82.4L201.3 82.4L201.1 82.4L200.9 82.4L200.6 82.4L200.4 82.4L200.1 82.4L199.9 82.5L199.7 82.5L199.4 82.6L199.2 82.6L199 82.6L198.7 82.7L198.5 82.8L198.3 82.8L198 82.9L197.8 82.9L197.6 83L197.3 83.1L197.1 83.1L196.9 83.2L196.7 83.3L196.4 83.4L196.2 83.5L196 83.5L195.8 83.6L195.6 83.7L195.3 83.8L195.1 83.9L194.9 84L194.7 84.2L194.5 84.3L194.3 84.4L194.1 84.5L193.9 84.7L193.8 84.9L193.6 85.1L193.6 85.3L193.4 85.4L193.2 85.4L192.9 85.5L192.7 85.6L192.5 85.6L192.3 85.7L192 85.8L191.8 85.8L191.6 85.9Z"/>
<path data-slot="body" fill="url(#lune-paint-body)" d="M189 84L189.5 84L190 84L190.5 84L191 83.9L191.6 83.9L192.1 83.9L192.6 83.8L193.1 83.7L193.6 83.6L194.1 83.5L194.6 83.3L195 83.1L195.5 82.9L195.9 82.6L196.3 82.3L196.6 81.9L196.9 81.5L197.1 81L197.3 80.6L197.5 80.1L197.6 79.6L197.7 79.1L197.8 78.6L197.9 78.1L197.9 77.6L197.9 77L198 76.5L198 76L198 75.5L198 75L198 75.5L198 76L198 76.5L198.1 77L198.1 77.6L198.1 78.1L198.2 78.6L198.3 79.1L198.4 79.6L198.5 80.1L198.7 80.6L198.9 81L199.1 81.5L199.4 81.9L199.7 82.3L200.1 82.6L200.5 82.9L201 83.1L201.4 83.3L201.9 83.5L202.4 83.6L202.9 83.7L203.4 83.8L203.9 83.9L204.4 83.9L205 83.9L205.5 84L206 84L206.5 84L207 84L206.5 84L206 84L205.5 84L205 84.1L204.4 84.1L203.9 84.1L203.4 84.2L202.9 84.3L202.4 84.4L201.9 84.5L201.4 84.7L201 84.9L200.5 85.1L200.1 85.4L199.7 85.7L199.4 86.1L199.1 86.5L198.9 87L198.7 87.4L198.5 87.9L198.4 88.4L198.3 88.9L198.2 89.4L198.1 89.9L198.1 90.4L198.1 91L198 91.5L198 92L198 92.5L198 93L198 92.5L198 92L198 91.5L197.9 91L197.9 90.4L197.9 89.9L197.8 89.4L197.7 88.9L197.6 88.4L197.5 87.9L197.3 87.4L197.1 87L196.9 86.5L196.6 86.1L196.3 85.7L195.9 85.4L195.5 85.1L195 84.9L194.6 84.7L194.1 84.5L193.6 84.4L193.1 84.3L192.6 84.2L192.1 84.1L191.6 84.1L191 84.1L190.5 84L190 84L189.5 84Z"/>
<path data-slot="front" fill="url(#lune-paint-front)" d="M191.6 85.8L191.8 85.7L192 85.7L192.3 85.6L192.5 85.5L192.7 85.5L192.9 85.4L193.2 85.3L193.4 85.3L193.6 85.2L193.8 85.4L194 85.5L194.2 85.6L194.4 85.6L194.7 85.6L194.9 85.6L195.1 85.6L195.4 85.6L195.6 85.6L195.9 85.6L196.1 85.5L196.3 85.5L196.6 85.4L196.8 85.4L197 85.4L197.3 85.3L197.5 85.2L197.7 85.2L198 85.1L198.2 85.1L198.4 85L198.7 84.9L198.9 84.9L199.1 84.8L199.3 84.7L199.6 84.6L199.8 84.5L200 84.5L200.2 84.4L200.4 84.3L200.7 84.2L200.9 84.1L201.1 84L201.3 83.8L201.5 83.7L201.7 83.6L201.9 83.5L202.1 83.3L202.2 83.1L202.4 82.9L202.4 82.7L202.6 82.6L202.8 82.6L203.1 82.5L203.3 82.4L203.5 82.4L203.7 82.3L204 82.2L204.2 82.2L204.4 82.1L204.5 82.3L204.4 82.5L204.3 82.8L204.1 82.9L204 83.1L203.8 83.2L203.6 83.4L203.4 83.5L203.2 83.7L203 83.8L202.8 83.9L202.6 84L202.3 84.1L202.1 84.2L201.9 84.3L201.7 84.4L201.5 84.5L201.3 84.6L201 84.7L200.8 84.8L200.6 84.9L200.4 85L200.1 85.1L199.9 85.2L199.7 85.2L199.5 85.3L199.2 85.4L199 85.5L198.8 85.5L198.6 85.6L198.3 85.7L198.1 85.7L197.9 85.8L197.6 85.8L197.4 85.9L197.2 85.9L196.9 86L196.7 86.1L196.5 86.1L196.2 86.1L196 86.2L195.8 86.2L195.5 86.3L195.3 86.3L195.1 86.3L194.8 86.4L194.6 86.4L194.4 86.4L194.1 86.4L193.9 86.4L193.6 86.5L193.4 86.5L193.2 86.4L192.9 86.4L192.7 86.4L192.4 86.4L192.2 86.3L192 86.3L191.8 86.1L191.6 86Z"/>
<path data-slot="detail" fill="url(#lune-paint-detail)" d="M194.9 83.6L195 83.6L195.1 83.6L195.3 83.5L195.4 83.5L195.5 83.5L195.6 83.5L195.7 83.5L195.9 83.4L196 83.4L196.1 83.4L196.2 83.4L196.4 83.4L196.5 83.3L196.6 83.3L196.7 83.3L196.8 83.3L196.9 83.2L197.1 83.2L197.2 83.2L197.3 83.1L197.4 83.1L197.5 83.1L197.7 83.1L197.8 83L197.9 83L198 82.9L198.1 82.9L198.2 82.9L198.4 82.8L198.5 82.8L198.6 82.8L198.7 82.7L198.8 82.7L198.9 82.6L199 82.6L199.2 82.5L199.3 82.5L199.4 82.5L199.5 82.4L199.6 82.4L199.7 82.3L199.8 82.3L199.9 82.2L200.1 82.2L200.2 82.1L200.3 82.1L200.4 82L200.5 82.1L200.5 82.2L200.6 82.3L200.6 82.4L200.7 82.5L200.7 82.6L200.8 82.8L200.9 82.9L200.9 83L201 83.1L201 83.2L200.9 83.2L200.8 83.3L200.7 83.3L200.5 83.4L200.4 83.4L200.3 83.5L200.2 83.5L200.1 83.6L200 83.6L199.9 83.7L199.8 83.7L199.7 83.8L199.5 83.8L199.4 83.9L199.3 83.9L199.2 83.9L199.1 84L199 84L198.9 84.1L198.7 84.1L198.6 84.1L198.5 84.2L198.4 84.2L198.3 84.3L198.2 84.3L198 84.3L197.9 84.3L197.8 84.4L197.7 84.4L197.6 84.4L197.4 84.5L197.3 84.5L197.2 84.5L197.1 84.6L197 84.6L196.8 84.6L196.7 84.6L196.6 84.6L196.5 84.7L196.4 84.7L196.2 84.7L196.1 84.7L196 84.8L195.9 84.8L195.8 84.8L195.6 84.8L195.5 84.8L195.4 84.8L195.3 84.9L195.2 84.9L195 84.9L195 84.8L195 84.7L195 84.6L195 84.4L195 84.3L195 84.2L194.9 84.1L194.9 84L194.9 83.8L194.9 83.7Z"/>
</g>
</svg>
<!-- the shapes of every step, read by the script (light: where the gradient of each shape runs; paint: the two
colours of :root it goes between; alpha: how opaque it is at each end) -->
<svg class="shapes" aria-hidden="true" hidden>
<path data-step="0" data-slot="back" data-paint="--ring-lo --ring-hi" data-alpha="0 0" data-light="146 92 250 74" d="M191.5 85.7L191.6 85.5L191.7 85.2L191.9 85.1L192 84.9L192.2 84.8L192.4 84.6L192.6 84.5L192.8 84.3L193 84.2L193.2 84.1L193.4 84L193.7 83.9L193.9 83.8L194.1 83.7L194.3 83.6L194.5 83.5L194.7 83.4L195 83.3L195.2 83.2L195.4 83.1L195.6 83L195.9 82.9L196.1 82.8L196.3 82.8L196.5 82.7L196.8 82.6L197 82.5L197.2 82.5L197.4 82.4L197.7 82.3L197.9 82.3L198.1 82.2L198.4 82.2L198.6 82.1L198.8 82.1L199.1 82L199.3 81.9L199.5 81.9L199.8 81.9L200 81.8L200.2 81.8L200.5 81.7L200.7 81.7L200.9 81.7L201.2 81.6L201.4 81.6L201.6 81.6L201.9 81.6L202.1 81.6L202.4 81.5L202.6 81.5L202.8 81.6L203.1 81.6L203.3 81.6L203.6 81.6L203.8 81.7L204 81.7L204.2 81.9L204.4 82L204.4 82.2L204.2 82.3L204 82.3L203.7 82.4L203.5 82.5L203.3 82.5L203.1 82.6L202.8 82.7L202.6 82.7L202.4 82.8L202.2 82.6L202 82.5L201.8 82.4L201.6 82.4L201.3 82.4L201.1 82.4L200.9 82.4L200.6 82.4L200.4 82.4L200.1 82.4L199.9 82.5L199.7 82.5L199.4 82.6L199.2 82.6L199 82.6L198.7 82.7L198.5 82.8L198.3 82.8L198 82.9L197.8 82.9L197.6 83L197.3 83.1L197.1 83.1L196.9 83.2L196.7 83.3L196.4 83.4L196.2 83.5L196 83.5L195.8 83.6L195.6 83.7L195.3 83.8L195.1 83.9L194.9 84L194.7 84.2L194.5 84.3L194.3 84.4L194.1 84.5L193.9 84.7L193.8 84.9L193.6 85.1L193.6 85.3L193.4 85.4L193.2 85.4L192.9 85.5L192.7 85.6L192.5 85.6L192.3 85.7L192 85.8L191.8 85.8L191.6 85.9Z"/>
<path data-step="0" data-slot="body" data-paint="--star --star-deep" data-alpha="1 1" data-light="204 76 192 92" d="M189 84L189.5 84L190 84L190.5 84L191 83.9L191.6 83.9L192.1 83.9L192.6 83.8L193.1 83.7L193.6 83.6L194.1 83.5L194.6 83.3L195 83.1L195.5 82.9L195.9 82.6L196.3 82.3L196.6 81.9L196.9 81.5L197.1 81L197.3 80.6L197.5 80.1L197.6 79.6L197.7 79.1L197.8 78.6L197.9 78.1L197.9 77.6L197.9 77L198 76.5L198 76L198 75.5L198 75L198 75.5L198 76L198 76.5L198.1 77L198.1 77.6L198.1 78.1L198.2 78.6L198.3 79.1L198.4 79.6L198.5 80.1L198.7 80.6L198.9 81L199.1 81.5L199.4 81.9L199.7 82.3L200.1 82.6L200.5 82.9L201 83.1L201.4 83.3L201.9 83.5L202.4 83.6L202.9 83.7L203.4 83.8L203.9 83.9L204.4 83.9L205 83.9L205.5 84L206 84L206.5 84L207 84L206.5 84L206 84L205.5 84L205 84.1L204.4 84.1L203.9 84.1L203.4 84.2L202.9 84.3L202.4 84.4L201.9 84.5L201.4 84.7L201 84.9L200.5 85.1L200.1 85.4L199.7 85.7L199.4 86.1L199.1 86.5L198.9 87L198.7 87.4L198.5 87.9L198.4 88.4L198.3 88.9L198.2 89.4L198.1 89.9L198.1 90.4L198.1 91L198 91.5L198 92L198 92.5L198 93L198 92.5L198 92L198 91.5L197.9 91L197.9 90.4L197.9 89.9L197.8 89.4L197.7 88.9L197.6 88.4L197.5 87.9L197.3 87.4L197.1 87L196.9 86.5L196.6 86.1L196.3 85.7L195.9 85.4L195.5 85.1L195 84.9L194.6 84.7L194.1 84.5L193.6 84.4L193.1 84.3L192.6 84.2L192.1 84.1L191.6 84.1L191 84.1L190.5 84L190 84L189.5 84Z"/>
<path data-step="0" data-slot="front" data-paint="--ring-lo --ring-hi" data-alpha="0 0" data-light="146 104 250 86" d="M191.6 85.8L191.8 85.7L192 85.7L192.3 85.6L192.5 85.5L192.7 85.5L192.9 85.4L193.2 85.3L193.4 85.3L193.6 85.2L193.8 85.4L194 85.5L194.2 85.6L194.4 85.6L194.7 85.6L194.9 85.6L195.1 85.6L195.4 85.6L195.6 85.6L195.9 85.6L196.1 85.5L196.3 85.5L196.6 85.4L196.8 85.4L197 85.4L197.3 85.3L197.5 85.2L197.7 85.2L198 85.1L198.2 85.1L198.4 85L198.7 84.9L198.9 84.9L199.1 84.8L199.3 84.7L199.6 84.6L199.8 84.5L200 84.5L200.2 84.4L200.4 84.3L200.7 84.2L200.9 84.1L201.1 84L201.3 83.8L201.5 83.7L201.7 83.6L201.9 83.5L202.1 83.3L202.2 83.1L202.4 82.9L202.4 82.7L202.6 82.6L202.8 82.6L203.1 82.5L203.3 82.4L203.5 82.4L203.7 82.3L204 82.2L204.2 82.2L204.4 82.1L204.5 82.3L204.4 82.5L204.3 82.8L204.1 82.9L204 83.1L203.8 83.2L203.6 83.4L203.4 83.5L203.2 83.7L203 83.8L202.8 83.9L202.6 84L202.3 84.1L202.1 84.2L201.9 84.3L201.7 84.4L201.5 84.5L201.3 84.6L201 84.7L200.8 84.8L200.6 84.9L200.4 85L200.1 85.1L199.9 85.2L199.7 85.2L199.5 85.3L199.2 85.4L199 85.5L198.8 85.5L198.6 85.6L198.3 85.7L198.1 85.7L197.9 85.8L197.6 85.8L197.4 85.9L197.2 85.9L196.9 86L196.7 86.1L196.5 86.1L196.2 86.1L196 86.2L195.8 86.2L195.5 86.3L195.3 86.3L195.1 86.3L194.8 86.4L194.6 86.4L194.4 86.4L194.1 86.4L193.9 86.4L193.6 86.5L193.4 86.5L193.2 86.4L192.9 86.4L192.7 86.4L192.4 86.4L192.2 86.3L192 86.3L191.8 86.1L191.6 86Z"/>
<path data-step="0" data-slot="detail" data-paint="--saturn-band --saturn-band" data-alpha="0 0" data-light="176 84 220 84" d="M194.9 83.6L195 83.6L195.1 83.6L195.3 83.5L195.4 83.5L195.5 83.5L195.6 83.5L195.7 83.5L195.9 83.4L196 83.4L196.1 83.4L196.2 83.4L196.4 83.4L196.5 83.3L196.6 83.3L196.7 83.3L196.8 83.3L196.9 83.2L197.1 83.2L197.2 83.2L197.3 83.1L197.4 83.1L197.5 83.1L197.7 83.1L197.8 83L197.9 83L198 82.9L198.1 82.9L198.2 82.9L198.4 82.8L198.5 82.8L198.6 82.8L198.7 82.7L198.8 82.7L198.9 82.6L199 82.6L199.2 82.5L199.3 82.5L199.4 82.5L199.5 82.4L199.6 82.4L199.7 82.3L199.8 82.3L199.9 82.2L200.1 82.2L200.2 82.1L200.3 82.1L200.4 82L200.5 82.1L200.5 82.2L200.6 82.3L200.6 82.4L200.7 82.5L200.7 82.6L200.8 82.8L200.9 82.9L200.9 83L201 83.1L201 83.2L200.9 83.2L200.8 83.3L200.7 83.3L200.5 83.4L200.4 83.4L200.3 83.5L200.2 83.5L200.1 83.6L200 83.6L199.9 83.7L199.8 83.7L199.7 83.8L199.5 83.8L199.4 83.9L199.3 83.9L199.2 83.9L199.1 84L199 84L198.9 84.1L198.7 84.1L198.6 84.1L198.5 84.2L198.4 84.2L198.3 84.3L198.2 84.3L198 84.3L197.9 84.3L197.8 84.4L197.7 84.4L197.6 84.4L197.4 84.5L197.3 84.5L197.2 84.5L197.1 84.6L197 84.6L196.8 84.6L196.7 84.6L196.6 84.6L196.5 84.7L196.4 84.7L196.2 84.7L196.1 84.7L196 84.8L195.9 84.8L195.8 84.8L195.6 84.8L195.5 84.8L195.4 84.8L195.3 84.9L195.2 84.9L195 84.9L195 84.8L195 84.7L195 84.6L195 84.4L195 84.3L195 84.2L194.9 84.1L194.9 84L194.9 83.8L194.9 83.7Z"/>
<path data-step="1" data-slot="back" data-paint="--ring-lo --ring-hi" data-alpha="1 1" data-light="146 92 250 74" d="M144.1 98L144.6 96.1L145.7 94.4L147 92.9L148.4 91.5L149.9 90.3L151.5 89.1L153.2 87.9L154.8 86.8L156.5 85.8L158.3 84.8L160 83.9L161.8 82.9L163.5 82L165.3 81.2L167.1 80.3L169 79.5L170.8 78.7L172.6 78L174.5 77.2L176.3 76.5L178.2 75.8L180.1 75.1L181.9 74.4L183.8 73.8L185.7 73.1L187.6 72.5L189.5 71.9L191.4 71.3L193.3 70.8L195.2 70.2L197.1 69.7L199.1 69.2L201 68.7L202.9 68.2L204.9 67.8L206.8 67.3L208.7 66.9L210.7 66.5L212.7 66.1L214.6 65.7L216.6 65.4L218.5 65.1L220.5 64.8L222.5 64.5L224.5 64.3L226.4 64.1L228.4 63.9L230.4 63.7L232.4 63.6L234.4 63.5L236.4 63.5L238.4 63.6L240.3 63.7L242.3 63.9L244.3 64.2L246.2 64.6L248.1 65.2L249.9 66.1L251.3 67.5L251.7 69.2L249.8 69.7L247.9 70.2L245.9 70.8L244 71.3L242.1 71.8L240.2 72.3L238.3 72.9L236.3 73.4L234.6 73.7L233.4 72.1L231.7 71.3L229.7 70.8L227.7 70.5L225.8 70.4L223.8 70.4L221.8 70.5L219.8 70.6L217.8 70.8L215.8 71L213.9 71.3L211.9 71.6L209.9 72L208 72.3L206 72.7L204.1 73.2L202.1 73.6L200.2 74.1L198.3 74.6L196.4 75.1L194.4 75.7L192.5 76.2L190.6 76.8L188.7 77.5L186.9 78.1L185 78.8L183.1 79.5L181.3 80.2L179.4 81L177.6 81.7L175.8 82.6L174 83.4L172.2 84.3L170.5 85.3L168.7 86.3L167.1 87.3L165.4 88.5L163.9 89.8L162.6 91.2L161.6 92.9L161.5 94.8L159.6 95.4L157.7 96L155.8 96.5L153.9 97.1L152 97.7L150.1 98.3L148.2 98.8L146.3 99.4L144.4 100Z"/>
<path data-step="1" data-slot="body" data-paint="--saturn-hi --saturn-lo" data-alpha="1 1" data-light="214 60 180 110" d="M171 84L171 82.6L171.2 81.2L171.3 79.8L171.6 78.4L171.9 77L172.3 75.7L172.8 74.3L173.3 73L173.9 71.7L174.6 70.5L175.4 69.3L176.2 68.1L177 67L177.9 65.9L178.9 64.9L179.9 63.9L181 63L182.1 62.2L183.3 61.4L184.5 60.6L185.7 59.9L187 59.3L188.3 58.8L189.7 58.3L191 57.9L192.4 57.6L193.8 57.3L195.2 57.2L196.6 57L198 57L199.4 57L200.8 57.2L202.2 57.3L203.6 57.6L205 57.9L206.3 58.3L207.7 58.8L209 59.3L210.3 59.9L211.5 60.6L212.7 61.4L213.9 62.2L215 63L216.1 63.9L217.1 64.9L218.1 65.9L219 67L219.8 68.1L220.6 69.3L221.4 70.5L222.1 71.7L222.7 73L223.2 74.3L223.7 75.7L224.1 77L224.4 78.4L224.7 79.8L224.8 81.2L225 82.6L225 84L225 85.4L224.8 86.8L224.7 88.2L224.4 89.6L224.1 91L223.7 92.3L223.2 93.7L222.7 95L222.1 96.3L221.4 97.5L220.6 98.7L219.8 99.9L219 101L218.1 102.1L217.1 103.1L216.1 104.1L215 105L213.9 105.8L212.7 106.6L211.5 107.4L210.3 108.1L209 108.7L207.7 109.2L206.3 109.7L205 110.1L203.6 110.4L202.2 110.7L200.8 110.8L199.4 111L198 111L196.6 111L195.2 110.8L193.8 110.7L192.4 110.4L191 110.1L189.7 109.7L188.3 109.2L187 108.7L185.7 108.1L184.5 107.4L183.3 106.6L182.1 105.8L181 105L179.9 104.1L178.9 103.1L177.9 102.1L177 101L176.2 99.9L175.4 98.7L174.6 97.5L173.9 96.3L173.3 95L172.8 93.7L172.3 92.3L171.9 91L171.6 89.6L171.3 88.2L171.2 86.8L171 85.4Z"/>
<path data-step="1" data-slot="front" data-paint="--ring-lo --ring-hi" data-alpha="1 1" data-light="146 104 250 86" d="M144.3 98.8L146.2 98.3L148.1 97.8L150.1 97.2L152 96.7L153.9 96.2L155.8 95.7L157.7 95.1L159.7 94.6L161.4 94.3L162.6 95.9L164.3 96.7L166.3 97.2L168.3 97.5L170.2 97.6L172.2 97.6L174.2 97.5L176.2 97.4L178.2 97.2L180.2 97L182.1 96.7L184.1 96.4L186.1 96L188 95.7L190 95.3L191.9 94.8L193.9 94.4L195.8 93.9L197.7 93.4L199.6 92.9L201.6 92.3L203.5 91.8L205.4 91.2L207.3 90.5L209.1 89.9L211 89.2L212.9 88.5L214.7 87.8L216.6 87L218.4 86.3L220.2 85.4L222 84.6L223.8 83.7L225.5 82.7L227.3 81.7L228.9 80.7L230.6 79.5L232.1 78.2L233.4 76.8L234.4 75.1L234.5 73.2L236.4 72.6L238.3 72L240.2 71.5L242.1 70.9L244 70.3L245.9 69.7L247.8 69.2L249.7 68.6L251.6 68L251.9 70L251.4 71.9L250.3 73.6L249 75.1L247.6 76.5L246.1 77.7L244.5 78.9L242.8 80.1L241.2 81.2L239.5 82.2L237.7 83.2L236 84.1L234.2 85.1L232.5 86L230.7 86.8L228.9 87.7L227 88.5L225.2 89.3L223.4 90L221.5 90.8L219.7 91.5L217.8 92.2L215.9 92.9L214.1 93.6L212.2 94.2L210.3 94.9L208.4 95.5L206.5 96.1L204.6 96.7L202.7 97.2L200.8 97.8L198.9 98.3L196.9 98.8L195 99.3L193.1 99.8L191.1 100.2L189.2 100.7L187.3 101.1L185.3 101.5L183.3 101.9L181.4 102.3L179.4 102.6L177.5 102.9L175.5 103.2L173.5 103.5L171.5 103.7L169.6 103.9L167.6 104.1L165.6 104.3L163.6 104.4L161.6 104.5L159.6 104.5L157.6 104.4L155.7 104.3L153.7 104.1L151.7 103.8L149.8 103.4L147.9 102.8L146.1 101.9L144.7 100.5Z"/>
<path data-step="1" data-slot="detail" data-paint="--saturn-band --saturn-band" data-alpha="0.85 0.85" data-light="176 84 220 84" d="M172.2 80.6L173.2 80.4L174.2 80.3L175.2 80.2L176.2 80L177.2 79.9L178.2 79.7L179.2 79.6L180.2 79.4L181.3 79.3L182.3 79.1L183.3 78.9L184.3 78.7L185.2 78.5L186.2 78.3L187.2 78.1L188.2 77.8L189.2 77.6L190.2 77.4L191.2 77.1L192.2 76.9L193.2 76.6L194.1 76.4L195.1 76.1L196.1 75.8L197.1 75.5L198.1 75.2L199 74.9L200 74.6L201 74.3L201.9 74L202.9 73.6L203.9 73.3L204.8 73L205.8 72.6L206.7 72.3L207.7 71.9L208.6 71.5L209.6 71.1L210.5 70.8L211.4 70.4L212.4 70L213.3 69.6L214.2 69.2L215.2 68.7L216.1 68.3L217 67.9L217.9 67.5L218.5 68.2L218.9 69.1L219.4 70L219.9 70.9L220.4 71.8L220.8 72.7L221.3 73.6L221.8 74.5L222.3 75.4L222.7 76.3L222.9 77.1L222 77.5L221.1 78L220.2 78.4L219.2 78.8L218.3 79.3L217.4 79.7L216.5 80.1L215.5 80.5L214.6 80.9L213.7 81.3L212.7 81.7L211.8 82L210.8 82.4L209.9 82.8L208.9 83.1L208 83.5L207 83.8L206.1 84.2L205.1 84.5L204.1 84.8L203.2 85.1L202.2 85.5L201.2 85.8L200.2 86.1L199.3 86.3L198.3 86.6L197.3 86.9L196.3 87.2L195.3 87.4L194.4 87.7L193.4 87.9L192.4 88.2L191.4 88.4L190.4 88.6L189.4 88.8L188.4 89L187.4 89.2L186.4 89.4L185.4 89.6L184.4 89.8L183.4 90L182.4 90.1L181.4 90.3L180.4 90.5L179.4 90.6L178.4 90.7L177.4 90.9L176.4 91L175.4 91.1L174.3 91.2L173.3 91.3L172.9 90.7L172.9 89.7L172.8 88.7L172.7 87.7L172.6 86.6L172.6 85.6L172.5 84.6L172.4 83.6L172.3 82.6L172.3 81.6Z"/>
<path data-step="2" data-slot="back" data-paint="--ion --ion" data-alpha="0.8 0" data-light="138 118 312 48" d="M144 107.2L146.4 106L148.9 104.8L151.3 103.7L153.8 102.6L156.3 101.5L158.8 100.3L161.2 99.1L163.7 98L166.1 96.8L168.6 95.7L171.1 94.5L173.5 93.4L176 92.2L178.4 91L180.9 89.9L183.4 88.7L185.8 87.6L188.3 86.4L190.8 85.3L193.2 84.1L195.7 82.9L198.1 81.8L200.6 80.6L203.1 79.5L205.5 78.3L208 77.2L210.4 76L212.9 74.8L215.4 73.7L217.8 72.5L220.3 71.4L222.7 70.2L225.2 69.1L227.7 67.9L230.1 66.7L232.6 65.6L235 64.4L237.5 63.3L240 62.1L242.4 61L244.9 59.8L247.3 58.6L249.8 57.5L252.3 56.3L254.7 55.2L257.2 54L259.7 52.9L262.1 51.7L264.6 50.5L267 49.4L269.5 48.2L272 47.1L274.4 45.9L276.8 44.7L279.3 43.4L281.7 42.2L284.1 41L286.7 40.1L288.5 42L289.4 44.6L288.7 47L286.3 48.2L283.8 49.2L281.3 50.2L278.7 51.2L276.2 52.3L273.7 53.4L271.2 54.5L268.8 55.5L266.3 56.6L263.8 57.7L261.3 58.8L258.8 59.9L256.3 61L253.8 62.1L251.3 63.2L248.8 64.3L246.3 65.4L243.8 66.4L241.4 67.5L238.9 68.6L236.4 69.7L233.9 70.8L231.4 71.9L228.9 73L226.4 74.1L223.9 75.2L221.4 76.3L218.9 77.3L216.4 78.4L213.9 79.5L211.5 80.6L209 81.7L206.5 82.8L204 83.9L201.5 85L199 86.1L196.5 87.2L194 88.2L191.5 89.3L189 90.4L186.5 91.5L184.1 92.6L181.6 93.7L179.1 94.8L176.6 95.9L174.1 97L171.6 98.1L169.1 99.1L166.6 100.2L164.1 101.3L161.6 102.4L159.1 103.5L156.7 104.6L154.2 105.7L151.7 106.9L149.2 108L146.7 109.1L144.2 109.6Z"/>
<path data-step="2" data-slot="body" data-paint="--comet-head --comet-tail" data-alpha="1 1" data-light="130 124 156 108" d="M128.5 118.3L128.5 117.6L128.6 116.9L128.7 116.2L128.8 115.6L129 114.9L129.3 114.3L129.5 113.7L129.9 113.1L130.2 112.5L130.7 112L131.1 111.5L131.6 111L132.1 110.5L132.7 110.1L133.2 109.8L133.8 109.4L134.5 109.2L135.1 109L135.8 108.9L136.4 108.8L137.1 108.7L137.8 108.7L138.5 108.7L139.2 108.7L139.8 108.8L140.5 108.8L141.2 108.8L141.9 108.8L142.6 108.8L143.2 108.8L143.9 108.8L144.6 108.8L145.3 108.8L146 108.8L146.6 108.8L147.3 108.7L148 108.7L148.7 108.7L149.3 108.7L150 108.7L150.7 108.6L151.4 108.6L152.1 108.6L152.7 108.5L153.4 108.5L154.1 108.5L154.8 108.5L155.5 108.4L156.1 108.4L156.8 108.4L157.5 108.4L158.2 108.4L158.8 108.5L159.5 108.7L160 109.1L159.9 109.7L159.6 110.3L159.1 110.9L158.7 111.3L158.2 111.8L157.7 112.3L157.2 112.7L156.7 113.2L156.2 113.7L155.7 114.1L155.2 114.6L154.7 115L154.2 115.5L153.6 115.9L153.1 116.3L152.6 116.8L152.1 117.3L151.6 117.7L151.1 118.2L150.6 118.6L150.1 119.1L149.6 119.6L149.1 120L148.6 120.5L148.2 121L147.7 121.4L147.2 121.9L146.7 122.4L146.2 122.9L145.7 123.4L145.3 123.8L144.8 124.3L144.3 124.8L143.8 125.3L143.3 125.7L142.8 126.1L142.2 126.5L141.6 126.8L140.9 127L140.3 127.2L139.6 127.4L139 127.5L138.3 127.5L137.6 127.5L136.9 127.4L136.2 127.3L135.6 127.2L134.9 127L134.3 126.7L133.7 126.5L133.1 126.1L132.5 125.8L132 125.4L131.5 124.9L131 124.4L130.6 123.9L130.2 123.4L129.8 122.8L129.5 122.2L129.2 121.6L129 120.9L128.8 120.3L128.6 119.6L128.5 118.9Z"/>
<path data-step="2" data-slot="front" data-paint="--comet-tail --comet-tail" data-alpha="0.95 0" data-light="146 114 306 52" d="M142.2 113L145 111.2L148 109.9L151 108.6L154 107.2L157 105.7L160 104.3L163 102.9L166 101.6L169 100.2L172 98.8L175.1 97.5L178.1 96.1L181.1 94.8L184.2 93.5L187.2 92.2L190.2 90.9L193.3 89.6L196.3 88.3L199.4 87L202.4 85.7L205.5 84.5L208.6 83.2L211.6 82L214.7 80.8L217.8 79.5L220.9 78.3L223.9 77.1L227 75.9L230.1 74.7L233.2 73.6L236.3 72.4L239.4 71.2L242.5 70.1L245.6 68.9L248.7 67.8L251.8 66.7L255 65.5L258.1 64.4L261.2 63.3L264.3 62.2L267.4 61.2L270.6 60.1L273.7 59L276.8 57.9L280 56.9L283.1 55.9L286.3 54.8L289.4 53.8L292.6 52.8L295.7 51.8L298.8 50.6L301.8 49.1L304.9 48.1L307.9 49.2L310.4 51.4L312.8 53.7L315 56.1L317.2 58.6L319.1 61.3L319.9 64.5L319.9 67.8L319.7 71.1L319.2 74.4L318 77.5L315 78.5L311.7 78.7L308.4 78.9L305.1 79.4L301.8 80L298.6 80.6L295.3 81.2L292.1 81.8L288.8 82.4L285.6 83L282.3 83.6L279.1 84.3L275.8 84.9L272.6 85.6L269.3 86.2L266.1 86.9L262.8 87.6L259.6 88.3L256.4 89L253.1 89.7L249.9 90.4L246.7 91.1L243.5 91.9L240.2 92.6L237 93.4L233.8 94.1L230.6 94.9L227.4 95.7L224.1 96.5L220.9 97.3L217.7 98.1L214.5 98.9L211.3 99.7L208.1 100.6L204.9 101.4L201.7 102.2L198.5 103.1L195.3 104L192.1 104.8L188.9 105.7L185.7 106.6L182.6 107.5L179.4 108.4L176.2 109.3L173 110.2L169.8 111.2L166.7 112.1L163.5 113L160.3 114L157.1 114.9L154 115.9L150.8 117L147.7 118.1L144.5 118.7L142.5 116.2Z"/>
<path data-step="2" data-slot="detail" data-paint="--comet-core --comet-core" data-alpha="1 1" data-light="134 120 148 112" d="M132.6 118.7L132.6 118.4L132.6 118.1L132.7 117.8L132.7 117.5L132.8 117.3L132.9 117L133 116.7L133.2 116.5L133.3 116.2L133.5 116L133.7 115.8L133.9 115.6L134.1 115.4L134.4 115.3L134.6 115.1L134.9 115L135.1 114.9L135.4 114.8L135.7 114.7L136 114.7L136.2 114.7L136.5 114.7L136.8 114.7L137.1 114.7L137.4 114.7L137.7 114.7L138 114.7L138.2 114.7L138.5 114.7L138.8 114.7L139.1 114.7L139.4 114.7L139.7 114.7L140 114.7L140.2 114.7L140.5 114.7L140.8 114.7L141.1 114.7L141.4 114.6L141.7 114.6L142 114.6L142.2 114.6L142.5 114.6L142.8 114.6L143.1 114.6L143.4 114.6L143.7 114.5L144 114.5L144.2 114.5L144.5 114.5L144.8 114.5L145.1 114.5L145.4 114.6L145.7 114.6L145.9 114.8L145.8 115.1L145.7 115.3L145.5 115.6L145.3 115.8L145.1 116L144.9 116.2L144.7 116.3L144.5 116.5L144.3 116.7L144.1 116.9L143.8 117.1L143.6 117.3L143.4 117.5L143.2 117.7L143 117.9L142.8 118.1L142.6 118.3L142.3 118.4L142.1 118.6L141.9 118.8L141.7 119L141.5 119.2L141.3 119.4L141.1 119.6L140.9 119.8L140.7 120L140.5 120.2L140.3 120.4L140.1 120.6L139.9 120.8L139.7 121L139.5 121.2L139.3 121.4L139.1 121.6L138.8 121.8L138.6 122L138.4 122.1L138.1 122.3L137.9 122.4L137.6 122.4L137.3 122.5L137 122.5L136.7 122.6L136.4 122.6L136.2 122.5L135.9 122.5L135.6 122.4L135.3 122.3L135.1 122.2L134.8 122.1L134.5 122L134.3 121.8L134.1 121.7L133.9 121.5L133.7 121.3L133.5 121L133.3 120.8L133.2 120.6L133 120.3L132.9 120.1L132.8 119.8L132.7 119.5L132.7 119.2L132.6 119Z"/>
<path data-step="3" data-slot="back" data-paint="--tripod-hi --tripod-lo" data-alpha="1 1" data-light="266 160 266 206" d="M232.8 201L234.3 199L235.9 197.1L237.5 195.2L239.1 193.3L240.6 191.3L242.2 189.4L243.8 187.5L245.3 185.6L246.9 183.6L248.5 181.7L250 179.8L251.6 177.9L253.2 175.9L254.7 174L256.3 172.1L257.9 170.2L259.5 168.2L261 166.3L262.6 164.4L264.2 162.5L263.1 162.2L262 162L264 162L266 162L268 162L270 162L268.8 162.1L267.7 162.3L269.5 164.1L271.2 165.9L273 167.6L274.8 169.4L276.6 171.2L278.4 173L280.2 174.8L281.9 176.6L283.7 178.4L285.5 180.2L287.3 182L289.1 183.8L290.9 185.5L292.6 187.3L294.4 189.1L296.2 190.9L298 192.7L299.8 194.5L301.6 196.3L303.3 198.1L305.1 199.9L304 201L302.9 202.1L300.9 200.8L299 199.4L297 198L295 196.6L293.1 195.2L291.1 193.8L289.2 192.5L287.2 191.1L285.2 189.7L283.3 188.3L281.3 186.9L279.3 185.5L277.4 184.2L275.4 182.8L273.5 181.4L271.5 180L271.5 182.3L271.5 184.5L271.5 186.8L271.5 189L271.5 191.3L271.5 193.6L271.5 195.8L271.5 198.1L271.5 200.3L271.5 202.6L271.5 204.9L270 205L268.5 205.1L268.2 202.7L268 200.3L267.7 197.9L267.4 195.5L267.1 193.1L266.8 190.7L266.6 188.3L266.3 185.9L266 183.5L265.7 181.1L265.5 178.7L265.2 176.3L264.9 173.8L264.6 171.4L264.4 169L264.1 166.6L263.8 164.2L263.3 166.5L262.9 168.7L262.4 171L261.9 173.2L261.4 175.5L261 177.7L260.5 180L258.7 181.6L256.9 183.3L255.1 184.9L253.3 186.6L251.5 188.2L249.7 189.9L247.9 191.5L246.1 193.2L244.3 194.8L242.4 196.5L240.6 198.1L238.8 199.7L237 201.4L235.2 203L234 202Z"/>
<path data-step="3" data-slot="body" data-paint="--mount --mount-lo" data-alpha="1 1" data-light="262 148 270 166" d="M257 157.5L257 157L257.1 156.6L257.2 156.1L257.2 155.6L257.3 155.1L257.5 154.7L257.6 154.2L257.7 153.7L257.9 153.3L258 152.8L258.2 152.4L258.4 151.9L258.6 151.5L258.9 151.1L259.2 150.8L259.6 150.6L260.1 150.3L260.5 150.2L261 150L261.4 149.8L261.9 149.7L262.4 149.6L262.8 149.5L263.3 149.4L263.8 149.3L264.2 149.2L264.7 149.1L265.2 149.1L265.7 149L266.2 149L266.6 149L267.1 149.1L267.6 149.2L268.1 149.2L268.5 149.3L269 149.4L269.5 149.5L269.9 149.7L270.4 149.8L270.9 149.9L271.3 150.1L271.8 150.3L272.2 150.5L272.6 150.7L273 151L273.3 151.4L273.5 151.8L273.7 152.2L273.9 152.7L274.1 153.1L274.2 153.6L274.4 154L274.5 154.5L274.6 155L274.7 155.4L274.8 155.9L274.9 156.4L275 156.9L275 157.3L275 157.8L275 158.3L274.9 158.8L274.7 159.2L274.6 159.7L274.5 160.2L274.3 160.6L274.1 161.1L273.9 161.5L273.8 161.9L273.6 162.4L273.3 162.8L273.1 163.2L272.9 163.7L272.7 164.1L272.4 164.5L272.1 164.9L271.8 165.2L271.4 165.5L270.9 165.7L270.5 165.9L270.1 166.1L269.6 166.2L269.1 166.4L268.7 166.5L268.2 166.6L267.8 166.8L267.3 166.9L266.8 166.9L266.3 167L265.8 167L265.4 167L264.9 166.9L264.4 166.8L264 166.7L263.5 166.6L263 166.4L262.6 166.3L262.1 166.1L261.7 166L261.2 165.8L260.8 165.6L260.4 165.3L260 165L259.7 164.6L259.4 164.2L259.2 163.8L258.9 163.4L258.7 163L258.5 162.5L258.3 162.1L258.1 161.7L257.9 161.2L257.8 160.8L257.6 160.3L257.4 159.9L257.3 159.4L257.2 158.9L257.1 158.5L257 158Z"/>
<path data-step="3" data-slot="front" data-paint="--tube-hi --tube-lo" data-alpha="1 1" data-light="269.6 148.9 262.4 163.1" d="M207 135.1L207.9 133.5L208.7 131.9L209.5 130.3L210.4 128.6L211.2 127L212 125.4L212.8 123.8L213.7 122.1L214.5 120.5L216.1 121.3L217.7 122.2L219.3 123L221 123.8L222.6 124.6L224.2 125.5L225.8 126.3L227.4 127.1L227.7 128.2L228 129.3L229.7 130.2L231.4 131L233 131.9L234.7 132.8L236.4 133.6L238.1 134.5L239.8 135.3L241.5 136.2L243.2 137.1L244.9 137.9L246.6 138.8L248.3 139.7L250 140.5L251.6 141.4L253.3 142.2L255 143.1L256.7 144L258.4 144.8L260.1 145.7L261.8 146.6L263.5 147.4L265.2 148.3L266.9 149.1L268.5 150L270.2 150.9L271.9 151.7L273.6 152.6L275.3 153.4L277 154.3L278.7 155.2L280.4 156L282.1 156.9L283.8 157.8L285.4 158.6L287.1 159.5L288.8 160.3L290.5 161.2L292.2 162.1L293.9 162.9L294.6 164L295.4 165.1L296.1 166.2L296 167.4L295.8 168.6L295.6 169.8L295.4 171L294.5 171.9L293.7 172.7L292.8 173.6L292 174.4L290.6 174.4L289.3 174.5L288 174.5L286.3 173.6L284.5 172.7L282.8 171.9L281 171L279.3 170.1L277.6 169.2L275.8 168.3L274.1 167.4L272.4 166.5L270.6 165.7L268.9 164.8L267.2 163.9L265.4 163L263.7 162.1L262 161.2L260.2 160.4L258.5 159.5L256.8 158.6L255 157.7L253.3 156.8L251.6 155.9L249.8 155L248.1 154.2L246.4 153.3L244.6 152.4L242.9 151.5L241.2 150.6L239.4 149.7L237.7 148.8L235.9 148L234.2 147.1L232.5 146.2L230.7 145.3L229 144.4L227.3 143.5L225.5 142.7L223.8 141.8L222.1 140.9L221 141.3L220 141.7L218.3 140.9L216.7 140.1L215.1 139.2L213.5 138.4L211.9 137.6L210.3 136.8L208.7 136Z"/>
<path data-step="3" data-slot="detail" data-paint="--mount --mount-lo" data-alpha="1 1" data-light="286 172 280 186" d="M284.8 158.8L284.9 158.5L285.1 158.1L285.3 157.8L285.5 157.4L285.7 157.1L285.9 156.7L286 156.3L286.2 156L286.4 155.6L286.6 155.3L286.8 154.9L286.9 154.6L287.1 154.2L287.3 153.8L287.5 153.5L287.7 153.1L287.9 152.8L288 152.4L288.2 152.1L288.4 151.7L288.1 151.6L287.8 151.4L287.5 151.3L287.2 151.1L286.9 151L286.6 150.8L286.8 150.5L287 150.1L287.1 149.8L287.3 149.4L287.5 149.1L287.7 148.7L287.8 148.4L288 148.1L288.2 147.7L288.4 147.4L288.5 147L288.7 146.7L288.9 146.3L289.2 146.5L289.6 146.7L290 146.9L290.3 147.1L290.7 147.3L291 147.4L291.4 147.6L291.7 147.8L292.1 148L292.5 148.2L292.8 148.3L293.2 148.5L293.5 148.7L293.9 148.9L294.2 149.1L294.6 149.3L294.9 149.4L295.3 149.6L295.7 149.8L296 150L296.4 150.2L296.7 150.3L297.1 150.5L297.4 150.7L297.8 150.9L297.6 151.2L297.4 151.6L297.3 151.9L297.1 152.3L296.9 152.6L296.7 152.9L296.6 153.3L296.4 153.6L296.2 154L296 154.3L295.9 154.7L295.7 155L295.5 155.3L295.2 155.2L294.9 155L294.6 154.9L294.3 154.7L294 154.6L293.7 154.4L293.6 154.8L293.4 155.1L293.2 155.5L293 155.8L292.9 156.1L292.7 156.5L292.5 156.8L292.4 157.2L292.2 157.5L292 157.8L291.8 158.2L291.7 158.5L291.5 158.8L291.3 159.2L291.1 159.5L291 159.9L290.8 160.2L290.6 160.5L290.5 160.9L290.3 161.2L290.1 161.6L289.8 161.4L289.4 161.2L289.1 161.1L288.8 160.9L288.4 160.7L288.1 160.5L287.8 160.4L287.4 160.2L287.1 160L286.8 159.9L286.4 159.7L286.1 159.5L285.8 159.3L285.4 159.2L285.1 159Z"/>
<path data-land="city" d="M0 216L0 150L1 150L2 150L3 150L4 150L5 150L6 150L7 150L8 150L9 150L10 150L11 150L12 150L13 150L14 150L15 150L16 134L17 134L18 134L19 134L20 134L21 134L22 134L23 134L24 134L25 134L26 134L27 134L28 134L29 134L30 134L31 134L32 134L33 134L34 134L35 134L36 152L37 152L38 152L39 152L40 152L41 152L42 152L43 152L44 152L45 152L46 152L47 152L48 152L49 152L50 152L51 152L52 152L53 152L54 152L55 152L56 140L57 140L58 140L59 140L60 140L61 140L62 140L63 140L64 140L65 140L66 140L67 140L68 140L69 140L70 140L71 140L72 140L73 140L74 140L75 140L76 140L77 140L78 140L79 140L80 158L81 158L82 158L83 158L84 158L85 158L86 158L87 158L88 158L89 158L90 158L91 158L92 158L93 158L94 128L95 128L96 128L97 128L98 128L99 128L100 128L101 128L102 128L103 128L104 128L105 128L106 112L107 112L108 112L109 128L110 128L111 128L112 128L113 128L114 128L115 128L116 128L117 128L118 128L119 128L120 128L121 128L122 148L123 148L124 148L125 148L126 148L127 148L128 148L129 148L130 148L131 148L132 148L133 148L134 148L135 148L136 148L137 148L138 148L139 148L140 148L141 148L142 138L143 138L144 138L145 138L146 138L147 138L148 138L149 138L150 138L151 138L152 138L153 138L154 138L155 138L156 138L157 138L158 138L159 138L160 138L161 138L162 138L163 138L164 138L165 138L166 138L167 138L168 156L169 156L170 156L171 156L172 156L173 156L174 156L175 156L176 156L177 156L178 156L179 156L180 156L181 156L182 156L183 156L184 132L185 132L186 132L187 132L188 132L189 132L190 132L191 132L192 132L193 132L194 132L195 132L196 132L197 132L198 132L199 132L200 132L201 132L202 132L203 132L204 132L205 132L206 146L207 146L208 146L209 146L210 146L211 146L212 146L213 146L214 146L215 146L216 146L217 146L218 146L219 146L220 146L221 146L222 146L223 146L224 146L225 146L226 146L227 146L228 160L229 160L230 160L231 160L232 160L233 160L234 160L235 160L236 160L237 160L238 160L239 160L240 160L241 160L242 160L243 160L244 160L245 160L246 136L247 136L248 136L249 136L250 136L251 136L252 136L253 136L254 136L255 136L256 136L257 136L258 136L259 136L260 136L261 136L262 136L263 136L264 136L265 136L266 136L267 136L268 136L269 136L270 150L271 150L272 150L273 150L274 150L275 150L276 150L277 150L278 150L279 150L280 150L281 150L282 150L283 150L284 150L285 150L286 150L287 150L288 150L289 150L290 134L291 134L292 134L293 134L294 126L295 126L296 126L297 126L298 126L299 126L300 126L301 126L302 126L303 126L304 126L305 126L306 126L307 126L308 126L309 134L310 134L311 134L312 146L313 146L314 146L315 146L316 146L317 146L318 146L319 146L320 146L321 146L322 146L323 146L324 146L325 146L326 146L327 146L328 146L329 146L330 146L331 146L332 146L333 146L334 138L335 138L336 138L337 138L338 138L339 138L340 138L341 138L342 138L343 138L344 138L345 138L346 138L347 138L348 138L349 138L350 138L351 138L352 138L353 138L354 138L355 138L356 138L357 138L358 138L359 138L360 138L360 216Z"/>
<path data-land="suburbs" d="M0 216L0 172L1 172L2 172L3 172L4 171.9L5 171.9L6 171.9L7 171.9L8 171.9L9 171.9L10 160L11 159.2L12 158.4L13 157.7L14 156.9L15 156.1L16 155.3L17 154.6L18 153.8L19 153L20 152.2L21 151.4L22 150.7L23 149.9L24 149.1L25 148.3L26 147.6L27 146.8L28 146L29 146.8L30 147.6L31 148.3L32 149.1L33 149.9L34 150.7L35 151.4L36 152.2L37 153L38 153.8L39 154.6L40 155.3L41 156.1L42 156.9L43 157.7L44 158.4L45 159.2L46 160L47 171.2L48 168.3L49 167.4L50 166.4L51 165.5L52 158.4L53 157.2L54 156L55 148.6L56 146.9L57 145.3L58 143.6L59 142L60 140.3L61 138.7L62 137L63 138.7L64 140.3L65 142L66 143.6L67 145.3L68 146.9L69 148.6L70 156L71 157.2L72 158.4L73 165.5L74 166.4L75 167.4L76 168.3L77 170.8L78 170.8L79 170.7L80 156L81 155.3L82 154.5L83 153.8L84 153.1L85 152.4L86 151.6L87 150.9L88 150.2L89 149.5L90 148.7L91 148L92 147.3L93 146.5L94 145.8L95 145.1L96 144.4L97 143.6L98 142.9L99 142.2L100 141.5L101 140.7L102 140L103 140.7L104 141.5L105 142.2L106 142.9L107 143.6L108 144.4L109 145.1L110 145.8L111 146.5L112 147.3L113 148L114 148.7L115 149.5L116 150.2L117 150.9L118 151.6L119 152.4L120 153.1L121 153.8L122 154.5L123 155.3L124 156L125 170L126 170L127 170L128 170L129 169.9L130 169.9L131 169.9L132 162L133 161.2L134 160.4L135 159.6L136 158.9L137 158.1L138 157.3L139 156.5L140 155.7L141 154.9L142 154.1L143 153.4L144 152.6L145 151.8L146 151L147 151.8L148 152.6L149 153.4L150 154.1L151 154.9L152 155.7L153 156.5L154 157.3L155 158.1L156 158.9L157 159.6L158 160.4L159 161.2L160 162L161 169.4L162 169.4L163 166.1L164 165.1L165 164.2L166 163.2L167 155.4L168 154.1L169 152.9L170 151.7L171 143.2L172 141.5L173 139.8L174 138L175 136.3L176 134.6L177 132.9L178 131.2L179 132.9L180 134.6L181 136.3L182 138L183 139.8L184 141.5L185 143.2L186 151.7L187 152.9L188 154.1L189 155.4L190 163.2L191 164.2L192 165.1L193 166.1L194 168.9L195 168.9L196 168.9L197 168.8L198 154L199 153.3L200 152.6L201 151.9L202 151.2L203 150.5L204 149.8L205 149.1L206 148.4L207 147.7L208 147L209 146.3L210 145.7L211 145L212 144.3L213 143.6L214 142.9L215 142.2L216 141.5L217 140.8L218 140.1L219 139.4L220 138.7L221 138L222 138.7L223 139.4L224 140.1L225 140.8L226 141.5L227 142.2L228 142.9L229 143.6L230 144.3L231 145L232 145.7L233 146.3L234 147L235 147.7L236 148.4L237 149.1L238 149.8L239 150.5L240 151.2L241 151.9L242 152.6L243 153.3L244 154L245 168.1L246 168.1L247 168L248 168L249 165.3L250 164.4L251 163.5L252 157.1L253 155.9L254 154.8L255 153.6L256 146.5L257 144.9L258 143.3L259 141.7L260 140.1L261 138.4L262 136.8L263 138.4L264 140.1L265 141.7L266 143.3L267 144.9L268 146.5L269 153.6L270 154.8L271 155.9L272 157.1L273 163.5L274 164.4L275 165.3L276 167.6L277 167.6L278 167.6L279 167.5L280 160L281 159.3L282 158.5L283 157.8L284 157L285 156.3L286 155.5L287 154.8L288 154L289 153.3L290 152.5L291 151.8L292 151L293 150.3L294 149.5L295 148.8L296 148L297 148.8L298 149.5L299 150.3L300 151L301 151.8L302 152.5L303 153.3L304 154L305 154.8L306 155.5L307 156.3L308 157L309 157.8L310 158.5L311 159.3L312 160L313 167L314 167L315 167L316 163.9L317 163L318 162L319 161.1L320 153.7L321 152.5L322 151.3L323 143.6L324 141.9L325 140.2L326 138.5L327 136.8L328 135.1L329 133.4L330 131.7L331 133.4L332 135.1L333 136.8L334 138.5L335 140.2L336 141.9L337 143.6L338 151.3L339 152.5L340 153.7L341 161.1L342 162L343 163L344 163.9L345 166.5L346 158L347 157.3L348 156.6L349 155.9L350 155.2L351 154.5L352 153.8L353 153.1L354 152.4L355 151.6L356 150.9L357 150.2L358 149.5L359 148.8L360 148.1L360 216Z"/>
<path data-land="country" d="M0 216L0 169.5L1 169.4L2 169.4L3 169.4L4 169.3L5 169.3L6 169.2L7 169.2L8 169.1L9 169L10 169L11 168.9L12 168.8L13 168.8L14 168.7L15 168.6L16 168.5L17 168.4L18 168.3L19 168.2L20 168.1L21 168L22 167.9L23 167.8L24 167.7L25 167.5L26 167.4L27 167.3L28 167.2L29 167L30 166.9L31 166.7L32 166.6L33 166.5L34 166.3L35 166.2L36 166L37 165.8L38 165.7L39 165.5L40 165.4L41 165.2L42 165L43 164.9L44 164.7L45 164.6L46 164.4L47 164.2L48 164.1L49 163.9L50 163.8L51 163.6L52 163.4L53 163.3L54 163.1L55 163L56 162.8L57 162.7L58 162.6L59 162.4L60 162.3L61 162.2L62 162L63 161.9L64 161.8L65 161.7L66 161.6L67 161.5L68 161.4L69 161.3L70 161.2L71 161.1L72 161.1L73 161L74 160.9L75 160.9L76 160.9L77 160.8L78 160.8L79 160.8L80 160.7L81 160.7L82 160.7L83 160.7L84 160.8L85 160.8L86 160.8L87 160.9L88 160.9L89 161L90 161L91 161.1L92 161.2L93 161.2L94 161.3L95 161.4L96 161.6L97 161.7L98 161.6L99 159.4L100 157.2L101 155L102 152.8L103 150.6L104 148.4L105 147.8L106 147.2L107 146.6L108 146L109 145.4L110 144.8L111 144.2L112 143.6L113 143L114 143.6L115 144.2L116 144.8L117 145.4L118 146L119 146.6L120 147.2L121 147.8L122 148.4L123 150.6L124 152.8L125 155L126 157.2L127 159.4L128 161.6L129 168.4L130 168.6L131 168.9L132 169.2L133 169.4L134 169.7L135 169.9L136 170.2L137 170.4L138 170.7L139 170.9L140 171.2L141 171.4L142 171.7L143 171.9L144 172.1L145 172.4L146 172.6L147 172.8L148 173L149 173.2L150 173.4L151 173.6L152 173.8L153 174L154 174.2L155 174.4L156 174.6L157 174.7L158 174.9L159 175L160 175.2L161 175.3L162 175.5L163 175.6L164 175.7L165 175.8L166 175.9L167 176L168 176.1L169 176.2L170 176.3L171 176.4L172 176.4L173 176.5L174 176.5L175 176.6L176 176.6L177 176.7L178 176.7L179 176.7L180 176.7L181 176.8L182 176.8L183 176.8L184 176.8L185 176.7L186 176.7L187 176.7L188 176.7L189 176.7L190 176.6L191 176.6L192 176.5L193 176.5L194 176.4L195 176.4L196 176.3L197 176.3L198 176.2L199 176.1L200 176.1L201 176L202 175.9L203 175.9L204 175.8L205 175.7L206 175.6L207 175.6L208 175.5L209 175.4L210 175.3L211 175.3L212 175.2L213 175.1L214 175L215 174.9L216 174.9L217 174.8L218 174.7L219 174.7L220 174.6L221 174.5L222 174.5L223 174.4L224 174.3L225 174.3L226 174.2L227 174.2L228 174.1L229 174.1L230 174L231 174L232 174L233 173.9L234 173.9L235 173.9L236 173.8L237 173.8L238 173.8L239 173.8L240 173.8L241 173.8L242 173.8L243 173.8L244 173.8L245 173.8L246 173.8L247 173.8L248 173.8L249 173.8L250 173.8L251 173.8L252 173.8L253 173.8L254 173.8L255 173.8L256 173.8L257 173.8L258 173.8L259 173.8L260 173.8L261 173.8L262 173.8L263 173.8L264 173.8L265 173.8L266 173.8L267 173.8L268 173.8L269 173.8L270 173.8L271 173.8L272 173.8L273 173.8L274 173.8L275 173.7L276 173.7L277 173.7L278 173.7L279 173.7L280 173.7L281 173.6L282 173.6L283 173.6L284 173.5L285 173.5L286 173.4L287 173.4L288 173.3L289 173.3L290 173.2L291 173.1L292 173L293 173L294 172.9L295 172.8L296 172.7L297 172.6L298 172.5L299 172.4L300 172.2L301 172.1L302 172L303 171.9L304 171.7L305 171.6L306 171.4L307 171.3L308 171.1L309 170.9L310 170.7L311 169.1L312 153.8L313 146.7L314 141.7L315 138.1L316 135.5L317 133.8L318 133.1L319 133.8L320 135.5L321 138.1L322 141.7L323 146.7L324 153.8L325 167.5L326 167.3L327 167L328 166.8L329 166.5L330 166.2L331 166L332 165.7L333 165.4L334 165.2L335 164.9L336 164.7L337 164.4L338 164.1L339 163.8L340 163.6L341 163.3L342 163L343 162.8L344 162.5L345 162.3L346 162L347 161.7L348 161.5L349 161.2L350 161L351 160.7L352 160.5L353 160.3L354 160L355 159.8L356 159.6L357 159.4L358 159.2L359 159L360 158.8L360 216Z"/>
</svg>
<button class="skip" type="button" aria-label="Skip to the last step" data-skip>Skip</button>
</div>
<div class="sheet">
<ol class="trail" aria-label="Setting up" data-trail>
<li class="trail__step"><button class="trail__name" type="button">Sky</button></li>
<li class="trail__step"><button class="trail__name" type="button">Interests</button></li>
<li class="trail__step"><button class="trail__name" type="button">Alerts</button></li>
<li class="trail__step"><button class="trail__name" type="button">Ready</button></li>
</ol>
<div class="panels" data-panels>
<section class="panel" aria-labelledby="lune-t-sky" data-panel>
<h2 class="panel__title" id="lune-t-sky" tabindex="-1">Where do you look up from?</h2>
<p class="panel__line">Darker skies show more stars. We plan each night around yours.</p>
<fieldset class="choices" data-choices="sky">
<legend class="sr-only">Where you watch the sky from</legend>
<label class="chip"><input type="radio" name="lune-sky" value="city"><span class="chip__face">City</span></label>
<label class="chip"><input type="radio" name="lune-sky" value="suburbs" checked><span class="chip__face">Suburbs</span></label>
<label class="chip"><input type="radio" name="lune-sky" value="country"><span class="chip__face">Countryside</span></label>
</fieldset>
</section>
<section class="panel" aria-labelledby="lune-t-find" data-panel>
<h2 class="panel__title" id="lune-t-find" tabindex="-1">What would you like to find?</h2>
<p class="panel__line" data-find-line aria-live="polite">Pick as many as you like. We start with the easiest.</p>
<fieldset class="choices" data-choices="find">
<legend class="sr-only">What you would like to find</legend>
<label class="chip"><input type="checkbox" name="lune-find" value="planets" checked><span class="chip__face">Planets</span></label>
<label class="chip"><input type="checkbox" name="lune-find" value="meteors"><span class="chip__face">Meteors</span></label>
<label class="chip"><input type="checkbox" name="lune-find" value="deep"><span class="chip__face">Deep sky</span></label>
</fieldset>
</section>
<section class="panel" aria-labelledby="lune-t-alerts" data-panel>
<h2 class="panel__title" id="lune-t-alerts" tabindex="-1">When should we nudge you?</h2>
<p class="panel__line">One note on clear nights, and never more than that.</p>
<fieldset class="choices" data-choices="alerts">
<legend class="sr-only">When to be nudged</legend>
<label class="chip"><input type="radio" name="lune-alerts" value="dusk"><span class="chip__face">At dusk</span></label>
<label class="chip"><input type="radio" name="lune-alerts" value="9" checked><span class="chip__face">9 pm</span></label>
<label class="chip"><input type="radio" name="lune-alerts" value="10"><span class="chip__face">10 pm</span></label>
</fieldset>
</section>
<section class="panel" aria-labelledby="lune-t-ready" data-panel>
<h2 class="panel__title" id="lune-t-ready" tabindex="-1">You’re set for tonight</h2>
<p class="panel__line" data-ready-line>Saturn is up all evening. We’ll nudge you at 9 pm.</p>
<div class="recap" data-recap>
<button class="recap__item" type="button" data-recap-step="0"></button>
<button class="recap__item" type="button" data-recap-step="1"></button>
<button class="recap__item" type="button" data-recap-step="2"></button>
</div>
</section>
</div>
<div class="actions">
<button class="pill pill--quiet" type="button" data-back>
<span class="pill__bg" aria-hidden="true"></span>
<span class="pill__text">Back</span>
</button>
<button class="pill pill--go" type="button" data-next>
<span class="pill__bg" aria-hidden="true"></span>
<span class="pill__clip"><span class="pill__text" data-next-text>Continue</span></span>
</button>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/MorphSVGPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/CustomEase.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.
83 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 «I passi della luna crescente» da Animorio e adattala al mio sitoIl disegno di ogni passo è fatto delle stesse quattro forme: quella dietro, il corpo, quella davanti e un dettaglio (l'anello dietro, il pianeta, l'anello davanti e la fascia; la coda di ioni, la testa, la coda di polvere e il nucleo; il treppiede, la testa della montatura, il tubo e l'oculare). Le forme di tutti i passi stanno in un SVG nascosto, e MorphSVG porta ciascuna nella sua del passo dopo, con la stessa curva per tutte. Per non torcerle sono tutte ricampionate con 120 punti alla stessa distanza, a partire dal punto più a sinistra e in senso orario: così i punti si corrispondono uno a uno. Nel primo passo l'anello e la fascia sono Saturno rimpicciolito dentro la stella, invisibile: entrando cresce come se ci si avvicinasse.
Ogni forma è riempita da un suo linearGradient in coordinate del disegno. Per ogni passo l'SVG nascosto dice i due colori (due variabili di :root), le due opacità e la linea su cui corre il gradiente: GSAP porta questi dodici numeri insieme alla forma e lo script li riscrive sugli stop. Così la coda della cometa sfuma verso la punta, il tubo del cannocchiale ha la luce sul bordo di sopra e le forme che nel primo passo non si vedono hanno opacità zero.
La parte illuminata della luna è un tracciato riscritto a ogni fotogramma da un solo numero, quanto è illuminata: il bordo tondo a destra dall'alto in basso, poi su lungo il terminatore, una mezza ellisse larga quanto il raggio per il valore assoluto di uno meno due volte la fase, che sotto la metà si curva a destra (la falce) e sopra la metà a sinistra (la gobba). Lo stesso tracciato è il clipPath delle macchie chiare; sotto, il disco scuro con le sue macchie è la parte rischiarata dalla Terra.
I tre paesaggi sono funzioni dell'altezza campionate a ogni pixel, 361 punti l'uno: palazzi coi muri dritti, case col tetto a punta e abeti a tre palchi, colline col fienile e il cipresso. Avendo i punti alla stessa ascissa, MorphSVG li trasforma solo in su e in giù, e la città affonda nelle colline senza scivolare. Ogni stella ha un livello: in città si vedono le più luminose, in periferia anche le medie, in campagna tutte, e compaiono in un ordine sparso; l'alone dei lampioni, i colori del cielo e la Via Lattea, una nebbia larga e un cuore stretto sfocati con feGaussianBlur, seguono la scelta. Il gruppo delle stelle gira di SKY_TURN gradi a ogni passo intorno a un punto sopra il disegno.
I nomi dei passi sono un elenco ordinato con aria-current step; quelli fatti sono pulsanti che tornano indietro, gli altri disattivati. Le scelte sono radio e checkbox veri dentro un fieldset; il titolo del passo nuovo prende il fuoco, i passi nascosti sono inert. Le parole di ogni passo hanno il loro tween, fermato prima del successivo: clic fitti non lasciano nulla a metà. L'anteprima della libreria clicca la scheda (un clic senza mano): avanti, avanti, indietro, avanti fino alla fine, di nuovo dall'inizio, poi un altro posto, città, campagna o periferia.
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
MOVE | script.js | 0.62 | I secondi di un cambio di passo: il disegno, la luna e le parole. |
PHASE | script.js | CustomEase.create('phase', '0.35, 0, 0.1, 1') | La curva del cambio di passo: parte svelta e si posa piano. |
LIT | script.js | [0.18, 0.5, 0.8, 1] | Quanta luna è illuminata a ogni passo, dalla falce alla luna piena (da 0 a 1). |
SKY_TURN | script.js | 3.5 | I gradi di cui girano le stelle a ogni passo, come la notte che va avanti. |
SLIDE | script.js | 18 | Di quanti pixel scivolano le parole di un passo entrando e uscendo. |
TONIGHT | script.js | ['Saturn is up all evening.', 'The Orionids are falling all week.', 'Andromeda is high after dark.'] | La riga dell'ultimo passo, secondo il primo interesse scelto: pianeti, meteore, cielo profondo. |
Per il primo avvio di un'app, un'iscrizione in pochi passi, la configurazione di un servizio: ovunque si vuole che le prime scelte sembrino già l'esperienza vera, col disegno che risponde e un segno dell'avanzamento legato al prodotto invece di una barra o di un conteggio.
La scheda prende la larghezza dello schermo meno 16 pixel per lato (358 su un telefono di 390) e il disegno si ridimensiona con le sue proporzioni; il titolo scende a 22 pixel, le scelte stanno su una riga alte 44 pixel, i pulsanti 48. Skip e i nomi dei passi hanno un'area da toccare di 44 pixel anche se il disegno è più piccolo. Stesse animazioni del computer.
Niente trasformazioni né cielo che gira: a ogni passo il disegno e la parte illuminata della luna sfumano, cambiano e ricompaiono; il paesaggio scelto sfuma da uno all'altro; le parole compaiono senza scivolare; l'indaco delle scelte arriva in dissolvenza e i pulsanti non si gonfiano.
GSAP 3.15.0, MorphSVG (GSAP) 3.15.0, CustomEase (GSAP) 3.15.0, Bricolage Grotesque (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 30 KB; le librerie: GSAP + CustomEase + MorphSVG 41 KB.
Provata il 7 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.