Pulsar
1×

Massif

Busy

One mountain filling the right half, eleven rings from the peak down, the busiest relief in the family.

“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
29 s, mirrored, loops
Canvas
1600 by 900, stretches to fill
Default tone
Dark ground: ground #0b0a16, ink #ffffff
Family
Contour · Lines
Tags
contourreliefrings

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 #0b0a16
--pulsar-hero-ink
the strokes, default #ffffff
--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
Still
Massif, not animated
Download SVG

The code

As a section

<!-- Pulsar by Business Nebula · "hero-contour-massif" · 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: #ffffff;
  background: #0b0a16;
}
.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, #0b0a16 0%, color-mix(in oklab, #0b0a16 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-massif/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #0b0a16)
     --pulsar-hero-ink    the contour rings   (default #ffffff)
     --pulsar-accent      the index rings     (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-contour-massif {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-contour-massif .hero-contour-massif-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-contour-massif .hero-contour-massif-ring {
  fill: none;
  stroke: currentColor;
}
.pulsar-hero-contour-massif .hero-contour-massif-accent {
  stroke: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-contour-massif .hero-contour-massif-ground-stop {
  stop-color: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-contour-massif .hero-contour-massif-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-contour-massif .hero-contour-massif-band-1 {
  transform-origin: 1300px 450px;
  animation-name: hero-contour-massif-band-1;
  animation-duration: calc(29s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-contour-massif-band-1 {
  from {
    transform: translate(-20px, -12px) scale(0.98);
  }
  to {
    transform: translate(20px, 12px) scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-contour-massif .hero-contour-massif-band-1 {
    animation: none;
  }
}
</style>
<section class="hero">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pulsar pulsar-hero pulsar-hero-contour-massif" data-pulsar="hero-contour-massif" 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-massif</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-massif-veil" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-contour-massif-ground-stop" offset="0" stop-opacity=".88"></stop><stop class="hero-contour-massif-ground-stop" offset=".32" stop-opacity=".5"></stop><stop class="hero-contour-massif-ground-stop" offset=".66" stop-opacity=".1"></stop><stop class="hero-contour-massif-ground-stop" offset="1" stop-opacity="0"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-contour-massif-ground"></rect><g class="hero-contour-massif-band hero-contour-massif-band-1"><path stroke-opacity=".25" stroke-width=".8" d="M1371.1 440c1.3 7.6 0 16.5-3.6 23.9-3.7 7.4-10.6 14.9-18.2 20.4s-17.7 9.8-27.3 12.6-20.4 4.4-30.2 4.2c-9.9-.2-20.5-2.1-28.8-5.6-8.4-3.4-15.7-9.1-21.2-15.1-5.5-5.9-9.8-13.1-11.7-20.6-1.8-7.4-2.5-16.5.7-24s10.5-15.8 18.5-21.1c7.9-5.4 19.2-8.7 29-11s19.9-3.1 29.6-2.9c9.8.1 20.3.9 29 3.8 8.7 3 17.6 8 23.3 13.9s9.7 13.9 10.9 21.5" class="hero-contour-massif-ring"></path><path stroke-opacity=".75" stroke-width="1.25" d="M1439.1 430.5c2.4 14.7.1 32.2-7.1 46.6s-21.2 29.1-36.1 39.7-34.7 18.5-53.3 23.9c-18.7 5.3-39.5 8.5-58.5 8.1s-39.7-4-55.8-10.7c-16.1-6.6-30.2-17.7-40.9-29.2s-19.5-25.3-23.4-39.8-6.1-32.3-.1-47.1c6.1-14.7 21-31.1 36.7-41.3s38.4-15.8 57.5-19.9c19.1-4.2 38.2-5.4 57.1-5.1 18.9.2 39.2 1.1 56.2 6.5 17.1 5.5 34.8 15 46 26.4 11.3 11.3 19.2 27.1 21.7 41.9" class="hero-contour-massif-ring hero-contour-massif-accent"></path><path stroke-opacity=".33" stroke-width="1.12" d="M1507.8 420.8c3.7 22 .3 48.3-10.5 69.8-10.8 21.4-32.2 43.3-54.6 58.8-22.4 15.6-52.1 26.9-79.8 34.6-27.7 7.8-58.2 12.6-86.4 12s-58.8-5.7-82.7-15.6c-23.8-9.8-44.2-26.3-60.2-43.3-16.1-17-29.6-37.1-35.9-58.7-6.4-21.5-11.1-48.4-2.2-70.4 8.9-22.1 31.7-46.9 55.5-61.8s58.8-22 87.3-27.7 56-6.9 83.9-6.6 58 .6 83.4 8.3c25.5 7.8 52.4 21.5 69.4 38.2 17 16.8 29.1 40.4 32.8 62.4" class="hero-contour-massif-ring"></path><path stroke-opacity=".37" stroke-width="1.28" d="M1577.3 411c5.1 29.4.8 64.6-13.8 93.1-14.6 28.6-43.7 57.6-73.7 78.1-30.1 20.4-69.9 34.7-106.7 44.8s-76.9 16.5-114.1 15.8c-37.3-.8-77.9-7.4-109.4-20.3-31.4-13-58-35.1-79.4-57.5-21.4-22.5-40-48.6-49.1-77.2s-17.2-64.8-5.6-94.2c11.6-29.5 42.9-63 75.2-82.4 32.2-19.5 80-27.3 118.1-34.3 38-6.9 73.5-7.8 110.3-7.5 36.8.2 76.4-.6 110.4 9.1 34 9.8 70.6 27.5 93.5 49.6 23 22.1 39.2 53.6 44.3 82.9" class="hero-contour-massif-ring"></path><path stroke-opacity=".41" stroke-width="1.44" d="M1647.6 401.1c6.5 36.8 1.3 81.2-17.1 116.8-18.5 35.7-55.6 71.9-93.5 97.2-38 25.2-88.1 42.1-134 54.4s-95.2 20.4-141.5 19.5c-46.2-.9-96.8-8.8-135.8-24.8-39.1-16.1-71.5-43.7-98.4-71.6-26.9-27.8-50.8-59.8-63-95.4-12.3-35.6-24.7-81.4-10.5-118.3 14.2-37 54.7-79.6 95.7-103.4 40.9-23.8 102.4-31.6 150.1-39.5 47.7-7.8 90.5-8 136.1-7.8s94.8-2.5 137.5 9c42.6 11.6 89.1 33 118.2 60.4 29.1 27.3 49.7 66.8 56.2 103.5" class="hero-contour-massif-ring"></path><path stroke-opacity=".75" stroke-width="2.08" d="M1718.7 391.2c8.1 44.1 2 97.8-20.4 140.7-22.4 42.8-68 86.2-114 116.2-45.9 29.9-106.5 49-161.5 63.5-55.1 14.5-113.5 24.2-168.6 23.2-55.2-1-115.7-10.1-162.2-29.2-46.6-19.1-84.6-52.4-117.1-85.6-32.4-33.1-62-70.7-77.7-113.4s-33.3-98.2-16.6-142.8 66.8-96.5 116.9-124.5c50-28 125.8-35 183.2-43.5 57.5-8.5 107.1-7.6 161.4-7.6 54.3.1 113-5 164.4 8.1 51.3 13.1 108.3 38 143.7 70.5s60.5 80.2 68.5 124.4" class="hero-contour-massif-ring hero-contour-massif-accent"></path><path stroke-opacity=".49" stroke-width="1.76" d="M1790.7 381c9.6 51.7 2.7 115-23.7 165-26.5 50-81 100.6-135.1 135.2-54.1 34.5-125.4 55.6-189.6 72.1-64.1 16.5-131.4 27.9-195.4 26.8s-134.4-11.2-188.4-33.3c-54-22.2-97.4-61.2-135.5-99.6-38.1-38.5-73.6-81.3-93.1-131.1s-43.2-115.4-24.1-167.7c19.2-52.2 79.4-113.9 138.8-146 59.4-32 150.3-37.3 217.6-46.1s123.2-6.6 186.1-6.7 131-8.3 191.2 6.1 128 42.6 169.9 80.1c41.8 37.6 71.7 93.6 81.3 145.2" class="hero-contour-massif-ring"></path><path stroke-opacity=".53" stroke-width="1.92" d="M1863.4 370.8c11.3 59.3 3.7 132.2-26.9 189.5-30.6 57.2-94.4 115.1-156.9 154.1-62.4 39.1-144.6 61.7-217.9 80.1-73.3 18.5-149.3 31.6-222 30.5-72.8-1.2-153.1-12.2-214.5-37.4-61.3-25.1-109.7-69.8-153.6-113.5-43.8-43.7-85.6-91.6-109.3-148.5S708 392.8 729.5 332.7c21.4-60 92.3-131.8 161.4-167.6 69.1-35.9 175.8-38.8 253-47.6 77.3-8.8 139.1-4.9 210.4-5.2 71.4-.3 148.9-12.2 218 3.2s148.1 46.6 196.7 89.2c48.5 42.5 83.2 106.9 94.4 166.1" class="hero-contour-massif-ring"></path><path stroke-opacity=".57" stroke-width="2.08" d="M1936.9 360.5c13 66.9 4.8 149.7-30.1 214.2-34.9 64.6-108.2 129.7-179.2 173.1-71 43.5-164.2 67.3-246.7 87.6-82.5 20.2-166.9 35.2-248.4 34-81.4-1.2-171.6-13.1-240.3-41.2-68.6-28.1-121.8-78.7-171.5-127.5-49.6-48.8-97.9-101.6-126.1-165.6s-66.7-150.4-43.1-218.4 105.8-150 184.9-189.6 202.3-39.3 289.6-47.8 154.4-2.4 234.1-3.1c79.8-.6 166.5-16.8 244.6-.6s168.9 50.2 224.3 97.7c55.3 47.5 95 120.3 107.9 187.2" class="hero-contour-massif-ring"></path><path stroke-opacity=".75" stroke-width="2.91" d="M2011.3 350c14.8 74.6 6 167.5-33.3 239.4-39.2 71.8-122.6 144.2-202.3 191.9-79.7 47.8-184.1 72.5-275.9 94.5-91.7 22-184.3 38.7-274.3 37.5-90.1-1.3-190.2-13.8-266-44.9-75.9-31-133.7-87.4-189.2-141.3-55.5-54-110.7-111.3-143.8-182.5-33-71.1-80.3-168.2-54.6-244.2 25.8-76.1 119.7-168.8 209.2-211.9 89.4-43.1 229.9-38.8 327.3-46.7 97.5-7.8 169.3.7 257.3-.3 88.1-.9 183.9-22.1 271.2-5.4 87.2 16.7 190 53.3 252.4 105.6s107.2 133.7 122 208.3" class="hero-contour-massif-ring hero-contour-massif-accent"></path><path stroke-opacity=".65" stroke-width="2.4" d="M2086.4 339.5c16.7 82.3 7.4 185.4-36.4 264.7-43.7 79.2-137.4 158.8-226 210.8-88.6 51.9-204.5 77.2-305.4 100.8s-201.5 42.1-300.1 40.9c-98.7-1.3-208.6-14.4-291.6-48.3s-145-96.2-206.5-155.2c-61.4-59-123.8-120.7-162.1-199C520 476 463 367.8 490.8 283.7c27.8-84.2 134-187.9 234.1-234.3C824.9 3 983.5 11.9 1091.2 5s183.7 4.4 279.9 3.1C1467.4 6.7 1572.2-20 1668.7-3c96.5 16.9 211.8 55.8 281.4 112.9s119.7 147.2 136.3 229.6" class="hero-contour-massif-ring"></path></g><rect width="1600" height="900" fill="url(#hero-contour-massif-veil)" class="hero-contour-massif-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-massif/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #0b0a16)
     --pulsar-hero-ink    the contour rings   (default #ffffff)
     --pulsar-accent      the index rings     (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-contour-massif {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-contour-massif .hero-contour-massif-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-contour-massif .hero-contour-massif-ring {
  fill: none;
  stroke: currentColor;
}
.pulsar-hero-contour-massif .hero-contour-massif-accent {
  stroke: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-contour-massif .hero-contour-massif-ground-stop {
  stop-color: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-contour-massif .hero-contour-massif-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-contour-massif .hero-contour-massif-band-1 {
  transform-origin: 1300px 450px;
  animation-name: hero-contour-massif-band-1;
  animation-duration: calc(29s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-contour-massif-band-1 {
  from {
    transform: translate(-20px, -12px) scale(0.98);
  }
  to {
    transform: translate(20px, 12px) scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-contour-massif .hero-contour-massif-band-1 {
    animation: none;
  }
}

More in this family10 in Contour

All heroes