Survey

Sparse

Three peaks at three scales across the right of the sheet, each with its own count of rings, as a surveyor would plot them.

“Copy the hero” is the styles and the SVG, carrying the colours and speed you set above. “Copy as a section” adds the wrapper a hero actually needs: the SVG absolute behind the copy, inert to the pointer, and a scrim so the heading holds. The Free licence asks for one visible credit per page: Animation by Pulsar, linked to Pulsar. Licence

Tech: CSS, no JavaScript
Longest band: 23 s, mirrored, loops
Canvas: 1600 by 900, stretches to fill
Default tone: Light ground: ground #f7f7fb, ink #1d1b3a
Family: Contour · Lines
Tags: contour relief rings

The four variables

Set any of these on the section, or on any ancestor, and the hero follows. Nothing else in the file needs editing.

--pulsar-hero-bg: the ground, default #f7f7fb
--pulsar-hero-ink: the strokes, default #1d1b3a
--pulsar-accent: the accented strokes
--pulsar-hero-speed: a rate: 2 is twice as fast, 0.5 half speed

Files

Animated SVG

One file, styles inside it, animates in an img tag or on its own.Download animated SVG

The code

As a section

<!-- Pulsar by Business Nebula · "hero-contour-survey" · https://pulsaricons.com | Licence: https://pulsaricons.com/legal/licence | Free-licence credit: Animation by Pulsar, linked to https://pulsaricons.com | Business Nebula: https://businessnebula.com.au -->
<style>
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 5rem 5%;
  color: #1d1b3a;
  background: #f7f7fb;
}
.hero > .pulsar-hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* A scrim under the copy, heavier on the side the text sits on. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, #f7f7fb 0%, color-mix(in oklab, #f7f7fb 78%, transparent) 40%, transparent 68%);
}
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 40rem;
}
.hero-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
}
/* Generated by scripts/hero-contour.mjs from heroes/hero-contour-survey/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #f7f7fb)
     --pulsar-hero-ink    the contour rings   (default #1d1b3a)
     --pulsar-accent      the index rings     (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-contour-survey {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-contour-survey .hero-contour-survey-ground {
  fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-contour-survey .hero-contour-survey-ring {
  fill: none;
  stroke: currentColor;
}
.pulsar-hero-contour-survey .hero-contour-survey-accent {
  stroke: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-contour-survey .hero-contour-survey-ground-stop {
  stop-color: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-contour-survey .hero-contour-survey-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-contour-survey .hero-contour-survey-band-1 {
  transform-origin: 1360px 240px;
  animation-name: hero-contour-survey-band-1;
  animation-duration: calc(13s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-contour-survey .hero-contour-survey-band-2 {
  transform-origin: 980px 620px;
  animation-name: hero-contour-survey-band-2;
  animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-contour-survey .hero-contour-survey-band-3 {
  transform-origin: 1490px 770px;
  animation-name: hero-contour-survey-band-3;
  animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-contour-survey-band-1 {
  from {
    transform: translate(-24px, -14px) scale(0.98);
  }
  to {
    transform: translate(24px, 14px) scale(1.02);
  }
}
@keyframes hero-contour-survey-band-2 {
  from {
    transform: translate(24px, 14px) scale(0.98);
  }
  to {
    transform: translate(-24px, -14px) scale(1.02);
  }
}
@keyframes hero-contour-survey-band-3 {
  from {
    transform: translate(-24px, -14px) scale(0.98);
  }
  to {
    transform: translate(24px, 14px) scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-contour-survey .hero-contour-survey-band-1,
  .pulsar-hero-contour-survey .hero-contour-survey-band-2,
  .pulsar-hero-contour-survey .hero-contour-survey-band-3 {
    animation: none;
  }
}
</style>
<section class="hero">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pulsar pulsar-hero pulsar-hero-contour-survey" data-pulsar="hero-contour-survey" preserveAspectRatio="none" viewBox="0 0 1600 900"><metadata><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><rdf:Description><dc:title>hero-contour-survey</dc:title><dc:creator>Pulsar by Business Nebula</dc:creator><dc:publisher>Business Nebula</dc:publisher><dc:source>https://pulsaricons.com/icons</dc:source><dc:relation>https://businessnebula.com.au</dc:relation><dc:rights>Pulsar licence, https://pulsaricons.com/legal/licence</dc:rights></rdf:Description></rdf:RDF></metadata><defs><linearGradient id="hero-contour-survey-veil" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-contour-survey-ground-stop" offset="0" stop-opacity=".88"></stop><stop class="hero-contour-survey-ground-stop" offset=".32" stop-opacity=".5"></stop><stop class="hero-contour-survey-ground-stop" offset=".66" stop-opacity=".1"></stop><stop class="hero-contour-survey-ground-stop" offset="1" stop-opacity="0"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-contour-survey-ground"></rect><g class="hero-contour-survey-band hero-contour-survey-band-1"><path stroke-opacity=".25" stroke-width=".9" d="M1409.6 252.4c-1.3 5.7-4.8 11.6-9.2 16-4.4 4.3-10.9 8.1-17.4 10-6.5 2-14.5 2.5-21.6 1.8-7.2-.7-14.8-2.8-21.2-5.8-6.5-2.9-12.9-7.2-17.5-11.9-4.5-4.8-8.1-10.9-10-16.6-1.8-5.8-2.1-12.2-1-17.9 1.1-5.8 3.4-12 7.5-16.6s10.5-9 17.1-11c6.6-1.9 15.2-1.8 22.3-.8 7.2 1 14.3 3.9 20.7 7 6.3 3 12.5 6.7 17.3 11.3 4.9 4.6 9.5 10.4 11.7 16.1 2.1 5.8 2.6 12.6 1.3 18.4" class="hero-contour-survey-ring"></path><path stroke-opacity=".75" stroke-width="1.56" d="M1450.7 262.6c-2.2 10.5-8.5 21.5-16.7 29.4-8.1 7.8-20.2 14.6-32.1 17.9-12 3.4-26.7 3.5-39.5 2s-26-5.6-37.5-10.9-23-12.6-31.2-21-14.5-19.3-17.9-29.6c-3.4-10.2-4-21.5-2.5-32 1.5-10.6 4.4-22.5 11.6-31.2 7.1-8.6 18.9-17.5 31.1-20.8 12.1-3.3 28.7-1.5 41.6 1.1 12.9 2.7 24.6 9.1 35.7 14.7s22 11.2 31 19c9 7.9 18.7 17.7 23.1 28 4.4 10.2 5.6 23 3.3 33.4" class="hero-contour-survey-ring hero-contour-survey-accent"></path><path stroke-opacity=".52" stroke-width="1.5" d="M1493.2 273.2c-3 15.4-12.5 31.6-24.5 43.1s-30 21.4-47.6 25.8c-17.5 4.5-39.1 3.7-57.6 1.1s-37-8.9-53.4-16.6c-16.3-7.7-33-17.5-44.8-29.5-11.8-11.9-20.7-27.5-25.7-42.2-5.1-14.7-6.1-30.6-4.5-46 1.6-15.5 3.9-33.8 13.8-46.9s27.5-27.3 45.4-31.7c18-4.4 43.6.4 62.2 5.3 18.6 5 33.9 16 49.6 24.3s30.9 14.8 44.4 25.5c13.5 10.8 29.3 24.2 36.5 38.9 7.1 14.6 9.3 33.6 6.2 48.9" class="hero-contour-survey-ring"></path><path stroke-opacity=".65" stroke-width="1.8" d="M1537.1 284.1c-3.8 20.4-16.5 42.3-32.5 57.4-16.1 15.1-40.4 28.1-63.8 33.5-23.3 5.4-52.1 3-76.3-.9-24.2-4-47.5-12.7-68.6-22.7-21.2-10.1-43-22.2-58.3-37.6-15.3-15.3-26.7-35.4-33.4-54.5-6.8-19-8.2-39.3-7-59.9s1.8-45.9 14.2-63.7c12.4-17.9 36.1-38.2 60.1-43.5s59.6 3.8 83.9 11.7c24.4 8 42.3 24.8 62.3 35.9s39.3 17.5 57.5 30.7c18.2 13.3 41.5 29.9 51.8 48.8s13.8 44.5 10.1 64.8" class="hero-contour-survey-ring"></path></g><g class="hero-contour-survey-band hero-contour-survey-band-2"><path stroke-opacity=".25" stroke-width=".9" d="M1033.5 602.6c1.8 5.4 1.8 12 0 18-1.8 5.9-5.9 12.5-11 17.7s-12.4 10-19.5 13.4c-7 3.4-15.4 5.8-23 7-7.7 1.1-16.1 1.3-23 0-6.9-1.4-13.6-4.3-18.4-7.9-4.9-3.6-8.6-8.6-10.7-13.9-2.1-5.2-3.2-11.5-1.9-17.5 1.4-6 5.1-13 10.2-18.2 5.2-5.2 13.3-9.9 20.6-13 7.4-3.1 15.6-4.7 23.2-5.8 7.7-1 15.5-1.4 22.6-.4 7 1 14.5 3.1 19.7 6.6 5.1 3.4 9.3 8.7 11.2 14" class="hero-contour-survey-ring"></path><path stroke-opacity=".75" stroke-width="1.56" d="M1077.8 588.2c3.6 9.7 3.6 22 .1 32.9-3.4 10.8-11.1 22.9-20.5 32.2-9.5 9.2-23.3 17.5-36.2 23.3-12.9 5.9-27.6 9.9-41.3 11.9s-28.5 2.6-40.8.3-24.1-7.5-32.9-13.9-15.4-15.2-19.7-24.5-8-20.6-6-31.5c2.1-10.9 8.5-24.6 18.1-33.9 9.7-9.3 26.3-17.1 39.9-22.1 13.5-5 28-6.3 41.6-7.9 13.5-1.6 26.8-3 39.5-1.7 12.8 1.3 27.2 4 36.9 9.8s17.8 15.4 21.3 25.1" class="hero-contour-survey-ring hero-contour-survey-accent"></path><path stroke-opacity=".52" stroke-width="1.5" d="M1123.7 573.3c5.4 14.1 5.3 32.4.2 48.3s-16.8 33.7-30.9 47-35 24.5-53.8 32.7c-18.9 8.1-39.7 13.2-59.3 16s-40.7 4.1-58.3.9c-17.5-3.1-34.4-10.7-47.1-19.8s-22.2-21.3-29.2-34.6c-6.9-13.4-14.5-29.4-12.3-45.4s11.1-37.2 25.7-50.6c14.5-13.4 41.2-23.7 61.5-30 20.2-6.3 40.6-5.8 59.9-7.8 19.3-1.9 37.2-5.1 55.7-3.9s40.8 3.4 55.4 11.2c14.7 7.9 27 22 32.5 36" class="hero-contour-survey-ring"></path><path stroke-opacity=".65" stroke-width="1.8" d="M1170.9 558c7.5 18.4 7.4 43.1.4 64.1-6.9 21-22.9 44.9-41.9 62.1-19.1 17.3-47.6 31.2-72.5 41.4-24.9 10.1-51.6 16-77 19.5-25.4 3.6-52.6 5.8-75.4 1.9-22.7-4-44.3-13.9-61-25.5-16.7-11.7-29-27.2-39.1-44.5-10-17.2-23.1-37.9-21.1-59.2 2-21.2 13.4-50.7 33.1-68.2 19.8-17.5 58.3-29.7 85.6-36.7 27.3-7.1 53.3-3.4 78.1-5.5 24.9-2.1 46.6-7.6 70.9-6.9 24.4.6 55.3 1.2 75.3 10.8 19.9 9.5 37.1 28.2 44.6 46.7" class="hero-contour-survey-ring"></path></g><g class="hero-contour-survey-band hero-contour-survey-band-3"><path stroke-opacity=".25" stroke-width=".9" d="M1529.8 793c-2.7 4.9-7.3 9.5-12.4 12.4-5 3-11.7 4.8-17.9 5.1s-13.4-1.2-19.4-3.5-12.1-6.1-16.9-10.3-9.2-9.6-11.9-15-4.1-11.8-4.1-17.5c-.1-5.7 1.4-11.6 4-16.6 2.5-5 6.3-10.1 11.1-13.3 4.9-3.3 11.7-5.8 17.9-6 6.3-.2 13.8 1.9 19.7 4.5 6 2.7 11.4 7 16.1 11.2 4.7 4.3 9.1 9.2 12 14.5 3 5.3 5.4 11.7 5.7 17.4.3 5.8-1.2 12.2-3.9 17.1" class="hero-contour-survey-ring"></path><path stroke-opacity=".75" stroke-width="1.76" d="M1565.3 813.5c-4.9 9.3-13.8 18.2-23.4 23.6s-22.5 8.8-34.1 8.8c-11.7.1-24.9-3.7-35.9-8.3s-21.4-11.8-30.1-19.5c-8.6-7.7-17-17.1-21.9-26.9-5-9.8-7.5-21.4-7.7-31.8s2.4-20.9 6.5-30.6c4.2-9.6 9.7-20.5 18.4-27.1 8.8-6.6 22.2-12.4 34-12.4 11.9 0 26.5 6.5 37.1 12.5 10.7 5.9 18.7 15.2 26.9 23.1 8.2 8 16.4 15.3 22.4 24.7 6.1 9.3 12.6 20.8 13.9 31.5 1.3 10.6-1.2 23-6.1 32.4" class="hero-contour-survey-ring hero-contour-survey-accent"></path><path stroke-opacity=".65" stroke-width="1.8" d="M1602.5 834.9c-7 14-20.5 27.4-34.9 35.4-14.4 7.9-34 12.7-51.3 12.2-17.2-.4-36.6-7.6-52.4-14.9-15.8-7.4-30-18-42.4-29.2s-24.8-24.1-32-38-10.7-30.6-11.2-45.6 2.9-29.9 8.3-44.5c5.3-14.7 11.2-32.8 23.6-43.3 12.5-10.6 33.3-20.9 51-20.2s40.2 13.9 55.3 24.2c15.1 10.2 23.8 25.7 35.1 37.4 11.4 11.8 23.3 20 33 33s22.1 29.3 25 44.9c3 15.6-.1 34.6-7.1 48.6" class="hero-contour-survey-ring"></path></g><rect width="1600" height="900" fill="url(#hero-contour-survey-veil)" class="hero-contour-survey-veil"></rect></svg>
  <div class="hero-scrim" aria-hidden="true"></div>
  <div class="hero-copy">
    <h1>Your heading</h1>
    <p>Your supporting sentence.</p>
    <a href="#">Your call to action</a>
  </div>
</section>

animation.css

/* Generated by scripts/hero-contour.mjs from heroes/hero-contour-survey/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #f7f7fb)
     --pulsar-hero-ink    the contour rings   (default #1d1b3a)
     --pulsar-accent      the index rings     (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-contour-survey {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-contour-survey .hero-contour-survey-ground {
  fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-contour-survey .hero-contour-survey-ring {
  fill: none;
  stroke: currentColor;
}
.pulsar-hero-contour-survey .hero-contour-survey-accent {
  stroke: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-contour-survey .hero-contour-survey-ground-stop {
  stop-color: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-contour-survey .hero-contour-survey-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-contour-survey .hero-contour-survey-band-1 {
  transform-origin: 1360px 240px;
  animation-name: hero-contour-survey-band-1;
  animation-duration: calc(13s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-contour-survey .hero-contour-survey-band-2 {
  transform-origin: 980px 620px;
  animation-name: hero-contour-survey-band-2;
  animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-contour-survey .hero-contour-survey-band-3 {
  transform-origin: 1490px 770px;
  animation-name: hero-contour-survey-band-3;
  animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-contour-survey-band-1 {
  from {
    transform: translate(-24px, -14px) scale(0.98);
  }
  to {
    transform: translate(24px, 14px) scale(1.02);
  }
}
@keyframes hero-contour-survey-band-2 {
  from {
    transform: translate(24px, 14px) scale(0.98);
  }
  to {
    transform: translate(-24px, -14px) scale(1.02);
  }
}
@keyframes hero-contour-survey-band-3 {
  from {
    transform: translate(-24px, -14px) scale(0.98);
  }
  to {
    transform: translate(24px, 14px) scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-contour-survey .hero-contour-survey-band-1,
  .pulsar-hero-contour-survey .hero-contour-survey-band-2,
  .pulsar-hero-contour-survey .hero-contour-survey-band-3 {
    animation: none;
  }
}

More in this family10 in Contour

All heroes

The platform your operations team already trusts.

The platform your operations team already trusts.

The platform your operations team already trusts.

Survey

The four variables

Files

The code

As a section

animation.css

More in this family10 in Contour

The platform your operations team already trusts.

Atoll

The platform your operations team already trusts.

Basin

The platform your operations team already trusts.

Cirque

The platform your operations team already trusts.

Delta

The platform your operations team already trusts.

Massif

The platform your operations team already trusts.

Moraine

The platform your operations team already trusts.

Ridge

The platform your operations team already trusts.

Shoal

The platform your operations team already trusts.

Strata