spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/backgrounds/topo-lines-morph.html7  Desc   : Topographic contour lines slowly morphing, map-style8  ============================================================9-->10<!--svgarden11title: Topo lines morph12slug: topo-lines-morph13category: backgrounds14tags: [background, topographic, morph, smil]15difficulty: advanced16techniques: [SMIL-path-morph, matched-path-structure, staggered-durations, layered-opacity]17how_it_works: >18  Five nested contour rings each morph between two variants of themselves with19  a SMIL animate on the d attribute — and as with every path morph, the two20  variants must share the exact same command skeleton (here one M plus four21  cubics) or the browser snaps instead of tweening. The meditative quality22  comes from the timing design: every ring gets a different duration and a23  negative begin offset, so no two contours ever breathe in phase, exactly24  like elevation lines redrawn between survey years. Opacity falls off toward25  the outer rings to fake the fading detail of a real map.26customizable:27  - { var: "--sg-color", label: "Contour color", type: color, default: "#7F77DD" }28  - { var: "--sg-bg",    label: "Map background", type: color, default: "#101623" }29  - { var: "--sg-size",  label: "Height",         type: range, min: 100, max: 300, default: 180, unit: px }30created: 2026-08-1031-->32<div class="sg-topo-lines-morph" style="--sg-color:#7F77DD; --sg-bg:#101623; --sg-size:180px;">33  <svg viewBox="0 0 240 160" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false">34    <rect class="sg-topo-lines-morph-paper" x="0" y="0" width="240" height="160" />35    <g class="sg-topo-lines-morph-rings">36      <path opacity="0.95">37        <animate attributeName="d" dur="14s" begin="-2s" repeatCount="indefinite"38          values="M130 78 C130 84.6 124.6 90 118 90 C111.4 90 106 84.6 106 78 C106 71.4 111.4 66 118 66 C124.6 66 130 71.4 130 78 Z;39                  M133 77 C132 84 125 92 117 91 C110 90 104 84 105 77 C106 70 112 65 119 66 C126 67 134 70 133 77 Z;40                  M130 78 C130 84.6 124.6 90 118 90 C111.4 90 106 84.6 106 78 C106 71.4 111.4 66 118 66 C124.6 66 130 71.4 130 78 Z" />41      </path>42      <path opacity="0.8">43        <animate attributeName="d" dur="18s" begin="-5s" repeatCount="indefinite"44          values="M144 78 C144 92.4 132.4 104 118 104 C103.6 104 92 92.4 92 78 C92 63.6 103.6 52 118 52 C132.4 52 144 63.6 144 78 Z;45                  M149 75 C147 90 134 108 116 106 C100 104 88 92 90 75 C92 60 104 49 120 51 C136 53 151 60 149 75 Z;46                  M144 78 C144 92.4 132.4 104 118 104 C103.6 104 92 92.4 92 78 C92 63.6 103.6 52 118 52 C132.4 52 144 63.6 144 78 Z" />47      </path>48      <path opacity="0.65">49        <animate attributeName="d" dur="22s" begin="-8s" repeatCount="indefinite"50          values="M158 78 C158 100 140 118 118 118 C96 118 78 100 78 78 C78 56 96 38 118 38 C140 38 158 56 158 78 Z;51                  M164 74 C162 96 142 122 116 119 C92 116 72 98 75 74 C78 52 96 35 121 38 C144 41 166 52 164 74 Z;52                  M158 78 C158 100 140 118 118 118 C96 118 78 100 78 78 C78 56 96 38 118 38 C140 38 158 56 158 78 Z" />53      </path>54      <path opacity="0.5">55        <animate attributeName="d" dur="26s" begin="-11s" repeatCount="indefinite"56          values="M172 78 C172 107.8 147.8 132 118 132 C88.2 132 64 107.8 64 78 C64 48.2 88.2 24 118 24 C147.8 24 172 48.2 172 78 Z;57                  M179 73 C176 102 152 136 115 132 C82 128 58 106 61 73 C64 44 88 21 122 25 C152 29 182 44 179 73 Z;58                  M172 78 C172 107.8 147.8 132 118 132 C88.2 132 64 107.8 64 78 C64 48.2 88.2 24 118 24 C147.8 24 172 48.2 172 78 Z" />59      </path>60      <path opacity="0.35">61        <animate attributeName="d" dur="30s" begin="-14s" repeatCount="indefinite"62          values="M186 78 C186 115.5 155.5 146 118 146 C80.5 146 50 115.5 50 78 C50 40.5 80.5 10 118 10 C155.5 10 186 40.5 186 78 Z;63                  M193 72 C189 108 158 150 114 145 C76 141 44 112 48 72 C52 36 82 8 124 12 C158 15 197 36 193 72 Z;64                  M186 78 C186 115.5 155.5 146 118 146 C80.5 146 50 115.5 50 78 C50 40.5 80.5 10 118 10 C155.5 10 186 40.5 186 78 Z" />65      </path>66    </g>67    <circle class="sg-topo-lines-morph-peak" cx="118" cy="78" r="2" />68  </svg>69</div>70<style>71  .sg-topo-lines-morph {72    width: 100%;73    min-width: 240px;74    height: var(--sg-size);75    overflow: hidden;76    border-radius: 8px;77  }78  .sg-topo-lines-morph svg {79    display: block;80    width: 100%;81    height: 100%;82  }83  .sg-topo-lines-morph-paper {84    fill: var(--sg-bg);85  }86  .sg-topo-lines-morph-rings path {87    fill: none;88    stroke: var(--sg-color);89    stroke-width: 1.6;90  }91  .sg-topo-lines-morph-peak {92    fill: var(--sg-color);93  }94</style>95