AI CSS Animations

Topographic Background

Contour lines of a hill with two summits, drawn as hairlines on pale paper, with a slow twist rolling outward through them so the map seems to shift. Every fifth line is a bolder index contour.

Also known as: topographic lines background css, contour lines background, topo map pattern.

HTML

<div class="bgx-topographic-lines" aria-hidden="true">
  <svg class="bgx-topographic-lines-map" viewBox="0 0 1000 600">
    <defs>
      <path id="bgx-topographic-lines-hill" d="M11.93 0C12.16 1.37 11.45 3.22 10.66 4.41C9.87 5.61 8.32 6.37 7.18 7.18C6.05 7.99 5.04 8.85 3.84 9.28C2.65 9.7 1.2 9.9 0 9.72C-1.2 9.53 -2.32 8.72 -3.38 8.15C-4.43 7.59 -5.46 7.1 -6.34 6.34C-7.22 5.58 -8.09 4.65 -8.68 3.6C-9.27 2.54 -9.54 1.34 -9.88 0C-10.22 -1.34 -10.9 -2.97 -10.73 -4.44C-10.55 -5.91 -9.94 -7.94 -8.83 -8.83C-7.71 -9.71 -5.51 -9.81 -4.04 -9.75C-2.57 -9.69 -1.18 -8.86 0 -8.48C1.18 -8.09 2.08 -7.84 3.07 -7.42C4.06 -6.99 4.9 -6.53 5.93 -5.93C6.96 -5.34 8.25 -4.82 9.25 -3.83C10.25 -2.84 11.7 -1.37 11.93 0Z" vector-effect="non-scaling-stroke" />
      <path id="bgx-topographic-lines-peak" d="M12.03 0C12.03 1.42 11.1 3.09 10.26 4.25C9.42 5.42 8.17 6.41 6.99 6.99C5.81 7.56 4.35 7.61 3.18 7.68C2.02 7.75 1.12 7.26 0 7.41C-1.12 7.55 -2.16 8.4 -3.54 8.54C-4.91 8.68 -7.01 8.91 -8.24 8.24C-9.46 7.56 -10.4 5.87 -10.86 4.5C-11.33 3.13 -11.22 1.41 -11 0C-10.77 -1.41 -10.28 -2.87 -9.52 -3.94C-8.75 -5.01 -7.45 -5.72 -6.42 -6.42C-5.4 -7.12 -4.44 -7.62 -3.37 -8.14C-2.3 -8.66 -1.16 -9.48 0 -9.57C1.16 -9.65 2.47 -9.12 3.58 -8.64C4.68 -8.15 5.52 -7.37 6.64 -6.64C7.75 -5.91 9.37 -5.36 10.27 -4.25C11.17 -3.15 12.03 -1.42 12.03 0Z" vector-effect="non-scaling-stroke" />
    </defs>
    <g transform="translate(430 330)">
      <use href="#bgx-topographic-lines-hill" style="--k: 6; --i: 0" />
      <use href="#bgx-topographic-lines-hill" style="--k: 7.02; --i: 1" />
      <use href="#bgx-topographic-lines-hill" style="--k: 8.08; --i: 2" />
      <use href="#bgx-topographic-lines-hill" style="--k: 9.18; --i: 3" />
      <use href="#bgx-topographic-lines-hill" class="bgx-topographic-lines-major" style="--k: 10.32; --i: 4" />
      <use href="#bgx-topographic-lines-hill" style="--k: 11.5; --i: 5" />
      <use href="#bgx-topographic-lines-hill" style="--k: 12.72; --i: 6" />
      <use href="#bgx-topographic-lines-hill" style="--k: 13.98; --i: 7" />
      <use href="#bgx-topographic-lines-hill" style="--k: 15.28; --i: 8" />
      <use href="#bgx-topographic-lines-hill" class="bgx-topographic-lines-major" style="--k: 16.62; --i: 9" />
      <use href="#bgx-topographic-lines-hill" style="--k: 18; --i: 10" />
      <use href="#bgx-topographic-lines-hill" style="--k: 19.42; --i: 11" />
      <use href="#bgx-topographic-lines-hill" style="--k: 20.88; --i: 12" />
      <use href="#bgx-topographic-lines-hill" style="--k: 22.38; --i: 13" />
      <use href="#bgx-topographic-lines-hill" class="bgx-topographic-lines-major" style="--k: 23.92; --i: 14" />
      <use href="#bgx-topographic-lines-hill" style="--k: 25.5; --i: 15" />
      <use href="#bgx-topographic-lines-hill" style="--k: 27.12; --i: 16" />
      <use href="#bgx-topographic-lines-hill" style="--k: 28.78; --i: 17" />
      <use href="#bgx-topographic-lines-hill" style="--k: 30.48; --i: 18" />
      <use href="#bgx-topographic-lines-hill" class="bgx-topographic-lines-major" style="--k: 32.22; --i: 19" />
      <use href="#bgx-topographic-lines-hill" style="--k: 34; --i: 20" />
      <use href="#bgx-topographic-lines-hill" style="--k: 35.82; --i: 21" />
      <use href="#bgx-topographic-lines-hill" style="--k: 37.68; --i: 22" />
      <use href="#bgx-topographic-lines-hill" style="--k: 39.58; --i: 23" />
      <use href="#bgx-topographic-lines-hill" class="bgx-topographic-lines-major" style="--k: 41.52; --i: 24" />
      <use href="#bgx-topographic-lines-hill" style="--k: 43.5; --i: 25" />
      <use href="#bgx-topographic-lines-hill" style="--k: 45.52; --i: 26" />
      <use href="#bgx-topographic-lines-hill" style="--k: 47.58; --i: 27" />
      <use href="#bgx-topographic-lines-hill" style="--k: 49.68; --i: 28" />
      <use href="#bgx-topographic-lines-hill" class="bgx-topographic-lines-major" style="--k: 51.82; --i: 29" />
      <use href="#bgx-topographic-lines-hill" style="--k: 54; --i: 30" />
      <use href="#bgx-topographic-lines-hill" style="--k: 56.22; --i: 31" />
      <use href="#bgx-topographic-lines-hill" style="--k: 58.48; --i: 32" />
      <use href="#bgx-topographic-lines-hill" style="--k: 60.78; --i: 33" />
      <use href="#bgx-topographic-lines-hill" class="bgx-topographic-lines-major" style="--k: 63.12; --i: 34" />
      <use href="#bgx-topographic-lines-hill" style="--k: 65.5; --i: 35" />
      <use href="#bgx-topographic-lines-hill" style="--k: 67.92; --i: 36" />
      <use href="#bgx-topographic-lines-hill" style="--k: 70.38; --i: 37" />
      <use href="#bgx-topographic-lines-hill" style="--k: 72.88; --i: 38" />
      <use href="#bgx-topographic-lines-hill" class="bgx-topographic-lines-major" style="--k: 75.42; --i: 39" />
      <use href="#bgx-topographic-lines-hill" style="--k: 78; --i: 40" />
      <use href="#bgx-topographic-lines-hill" style="--k: 80.62; --i: 41" />
      <use href="#bgx-topographic-lines-hill" style="--k: 83.28; --i: 42" />
      <use href="#bgx-topographic-lines-hill" style="--k: 85.98; --i: 43" />
      <use href="#bgx-topographic-lines-hill" class="bgx-topographic-lines-major" style="--k: 88.72; --i: 44" />
      <use href="#bgx-topographic-lines-hill" style="--k: 91.5; --i: 45" />
      <use href="#bgx-topographic-lines-hill" style="--k: 94.32; --i: 46" />
      <use href="#bgx-topographic-lines-hill" style="--k: 97.18; --i: 47" />
      <use href="#bgx-topographic-lines-hill" style="--k: 100.08; --i: 48" />
      <use href="#bgx-topographic-lines-hill" class="bgx-topographic-lines-major" style="--k: 103.02; --i: 49" />
      <g transform="translate(-23.4 -20.3)">
        <use href="#bgx-topographic-lines-peak" style="--k: 0.7; --i: 0" />
        <use href="#bgx-topographic-lines-peak" style="--k: 1.45; --i: 1" />
        <use href="#bgx-topographic-lines-peak" style="--k: 2.2; --i: 2" />
      </g>
      <g transform="translate(21.1 18.4)">
        <use href="#bgx-topographic-lines-peak" style="--k: 0.65; --i: 1" />
        <use href="#bgx-topographic-lines-peak" style="--k: 1.3; --i: 2" />
        <use href="#bgx-topographic-lines-peak" style="--k: 2; --i: 3" />
      </g>
    </g>
  </svg>
