Topo lines morph

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/backgrounds/topo-lines-morph.html
  Desc   : Topographic contour lines slowly morphing, map-style
  ============================================================
-->
<div class="sg-topo-lines-morph" style="--sg-color:#7F77DD; --sg-bg:#101623; --sg-size:180px;">
  <svg viewBox="0 0 240 160" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false">
    <rect class="sg-topo-lines-morph-paper" x="0" y="0" width="240" height="160" />
    <g class="sg-topo-lines-morph-rings">
      <path opacity="0.95">
        <animate attributeName="d" dur="14s" begin="-2s" repeatCount="indefinite"
          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;
                  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;
                  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" />
      </path>
      <path opacity="0.8">
        <animate attributeName="d" dur="18s" begin="-5s" repeatCount="indefinite"
          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;
                  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;
                  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" />
      </path>
      <path opacity="0.65">
        <animate attributeName="d" dur="22s" begin="-8s" repeatCount="indefinite"
          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;
                  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;
                  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" />
      </path>
      <path opacity="0.5">
        <animate attributeName="d" dur="26s" begin="-11s" repeatCount="indefinite"
          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;
                  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;
                  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" />
      </path>
      <path opacity="0.35">
        <animate attributeName="d" dur="30s" begin="-14s" repeatCount="indefinite"
          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;
                  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;
                  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" />
      </path>
    </g>
    <circle class="sg-topo-lines-morph-peak" cx="118" cy="78" r="2" />
  </svg>
</div>
<style>
  .sg-topo-lines-morph {
    width: 100%;
    min-width: 240px;
    height: var(--sg-size);
    overflow: hidden;
    border-radius: 8px;
  }
  .sg-topo-lines-morph svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .sg-topo-lines-morph-paper {
    fill: var(--sg-bg);
  }
  .sg-topo-lines-morph-rings path {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 1.6;
  }
  .sg-topo-lines-morph-peak {
    fill: var(--sg-color);
  }
</style>