Pulsar
1×

Horizon

Dark groundSparse

Shallow arcs stacked across the lower half of the section, a curved horizon that breathes.

“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
25 s, mirrored, loops
Canvas
1600 by 900, stretches to fill
Default tone
Dark ground: ground #0b0a16, ink #ffffff
Series
paths
Tags
arcshorizontallines

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
Horizon, not animated
Download SVG

The code

As a section

<!-- Pulsar by Business Nebula · "hero-paths-horizon" · https://pulsar.businessnebula.com.au | Licence: https://pulsar.businessnebula.com.au/legal/licence | Free-licence credit: Animation by Pulsar, linked to https://pulsar.businessnebula.com.au | 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;
}
/* Generated by scripts/hero-paths.mjs from heroes/hero-paths-horizon/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #0b0a16)
     --pulsar-hero-ink    the strokes         (default #ffffff)
     --pulsar-accent      the accented strokes (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-paths-horizon {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-paths-horizon .hero-paths-horizon-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-paths-horizon .hero-paths-horizon-stroke {
  fill: none;
  stroke-linecap: round;
}
.pulsar-hero-paths-horizon .hero-paths-horizon-accent-stop {
  stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-horizon .hero-paths-horizon-band {
  transform-box: view-box;
  transform-origin: 800px 450px;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-paths-horizon .hero-paths-horizon-band-1 {
  animation-name: hero-paths-horizon-band-1;
  animation-duration: calc(14s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-horizon .hero-paths-horizon-band-2 {
  animation-name: hero-paths-horizon-band-2;
  animation-duration: calc(18s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-horizon .hero-paths-horizon-band-3 {
  animation-name: hero-paths-horizon-band-3;
  animation-duration: calc(21s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-horizon .hero-paths-horizon-band-4 {
  animation-name: hero-paths-horizon-band-4;
  animation-duration: calc(25s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-horizon-band-1 {
  from {
    transform: translate(-20px, -16px);
  }
  to {
    transform: translate(20px, 16px);
  }
}
@keyframes hero-paths-horizon-band-2 {
  from {
    transform: translate(20px, 16px);
  }
  to {
    transform: translate(-20px, -16px);
  }
}
@keyframes hero-paths-horizon-band-3 {
  from {
    transform: translate(-20px, -16px);
  }
  to {
    transform: translate(20px, 16px);
  }
}
@keyframes hero-paths-horizon-band-4 {
  from {
    transform: translate(20px, 16px);
  }
  to {
    transform: translate(-20px, -16px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-paths-horizon .hero-paths-horizon-band-1,
  .pulsar-hero-paths-horizon .hero-paths-horizon-band-2,
  .pulsar-hero-paths-horizon .hero-paths-horizon-band-3,
  .pulsar-hero-paths-horizon .hero-paths-horizon-band-4 {
    animation: none;
  }
}
</style>
<section class="hero">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pulsar pulsar-hero pulsar-hero-paths-horizon" data-pulsar="hero-paths-horizon" 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-paths-horizon</dc:title><dc:creator>Pulsar by Business Nebula</dc:creator><dc:publisher>Business Nebula</dc:publisher><dc:source>https://pulsar.businessnebula.com.au/icons</dc:source><dc:relation>https://businessnebula.com.au</dc:relation><dc:rights>Pulsar licence, https://pulsar.businessnebula.com.au/legal/licence</dc:rights></rdf:Description></rdf:RDF></metadata><defs><linearGradient id="hero-paths-horizon-fade" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="currentColor" stop-opacity="0"></stop><stop offset=".3" stop-color="currentColor" stop-opacity=".9"></stop><stop offset=".7" stop-color="currentColor" stop-opacity=".9"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></linearGradient><linearGradient id="hero-paths-horizon-fade-accent" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-paths-horizon-accent-stop" offset="0" stop-opacity="0"></stop><stop class="hero-paths-horizon-accent-stop" offset=".3" stop-opacity=".9"></stop><stop class="hero-paths-horizon-accent-stop" offset=".7" stop-opacity=".9"></stop><stop class="hero-paths-horizon-accent-stop" offset="1" stop-opacity="0"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-paths-horizon-ground"></rect><g class="hero-paths-horizon-band hero-paths-horizon-band-1"><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".3" d="M-180 470c40.8-15.3 163.3-65.6 245-91.9 81.7-26.2 163.3-48.1 245-65.6s163.3-30.6 245-39.4c81.7-8.7 163.3-13.1 245-13.1s163.3 4.4 245 13.1c81.7 8.8 163.3 21.9 245 39.4s163.3 39.4 245 65.6c81.7 26.3 204.2 76.6 245 91.9" class="hero-paths-horizon-stroke"></path><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".4" stroke-width="1.4" d="M-180 598.5c40.8-18.3 163.3-78.6 245-110s163.3-57.6 245-78.6c81.7-20.9 163.3-36.6 245-47.1s163.3-15.7 245-15.7 163.3 5.2 245 15.7 163.3 26.2 245 47.1c81.7 21 163.3 47.2 245 78.6s204.2 91.7 245 110" class="hero-paths-horizon-stroke"></path><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".49" stroke-width="1.8" d="M-180 673.6c40.8-19.7 163.3-84.3 245-118.1 81.7-33.7 163.3-61.8 245-84.3s163.3-39.4 245-50.6c81.7-11.3 163.3-16.9 245-16.9s163.3 5.6 245 16.9c81.7 11.2 163.3 28.1 245 50.6s163.3 50.6 245 84.3c81.7 33.8 204.2 98.4 245 118.1" class="hero-paths-horizon-stroke"></path><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".59" stroke-width="2.1" d="M-180 772.5c40.8-18.6 163.3-79.8 245-111.7s163.3-58.5 245-79.8 163.3-37.2 245-47.9c81.7-10.6 163.3-15.9 245-15.9s163.3 5.3 245 15.9c81.7 10.7 163.3 26.6 245 47.9s163.3 47.9 245 79.8 204.2 93.1 245 111.7" class="hero-paths-horizon-stroke"></path><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".68" stroke-width="2.5" d="M-180 914.2c40.8-15.7 163.3-67.4 245-94.4 81.7-26.9 163.3-49.4 245-67.3 81.7-18 163.3-31.5 245-40.5s163.3-13.5 245-13.5 163.3 4.5 245 13.5 163.3 22.5 245 40.5c81.7 17.9 163.3 40.4 245 67.3 81.7 27 204.2 78.7 245 94.4" class="hero-paths-horizon-stroke"></path><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".78" stroke-width="2.9" d="M-180 1013.1c40.8-12.7 163.3-54.1 245-75.7s163.3-39.6 245-54 163.3-25.2 245-32.4 163.3-10.8 245-10.8 163.3 3.6 245 10.8 163.3 18 245 32.4 163.3 32.4 245 54 204.2 63 245 75.7" class="hero-paths-horizon-stroke"></path></g><g class="hero-paths-horizon-band hero-paths-horizon-band-2"><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".32" stroke-width="1.1" d="M-180 506.4c40.8-16.2 163.3-69.2 245-96.9 81.7-27.6 163.3-50.7 245-69.1 81.7-18.5 163.3-32.3 245-41.5 81.7-9.3 163.3-13.9 245-13.9s163.3 4.6 245 13.9c81.7 9.2 163.3 23 245 41.5 81.7 18.4 163.3 41.5 245 69.1 81.7 27.7 204.2 80.7 245 96.9" class="hero-paths-horizon-stroke"></path><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".42" stroke-width="1.5" d="M-180 620.8c40.8-18.8 163.3-80.9 245-113.2 81.7-32.4 163.3-59.3 245-80.9s163.3-37.8 245-48.6c81.7-10.7 163.3-16.1 245-16.1s163.3 5.4 245 16.1c81.7 10.8 163.3 27 245 48.6s163.3 48.5 245 80.9c81.7 32.3 204.2 94.4 245 113.2" class="hero-paths-horizon-stroke"></path><path stroke="url(#hero-paths-horizon-fade-accent)" stroke-opacity=".8" stroke-width="2.3" d="M-180 692.5c40.8-19.7 163.3-84.2 245-117.9 81.7-33.6 163.3-61.7 245-84.2 81.7-22.4 163.3-39.2 245-50.5 81.7-11.2 163.3-16.8 245-16.8s163.3 5.6 245 16.8c81.7 11.3 163.3 28.1 245 50.5 81.7 22.5 163.3 50.6 245 84.2 81.7 33.7 204.2 98.2 245 117.9" class="hero-paths-horizon-stroke hero-paths-horizon-accent"></path><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".61" stroke-width="2.2" d="M-180 806.9c40.8-18 163.3-77.2 245-108 81.7-30.9 163.3-56.6 245-77.2s163.3-36.1 245-46.4c81.7-10.2 163.3-15.4 245-15.4s163.3 5.2 245 15.4c81.7 10.3 163.3 25.8 245 46.4s163.3 46.3 245 77.2c81.7 30.8 204.2 90 245 108" class="hero-paths-horizon-stroke"></path><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".7" stroke-width="2.6" d="M-180 945.2c40.8-14.9 163.3-63.8 245-89.4 81.7-25.5 163.3-46.8 245-63.8s163.3-29.8 245-38.3S718.3 741 800 741s163.3 4.2 245 12.7 163.3 21.3 245 38.3 163.3 38.3 245 63.8c81.7 25.6 204.2 74.5 245 89.4" class="hero-paths-horizon-stroke"></path><path stroke="url(#hero-paths-horizon-fade-accent)" stroke-opacity=".8" stroke-width="3.8" d="M-180 1030c40.8-12 163.3-51.4 245-72s163.3-37.7 245-51.4c81.7-13.8 163.3-24 245-30.9s163.3-10.3 245-10.3 163.3 3.4 245 10.3 163.3 17.1 245 30.9c81.7 13.7 163.3 30.8 245 51.4s204.2 60 245 72" class="hero-paths-horizon-stroke hero-paths-horizon-accent"></path></g><g class="hero-paths-horizon-band hero-paths-horizon-band-3"><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".35" stroke-width="1.2" d="M-180 540.8c40.8-16.9 163.3-72.5 245-101.6 81.7-29 163.3-53.2 245-72.6 81.7-19.3 163.3-33.9 245-43.5 81.7-9.7 163.3-14.6 245-14.6s163.3 4.9 245 14.6c81.7 9.6 163.3 24.2 245 43.5 81.7 19.4 163.3 43.6 245 72.6 81.7 29.1 204.2 84.7 245 101.6" class="hero-paths-horizon-stroke"></path><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".44" stroke-width="1.6" d="M-180 639.7C-139.2 620.4-16.7 557 65 524c81.7-33.1 163.3-60.7 245-82.7 81.7-22.1 163.3-38.6 245-49.6 81.7-11.1 163.3-16.6 245-16.6s163.3 5.5 245 16.6c81.7 11 163.3 27.5 245 49.6 81.7 22 163.3 49.6 245 82.7 81.7 33 204.2 96.4 245 115.7" class="hero-paths-horizon-stroke"></path><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".54" stroke-width="2" d="M-180 714.8c40.8-19.4 163.3-83.3 245-116.6 81.7-33.4 163.3-61.2 245-83.4s163.3-38.9 245-50 163.3-16.7 245-16.7 163.3 5.6 245 16.7 163.3 27.8 245 50 163.3 50 245 83.4c81.7 33.3 204.2 97.2 245 116.6" class="hero-paths-horizon-stroke"></path><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".63" stroke-width="2.3" d="M-180 843.3c40.8-17.3 163.3-74.2 245-103.8 81.7-29.7 163.3-54.5 245-74.2 81.7-19.8 163.3-34.7 245-44.6s163.3-14.8 245-14.8 163.3 4.9 245 14.8 163.3 24.8 245 44.6c81.7 19.7 163.3 44.5 245 74.2 81.7 29.6 204.2 86.5 245 103.8" class="hero-paths-horizon-stroke"></path><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".73" stroke-width="2.7" d="M-180 971.8c40.8-14 163.3-60.3 245-84.4s163.3-44.2 245-60.3 163.3-28.2 245-36.2c81.7-8.1 163.3-12.1 245-12.1s163.3 4 245 12.1c81.7 8 163.3 20.1 245 36.2s163.3 36.2 245 60.3 204.2 70.4 245 84.4" class="hero-paths-horizon-stroke"></path></g><g class="hero-paths-horizon-band hero-paths-horizon-band-4"><path stroke="url(#hero-paths-horizon-fade-accent)" stroke-opacity=".8" stroke-width="1.6" d="M-180 571.8c40.8-17.6 163.3-75.7 245-106s163.3-55.6 245-75.8 163.3-35.4 245-45.5 163.3-15.1 245-15.1 163.3 5 245 15.1 163.3 25.3 245 45.5 163.3 45.5 245 75.8 204.2 88.4 245 106" class="hero-paths-horizon-stroke hero-paths-horizon-accent"></path><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".47" stroke-width="1.7" d="M-180 656.7c40.8-19.6 163.3-83.9 245-117.4 81.7-33.6 163.3-61.5 245-83.9 81.7-22.3 163.3-39.1 245-50.3s163.3-16.7 245-16.7 163.3 5.5 245 16.7 163.3 28 245 50.3c81.7 22.4 163.3 50.3 245 83.9 81.7 33.5 204.2 97.8 245 117.4" class="hero-paths-horizon-stroke"></path><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".56" stroke-width="2" d="M-180 741.5c40.8-19.1 163.3-81.9 245-114.6s163.3-60 245-81.9c81.7-21.8 163.3-38.2 245-49.1s163.3-16.3 245-16.3 163.3 5.4 245 16.3 163.3 27.3 245 49.1c81.7 21.9 163.3 49.2 245 81.9s204.2 95.5 245 114.6" class="hero-paths-horizon-stroke"></path><path stroke="url(#hero-paths-horizon-fade-accent)" stroke-opacity=".8" stroke-width="3" d="M-180 879.7c40.8-16.5 163.3-70.9 245-99.2 81.7-28.4 163.3-52 245-70.9s163.3-33.1 245-42.5c81.7-9.5 163.3-14.2 245-14.2s163.3 4.7 245 14.2c81.7 9.4 163.3 23.6 245 42.5s163.3 42.5 245 70.9c81.7 28.3 204.2 82.7 245 99.2" class="hero-paths-horizon-stroke hero-paths-horizon-accent"></path><path stroke="url(#hero-paths-horizon-fade)" stroke-opacity=".75" stroke-width="2.8" d="M-180 994.2c40.8-13.3 163.3-57 245-79.8s163.3-41.8 245-57 163.3-26.6 245-34.2 163.3-11.4 245-11.4 163.3 3.8 245 11.4 163.3 19 245 34.2 163.3 34.2 245 57 204.2 66.5 245 79.8" class="hero-paths-horizon-stroke"></path></g></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-paths.mjs from heroes/hero-paths-horizon/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #0b0a16)
     --pulsar-hero-ink    the strokes         (default #ffffff)
     --pulsar-accent      the accented strokes (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-paths-horizon {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-paths-horizon .hero-paths-horizon-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-paths-horizon .hero-paths-horizon-stroke {
  fill: none;
  stroke-linecap: round;
}
.pulsar-hero-paths-horizon .hero-paths-horizon-accent-stop {
  stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-horizon .hero-paths-horizon-band {
  transform-box: view-box;
  transform-origin: 800px 450px;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-paths-horizon .hero-paths-horizon-band-1 {
  animation-name: hero-paths-horizon-band-1;
  animation-duration: calc(14s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-horizon .hero-paths-horizon-band-2 {
  animation-name: hero-paths-horizon-band-2;
  animation-duration: calc(18s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-horizon .hero-paths-horizon-band-3 {
  animation-name: hero-paths-horizon-band-3;
  animation-duration: calc(21s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-horizon .hero-paths-horizon-band-4 {
  animation-name: hero-paths-horizon-band-4;
  animation-duration: calc(25s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-horizon-band-1 {
  from {
    transform: translate(-20px, -16px);
  }
  to {
    transform: translate(20px, 16px);
  }
}
@keyframes hero-paths-horizon-band-2 {
  from {
    transform: translate(20px, 16px);
  }
  to {
    transform: translate(-20px, -16px);
  }
}
@keyframes hero-paths-horizon-band-3 {
  from {
    transform: translate(-20px, -16px);
  }
  to {
    transform: translate(20px, 16px);
  }
}
@keyframes hero-paths-horizon-band-4 {
  from {
    transform: translate(20px, 16px);
  }
  to {
    transform: translate(-20px, -16px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-paths-horizon .hero-paths-horizon-band-1,
  .pulsar-hero-paths-horizon .hero-paths-horizon-band-2,
  .pulsar-hero-paths-horizon .hero-paths-horizon-band-3,
  .pulsar-hero-paths-horizon .hero-paths-horizon-band-4 {
    animation: none;
  }
}

More in this series10 in paths

All heroes