</div>

CSS

.bgx-topographic-lines {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--c) 7%, #fbfaf6);
}
.bgx-topographic-lines-map {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80em;
  height: 48em;
  margin: -24em 0 0 -40em;
  overflow: visible;
}
.bgx-topographic-lines-map use {
  fill: none;
  stroke: color-mix(in srgb, var(--c) 38%, transparent);
  stroke-width: 1;
  transform-box: view-box;
  transform-origin: 0 0;
  transform: scale(var(--k));
  animation: bgx-topographic-lines-drift 12s ease-in-out calc(var(--i) * 0.3s - 24s) infinite;
}
.bgx-topographic-lines-map .bgx-topographic-lines-major {
  stroke: color-mix(in srgb, var(--c) 62%, transparent);
  stroke-width: 1.6;
}
@keyframes bgx-topographic-lines-drift {
  0%, 100% { transform: rotate(-3deg) scale(var(--k)); }
  50%      { transform: rotate(3deg) scale(var(--k)); }
}

@media (prefers-reduced-motion: reduce) {
  .bgx-topographic-lines, .bgx-topographic-lines *, .bgx-topographic-lines::before, .bgx-topographic-lines::after, .bgx-topographic-lines *::before, .bgx-topographic-lines *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --bgx-color on the element or a parent. Currently previewing #3b82f6.
  • Pattern scale: set --bgx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar animated backgrounds

Particle Network Background
Orbiting Planets Background
Animated Stripes Background
Hexagon Background