Pulsar
1×

Current

Light groundMedium

Horizontal laminar flow: a shallow sine crossing the section, the bands sliding along it at unequal rates.

“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
26 s, mirrored, loops
Canvas
1600 by 900, stretches to fill
Default tone
Light ground: ground #f7f7fb, ink #1d1b3a
Series
paths
Tags
linesflowhorizontalwaves

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

The code

As a section

<!-- Pulsar by Business Nebula · "hero-paths-current" · 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: #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;
}
/* Generated by scripts/hero-paths.mjs from heroes/hero-paths-current/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #f7f7fb)
     --pulsar-hero-ink    the strokes         (default #1d1b3a)
     --pulsar-accent      the accented strokes (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-paths-current {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-paths-current .hero-paths-current-ground {
  fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-paths-current .hero-paths-current-stroke {
  fill: none;
  stroke-linecap: round;
}
.pulsar-hero-paths-current .hero-paths-current-accent-stop {
  stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-current .hero-paths-current-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-current .hero-paths-current-band-1 {
  animation-name: hero-paths-current-band-1;
  animation-duration: calc(14s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-current .hero-paths-current-band-2 {
  animation-name: hero-paths-current-band-2;
  animation-duration: calc(17s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-current .hero-paths-current-band-3 {
  animation-name: hero-paths-current-band-3;
  animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-current .hero-paths-current-band-4 {
  animation-name: hero-paths-current-band-4;
  animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-current .hero-paths-current-band-5 {
  animation-name: hero-paths-current-band-5;
  animation-duration: calc(26s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-current-band-1 {
  from {
    transform: translate(-60px, -8px);
  }
  to {
    transform: translate(60px, 8px);
  }
}
@keyframes hero-paths-current-band-2 {
  from {
    transform: translate(60px, 8px);
  }
  to {
    transform: translate(-60px, -8px);
  }
}
@keyframes hero-paths-current-band-3 {
  from {
    transform: translate(-60px, -8px);
  }
  to {
    transform: translate(60px, 8px);
  }
}
@keyframes hero-paths-current-band-4 {
  from {
    transform: translate(60px, 8px);
  }
  to {
    transform: translate(-60px, -8px);
  }
}
@keyframes hero-paths-current-band-5 {
  from {
    transform: translate(-60px, -8px);
  }
  to {
    transform: translate(60px, 8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-paths-current .hero-paths-current-band-1,
  .pulsar-hero-paths-current .hero-paths-current-band-2,
  .pulsar-hero-paths-current .hero-paths-current-band-3,
  .pulsar-hero-paths-current .hero-paths-current-band-4,
  .pulsar-hero-paths-current .hero-paths-current-band-5 {
    animation: none;
  }
}
</style>
<section class="hero">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pulsar pulsar-hero pulsar-hero-paths-current" data-pulsar="hero-paths-current" 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-current</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-current-fade" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="currentColor" stop-opacity="0"></stop><stop offset=".38" stop-color="currentColor" stop-opacity=".12"></stop><stop offset=".72" stop-color="currentColor" stop-opacity=".7"></stop><stop offset="1" stop-color="currentColor"></stop></linearGradient><linearGradient id="hero-paths-current-fade-accent" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-paths-current-accent-stop" offset="0" stop-opacity="0"></stop><stop class="hero-paths-current-accent-stop" offset=".38" stop-opacity=".12"></stop><stop class="hero-paths-current-accent-stop" offset=".72" stop-opacity=".7"></stop><stop class="hero-paths-current-accent-stop" offset="1"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-paths-current-ground"></rect><g class="hero-paths-current-band hero-paths-current-band-1"><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".3" d="M-180-115.7c36.3 3.2 145.2 13.1 217.8 19.2S183-83.1 255.6-79.1C328.1-75 400.7-72 473.3-72s145.2-2.8 217.8-6.9c72.6-4 145.2-11.2 217.8-17.3s145.2-14.1 217.8-19.2c72.6-5.2 145.2-10 217.7-11.6 72.6-1.6 145.2-.9 217.8 1.8s181.5 12 217.8 14.4" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".37" stroke-width="1.2" d="M-180 123.2c36.3 3.2 145.2 14.1 217.8 19.2s145.2 9.8 217.8 11.3c72.5 1.5 145.1.6 217.7-2.2s145.2-8.8 217.8-14.6c72.6-5.7 145.2-13.9 217.8-19.7s145.2-12.1 217.8-15.1 145.2-4.2 217.7-2.9c72.6 1.2 145.2 5.7 217.8 10.6s181.5 15.8 217.8 19" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".44" stroke-width="1.5" d="M-180 260.2c36.3 2.4 145.2 11.9 217.8 14.8 72.6 3 145.2 4 217.8 2.7 72.5-1.4 145.1-6 217.7-11 72.6-4.9 145.2-12.9 217.8-19s145.2-13.5 217.8-17.7 145.2-7.4 217.8-7.6 145.2 2.4 217.7 6.3c72.6 3.9 145.2 11 217.8 17.1s181.5 16.1 217.8 19.3" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".5" stroke-width="1.7" d="M-180 365.7c36.3 1.2 145.2 7.2 217.8 7.3s145.2-2.7 217.8-6.7c72.5-3.9 145.1-11.1 217.7-17.2s145.2-14.1 217.8-19.3 145.2-10.1 217.8-11.8c72.6-1.6 145.2-1 217.8 1.7 72.6 2.6 145.2 8.5 217.7 14.1 72.6 5.7 145.2 13.9 217.8 19.7 72.6 5.9 181.5 12.9 217.8 15.5" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".57" stroke-width="2" d="M-180 561c36.3-.3 145.2.8 217.8-1.9 72.6-2.8 145.2-8.7 217.8-14.4 72.5-5.7 145.1-13.9 217.7-19.8 72.6-5.8 145.2-12.1 217.8-15.2s145.2-4.4 217.8-3.2 145.2 5.5 217.8 10.4 145.2 12.8 217.7 18.9c72.6 6.2 145.2 13.6 217.8 18 72.6 4.3 181.5 6.7 217.8 8.1" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade-accent)" stroke-opacity=".8" stroke-width="2.8" d="M-180 806.4c36.3-1.8 145.2-5.7 217.8-10.7 72.6-4.9 145.2-12.8 217.8-19 72.5-6.1 145.1-13.5 217.7-17.8s145.2-7.5 217.8-7.8 145.2 2.2 217.8 6.1c72.6 3.8 145.2 10.9 217.8 16.9 72.6 6.1 145.2 14.1 217.7 19.4 72.6 5.3 145.2 10.4 217.8 12.2 72.6 1.9 181.5-.8 217.8-1" class="hero-paths-current-stroke hero-paths-current-accent"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".71" stroke-width="2.5" d="M-180 967.3c36.3-2.8 145.2-11 217.8-17.1s145.2-14.1 217.8-19.3c72.5-5.3 145.1-10.2 217.7-12s145.2-1.2 217.8 1.4c72.6 2.5 145.2 8.3 217.8 14 72.6 5.6 145.2 13.8 217.8 19.7 72.6 5.8 145.2 12.3 217.7 15.6 72.6 3.2 145.2 4.8 217.8 3.7 72.6-1 181.5-8.3 217.8-9.9" class="hero-paths-current-stroke"></path></g><g class="hero-paths-current-band hero-paths-current-band-2"><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".31" d="M-180-63c36.3 3.2 145.2 13.5 217.8 19.5S183-30.6 255.6-27c72.5 3.6 145.1 5.8 217.7 5.3 72.6-.6 145.2-4.2 217.8-8.6 72.6-4.5 145.2-12 217.8-18.2 72.6-6.1 145.2-13.9 217.8-18.7s145.2-9 217.7-10c72.6-1.1 145.2.5 217.8 3.7s181.5 13 217.8 15.6" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".38" stroke-width="1.3" d="M-180 159.2c36.3 3.1 145.2 13.9 217.8 18.6 72.6 4.8 145.2 8.8 217.8 9.8 72.5.9 145.1-.8 217.7-4.1s145.2-9.8 217.8-15.7c72.6-6 145.2-14.1 217.8-19.7s145.2-11.4 217.8-13.8c72.6-2.5 145.2-3 217.7-1.1 72.6 1.8 145.2 6.9 217.8 12.1 72.6 5.3 181.5 16.2 217.8 19.4" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade-accent)" stroke-opacity=".8" stroke-width="1.9" d="M-180 278.9c36.3 2.3 145.2 11.2 217.8 13.6s145.2 2.7 217.8.7c72.5-1.9 145.1-7.1 217.7-12.4s145.2-13.4 217.8-19.5c72.6-6 145.2-13 217.8-16.8 72.6-3.7 145.2-6.2 217.8-5.8s145.2 3.7 217.7 8.1c72.6 4.3 145.2 11.8 217.8 17.9 72.6 6.2 181.5 15.8 217.8 18.9" class="hero-paths-current-stroke hero-paths-current-accent"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".52" stroke-width="1.8" d="M-180 395.9c36.3.9 145.2 5.9 217.8 5.5 72.6-.5 145.2-4 217.8-8.4 72.5-4.4 145.1-11.9 217.7-18.1 72.6-6.1 145.2-13.9 217.8-18.8 72.6-4.8 145.2-9.1 217.8-10.2s145.2.3 217.8 3.5c72.6 3.1 145.2 9.5 217.7 15.4 72.6 5.9 145.2 14.1 217.8 19.7 72.6 5.7 181.5 11.9 217.8 14.2" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".59" stroke-width="2" d="M-180 610.6c36.3-.7 145.2-.6 217.8-3.8 72.6-3.3 145.2-9.8 217.8-15.6 72.5-5.9 145.1-14.1 217.7-19.7s145.2-11.5 217.8-14c72.6-2.6 145.2-3.1 217.8-1.4 72.6 1.8 145.2 6.8 217.8 12s145.2 13.3 217.7 19.4c72.6 6 145.2 13.2 217.8 17.1s181.5 5.3 217.8 6.3" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".65" stroke-width="2.3" d="M-180 848.4c36.3-2.1 145.2-7 217.8-12.3 72.6-5.2 145.2-13.3 217.8-19.4 72.5-6 145.1-13.1 217.7-16.9s145.2-6.4 217.8-6.1 145.2 3.6 217.8 7.9c72.6 4.2 145.2 11.7 217.8 17.8s145.2 14 217.7 19c72.6 4.9 145.2 9.4 217.8 10.7s181.5-2.4 217.8-2.9" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".72" stroke-width="2.5" d="M-180 985.8c36.3-2.9 145.2-11.8 217.8-17.9 72.6-6.2 145.2-14 217.8-18.9 72.5-4.9 145.1-9.2 217.7-10.4s145.2.1 217.8 3.2 145.2 9.4 217.8 15.3c72.6 5.8 145.2 14 217.8 19.7s145.2 11.7 217.7 14.4c72.6 2.7 145.2 3.5 217.8 1.9s181.5-9.6 217.8-11.5" class="hero-paths-current-stroke"></path></g><g class="hero-paths-current-band hero-paths-current-band-3"><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".33" stroke-width="1.1" d="M-180-11.7C-143.7-8.4-34.8 2.2 37.8 8.1c72.6 5.8 145.2 12.2 217.8 15.4 72.5 3.1 145.1 4.5 217.7 3.4s145.2-5.4 217.8-10.2C763.7 11.8 836.3 4 908.9-2.1c72.6-6.2 145.2-13.7 217.8-18.1s145.2-7.9 217.7-8.3c72.6-.5 145.2 1.8 217.8 5.5S1743.7-9.1 1780-6.4" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".4" stroke-width="1.3" d="M-180 190.4c36.3 2.9 145.2 13.6 217.8 17.9s145.2 7.7 217.8 8c72.5.4 145.1-2.1 217.7-5.8 72.6-3.8 145.2-10.8 217.8-16.9 72.6-6 145.2-14.1 217.8-19.4s145.2-10.5 217.8-12.4 145.2-1.6 217.7.8c72.6 2.4 145.2 8 217.8 13.6 72.6 5.5 181.5 16.3 217.8 19.6" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".46" stroke-width="1.6" d="M-180 297.5c36.3 2 145.2 10.3 217.8 12.2 72.6 1.8 145.2 1.4 217.8-1.1 72.5-2.5 145.1-8.3 217.7-13.9S618.5 281 691.1 275c72.6-5.9 145.2-12.4 217.8-15.7s145.2-5 217.8-4c72.6.9 145.2 5 217.7 9.7 72.6 4.8 145.2 12.5 217.8 18.7 72.6 6.1 181.5 15.2 217.8 18.3" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".53" stroke-width="1.8" d="M-180 430.7c36.3.6 145.2 4.7 217.8 3.7 72.6-1.1 145.2-5.3 217.8-10.1 72.5-4.7 145.1-12.5 217.7-18.7 72.6-6.1 145.2-13.7 217.8-18.2 72.6-4.4 145.2-8 217.8-8.5 72.6-.6 145.2 1.7 217.8 5.3s145.2 10.5 217.7 16.5c72.6 6 145.2 14.1 217.8 19.5s181.5 10.8 217.8 12.9" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".6" stroke-width="2.1" d="M-180 661.3c36.3-1 145.2-1.9 217.8-5.7C110.4 651.9 183 645 255.6 639c72.5-6.1 145.1-14.2 217.7-19.5 72.6-5.4 145.2-10.6 217.8-12.6s145.2-1.8 217.8.5 145.2 7.9 217.8 13.4 145.2 13.7 217.7 19.7c72.6 5.9 145.2 12.6 217.8 16 72.6 3.5 181.5 3.8 217.8 4.6" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".67" stroke-width="2.3" d="M-180 885.6c36.3-2.2 145.2-8.1 217.8-13.6 72.6-5.6 145.2-13.8 217.8-19.7 72.5-5.9 145.1-12.5 217.7-15.9 72.6-3.3 145.2-5.1 217.8-4.2s145.2 4.8 217.8 9.5 145.2 12.4 217.8 18.5c72.6 6.2 145.2 13.8 217.7 18.4 72.6 4.6 145.2 8.4 217.8 9.1s181.5-4 217.8-4.8" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade-accent)" stroke-opacity=".8" stroke-width="3.2" d="M-180 1001.5c36.3-3.1 145.2-12.5 217.8-18.6 72.6-6.2 145.2-13.8 217.8-18.3 72.5-4.5 145.1-8.1 217.7-8.7 72.6-.7 145.2 1.4 217.8 5s145.2 10.4 217.8 16.4 145.2 14.1 217.8 19.6c72.6 5.4 145.2 10.8 217.7 13q108.9 3.3 217.8 0c72.6-2.1 181.5-10.8 217.8-13" class="hero-paths-current-stroke hero-paths-current-accent"></path></g><g class="hero-paths-current-band hero-paths-current-band-4"><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".34" stroke-width="1.1" d="M-180 37.2c36.3 3.3 145.2 14.1 217.8 19.7S183 68.4 255.6 71.1c72.5 2.6 145.1 3.2 217.7 1.5S618.5 66 691.1 60.8c72.6-5.1 145.2-13.2 217.8-19.3 72.6-6 145.2-13.2 217.8-17.2 72.6-3.9 145.2-6.7 217.7-6.6 72.6.1 145.2 3.2 217.8 7.3 72.6 4.2 181.5 14.7 217.8 17.6" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".41" stroke-width="1.4" d="M-180 217c36.3 2.9 145.2 13.2 217.8 17.1s145.2 6.5 217.8 6.3c72.5-.2 145.1-3.4 217.7-7.6 72.6-4.3 145.2-11.6 217.8-17.8 72.6-6.1 145.2-14 217.8-19s145.2-9.5 217.8-10.9 145.2-.3 217.7 2.7c72.6 2.9 145.2 9.1 217.8 14.8 72.6 5.8 181.5 16.5 217.8 19.8" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".48" stroke-width="1.6" d="M-180 317.4c36.3 1.8 145.2 9.3 217.8 10.6s145.2.1 217.8-3c72.5-3 145.1-9.3 217.7-15.1s145.2-14 217.8-19.7 145.2-11.8 217.8-14.6c72.6-2.7 145.2-3.6 217.8-2.1s145.2 6.2 217.7 11.3c72.6 5.1 145.2 13.1 217.8 19.2s181.5 14.6 217.8 17.5" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade-accent)" stroke-opacity=".8" stroke-width="2.3" d="M-180 470.1c36.3.4 145.2 3.5 217.8 1.9 72.6-1.7 145.2-6.5 217.8-11.6 72.5-5.2 145.1-13.2 217.7-19.3s145.2-13.3 217.8-17.3 145.2-6.9 217.8-6.8c72.6 0 145.2 3 217.8 7 72.6 4.1 145.2 11.4 217.7 17.5 72.6 6.1 145.2 14.1 217.8 19.2s181.5 9.5 217.8 11.4" class="hero-paths-current-stroke hero-paths-current-accent"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".61" stroke-width="2.1" d="M-180 711.7c36.3-1.2 145.2-3.2 217.8-7.4 72.6-4.1 145.2-11.5 217.8-17.6 72.5-6.1 145.1-14.1 217.7-19.1s145.2-9.7 217.8-11.1c72.6-1.5 145.2-.4 217.8 2.4 72.6 2.9 145.2 9 217.8 14.7 72.6 5.8 145.2 14 217.7 19.8 72.6 5.8 145.2 12 217.8 14.9s181.5 2.3 217.8 2.7" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".68" stroke-width="2.4" d="M-180 917.8c36.3-2.5 145.2-9.2 217.8-15 72.6-5.7 145.2-13.9 217.8-19.7 72.5-5.7 145.1-11.8 217.7-14.7 72.6-2.8 145.2-3.8 217.8-2.4 72.6 1.5 145.2 6.1 217.8 11.1 72.6 5.1 145.2 13 217.8 19.1 72.6 6.2 145.2 13.5 217.7 17.6 72.6 4.2 145.2 7.3 217.8 7.4s181.5-5.4 217.8-6.5" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".75" stroke-width="2.6" d="M-180 1015.7c36.3-3.2 145.2-13.1 217.8-19.2s145.2-13.4 217.8-17.4c72.5-4.1 145.1-7.1 217.7-7.1s145.2 2.8 217.8 6.9c72.6 4 145.2 11.2 217.8 17.3s145.2 14.1 217.8 19.2c72.6 5.2 145.2 10 217.7 11.6 72.6 1.6 145.2.9 217.8-1.8s181.5-12 217.8-14.4" class="hero-paths-current-stroke"></path></g><g class="hero-paths-current-band hero-paths-current-band-5"><path stroke="url(#hero-paths-current-fade-accent)" stroke-opacity=".8" stroke-width="1.5" d="M-180 82.4c36.3 3.3 145.2 14.1 217.8 19.5s145.2 10.7 217.8 12.8c72.5 2.1 145.1 2 217.7-.3 72.6-2.2 145.2-7.7 217.8-13.2s145.2-13.6 217.8-19.6 145.2-12.7 217.8-16.3c72.6-3.5 145.2-5.5 217.7-4.8 72.6.8 145.2 4.5 217.8 9.1 72.6 4.5 181.5 15.3 217.8 18.3" class="hero-paths-current-stroke hero-paths-current-accent"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".42" stroke-width="1.4" d="M-180 239.9c36.3 2.7 145.2 12.7 217.8 16.1s145.2 5.3 217.8 4.5c72.5-.8 145.1-4.7 217.7-9.3 72.6-4.7 145.2-12.4 217.8-18.5 72.6-6.2 145.2-13.8 217.8-18.5 72.6-4.6 145.2-8.5 217.8-9.3s145.2 1.1 217.7 4.5c72.6 3.5 145.2 10.2 217.8 16.1 72.6 6 181.5 16.4 217.8 19.6" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".49" stroke-width="1.7" d="M-180 339.8c36.3 1.5 145.2 8.3 217.8 9s145.2-1.3 217.8-4.9c72.5-3.5 145.1-10.2 217.7-16.2s145.2-14.1 217.8-19.6 145.2-11 217.8-13.2q108.9-3.45 217.8-.3c72.6 2.1 145.2 7.4 217.7 12.8 72.6 5.4 145.2 13.5 217.8 19.5 72.6 6.1 181.5 13.8 217.8 16.6" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".56" stroke-width="1.9" d="M-180 513.8c36.3 0 145.2 2.2 217.8 0s145.2-7.6 217.8-13.1c72.5-5.4 145.1-13.6 217.7-19.5 72.6-6 145.2-12.8 217.8-16.4s145.2-5.7 217.8-5c72.6.6 145.2 4.2 217.8 8.8 72.6 4.5 145.2 12.1 217.7 18.2 72.6 6.2 145.2 13.9 217.8 18.7 72.6 4.7 181.5 8.1 217.8 9.8" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".63" stroke-width="2.2" d="M-180 760.5c36.3-1.5 145.2-4.5 217.8-9.1S183 739.2 255.6 733c72.5-6.1 145.1-13.8 217.7-18.5s145.2-8.6 217.8-9.5 145.2.9 217.8 4.3c72.6 3.3 145.2 9.9 217.8 15.9 72.6 5.9 145.2 14.1 217.7 19.6 72.6 5.6 145.2 11.3 217.8 13.7s181.5.7 217.8.8" class="hero-paths-current-stroke"></path><path stroke="url(#hero-paths-current-fade)" stroke-opacity=".7" stroke-width="2.4" d="M-180 944.9c36.3-2.7 145.2-10.2 217.8-16.1 72.6-6 145.2-14.1 217.8-19.6 72.5-5.5 145.1-11.1 217.7-13.4q108.9-3.6 217.8-.6c72.6 2.1 145.2 7.3 217.8 12.7 72.6 5.3 145.2 13.4 217.8 19.5 72.6 6 145.2 12.9 217.7 16.6 72.6 3.7 145.2 6.1 217.8 5.6 72.6-.4 181.5-6.9 217.8-8.3" class="hero-paths-current-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-current/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #f7f7fb)
     --pulsar-hero-ink    the strokes         (default #1d1b3a)
     --pulsar-accent      the accented strokes (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-paths-current {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-paths-current .hero-paths-current-ground {
  fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-paths-current .hero-paths-current-stroke {
  fill: none;
  stroke-linecap: round;
}
.pulsar-hero-paths-current .hero-paths-current-accent-stop {
  stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-current .hero-paths-current-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-current .hero-paths-current-band-1 {
  animation-name: hero-paths-current-band-1;
  animation-duration: calc(14s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-current .hero-paths-current-band-2 {
  animation-name: hero-paths-current-band-2;
  animation-duration: calc(17s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-current .hero-paths-current-band-3 {
  animation-name: hero-paths-current-band-3;
  animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-current .hero-paths-current-band-4 {
  animation-name: hero-paths-current-band-4;
  animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-current .hero-paths-current-band-5 {
  animation-name: hero-paths-current-band-5;
  animation-duration: calc(26s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-current-band-1 {
  from {
    transform: translate(-60px, -8px);
  }
  to {
    transform: translate(60px, 8px);
  }
}
@keyframes hero-paths-current-band-2 {
  from {
    transform: translate(60px, 8px);
  }
  to {
    transform: translate(-60px, -8px);
  }
}
@keyframes hero-paths-current-band-3 {
  from {
    transform: translate(-60px, -8px);
  }
  to {
    transform: translate(60px, 8px);
  }
}
@keyframes hero-paths-current-band-4 {
  from {
    transform: translate(60px, 8px);
  }
  to {
    transform: translate(-60px, -8px);
  }
}
@keyframes hero-paths-current-band-5 {
  from {
    transform: translate(-60px, -8px);
  }
  to {
    transform: translate(60px, 8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-paths-current .hero-paths-current-band-1,
  .pulsar-hero-paths-current .hero-paths-current-band-2,
  .pulsar-hero-paths-current .hero-paths-current-band-3,
  .pulsar-hero-paths-current .hero-paths-current-band-4,
  .pulsar-hero-paths-current .hero-paths-current-band-5 {
    animation: none;
  }
}

More in this series10 in paths

All heroes