Pulsar
1×

Tide

Dark groundBusy

Stacked sine waves, phase shifted down the section, sliding sideways at five different 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
23 s, mirrored, loops
Canvas
1600 by 900, stretches to fill
Default tone
Dark ground: ground #0b0a16, ink #ffffff
Series
paths
Tags
waveshorizontallinesflow

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

The code

As a section

<!-- Pulsar by Business Nebula · "hero-paths-tide" · 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-tide/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-tide {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-paths-tide .hero-paths-tide-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-paths-tide .hero-paths-tide-stroke {
  fill: none;
  stroke-linecap: round;
}
.pulsar-hero-paths-tide .hero-paths-tide-accent-stop {
  stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-tide .hero-paths-tide-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-tide .hero-paths-tide-band-1 {
  animation-name: hero-paths-tide-band-1;
  animation-duration: calc(12s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-tide .hero-paths-tide-band-2 {
  animation-name: hero-paths-tide-band-2;
  animation-duration: calc(14s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-tide .hero-paths-tide-band-3 {
  animation-name: hero-paths-tide-band-3;
  animation-duration: calc(17s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-tide .hero-paths-tide-band-4 {
  animation-name: hero-paths-tide-band-4;
  animation-duration: calc(20s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-tide .hero-paths-tide-band-5 {
  animation-name: hero-paths-tide-band-5;
  animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-tide-band-1 {
  from {
    transform: translate(-90px, 0px);
  }
  to {
    transform: translate(90px, 0px);
  }
}
@keyframes hero-paths-tide-band-2 {
  from {
    transform: translate(90px, 0px);
  }
  to {
    transform: translate(-90px, 0px);
  }
}
@keyframes hero-paths-tide-band-3 {
  from {
    transform: translate(-90px, 0px);
  }
  to {
    transform: translate(90px, 0px);
  }
}
@keyframes hero-paths-tide-band-4 {
  from {
    transform: translate(90px, 0px);
  }
  to {
    transform: translate(-90px, 0px);
  }
}
@keyframes hero-paths-tide-band-5 {
  from {
    transform: translate(-90px, 0px);
  }
  to {
    transform: translate(90px, 0px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-paths-tide .hero-paths-tide-band-1,
  .pulsar-hero-paths-tide .hero-paths-tide-band-2,
  .pulsar-hero-paths-tide .hero-paths-tide-band-3,
  .pulsar-hero-paths-tide .hero-paths-tide-band-4,
  .pulsar-hero-paths-tide .hero-paths-tide-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-tide" data-pulsar="hero-paths-tide" 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-tide</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-tide-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-tide-fade-accent" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-paths-tide-accent-stop" offset="0" stop-opacity="0"></stop><stop class="hero-paths-tide-accent-stop" offset=".38" stop-opacity=".12"></stop><stop class="hero-paths-tide-accent-stop" offset=".72" stop-opacity=".7"></stop><stop class="hero-paths-tide-accent-stop" offset="1"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-paths-tide-ground"></rect><g class="hero-paths-tide-band hero-paths-tide-band-1"><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".3" stroke-width=".8" d="M-180-151.4c36.3 10.7 145.2 45.7 217.8 64.2S183-42.5 255.6-40.4c72.5 2.1 145.1-17 217.7-34.2 72.6-17.1 145.2-55.6 217.8-68.7s145.2-18.7 217.8-9.9c72.6 8.7 145.2 43.6 217.8 62.3s145.2 46.7 217.7 50c72.6 3.3 145.2-13.7 217.8-30.3s181.5-57.8 217.8-69.4" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".36" stroke-width="1.1" d="M-180 98.7c36.3 9.4 145.2 50.3 217.8 56.1 72.6 5.7 145.2-6.4 217.8-21.6 72.5-15.3 145.1-54.4 217.7-69.9C545.9 47.7 618.5 34.7 691.1 40c72.6 5.2 145.2 36 217.8 54.9 72.6 19 145.2 51.7 217.8 58.6s145.2-2.8 217.7-17.3c72.6-14.5 145.2-53.6 217.8-69.8 72.6-16.1 181.5-22.8 217.8-27.4" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".43" stroke-width="1.3" d="M-180 274.7c36.3-1.4 145.2 4.6 217.8-8.2s145.2-51 217.8-68.4c72.5-17.3 145.1-37.3 217.7-35.7s145.2 27 217.8 45.4 145.2 54.8 217.8 64.9c72.6 10.2 145.2 8.1 217.8-3.7 72.6-11.9 145.2-49.6 217.7-67.4 72.6-17.7 145.2-39.8 217.8-39.4s181.5 35 217.8 42" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".49" stroke-width="1.6" d="M-180 346.3c36.3-10.7 145.2-45.7 217.8-64.2s145.2-44.7 217.8-46.8c72.5-2.1 145.1 17.1 217.7 34.2 72.6 17.2 145.2 55.6 217.8 68.8 72.6 13.1 145.2 18.6 217.8 9.9s145.2-43.6 217.8-62.3c72.6-18.8 145.2-46.7 217.7-50 72.6-3.3 145.2 13.6 217.8 30.2s181.5 57.9 217.8 69.4" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".56" stroke-width="1.8" d="M-180 402.9c36.3-9.3 145.2-50.3 217.8-56 72.6-5.8 145.2 6.3 217.8 21.6 72.5 15.2 145.1 54.3 217.7 69.9 72.6 15.5 145.2 28.5 217.8 23.3 72.6-5.3 145.2-36.1 217.8-55s145.2-51.7 217.8-58.6c72.6-6.8 145.2 2.9 217.7 17.4 72.6 14.5 145.2 53.5 217.8 69.7s181.5 22.8 217.8 27.4" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".62" stroke-width="2.1" d="M-180 538.1c36.3 1.4 145.2-4.5 217.8 8.2 72.6 12.8 145.2 51.1 217.8 68.4 72.5 17.4 145.1 37.4 217.7 35.7 72.6-1.6 145.2-27 217.8-45.4s145.2-54.7 217.8-64.9 145.2-8.1 217.8 3.7c72.6 11.9 145.2 49.6 217.7 67.4 72.6 17.8 145.2 39.9 217.8 39.4 72.6-.4 181.5-35 217.8-42" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade-accent)" stroke-opacity=".8" stroke-width="2.9" d="M-180 744.6c36.3 10.7 145.2 45.7 217.8 64.2s145.2 44.7 217.8 46.8c72.5 2.1 145.1-17.1 217.7-34.2 72.6-17.2 145.2-55.6 217.8-68.7 72.6-13.2 145.2-18.7 217.8-10s145.2 43.6 217.8 62.3c72.6 18.8 145.2 46.7 217.7 50 72.6 3.3 145.2-13.6 217.8-30.2s181.5-57.9 217.8-69.4" class="hero-paths-tide-stroke hero-paths-tide-accent"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".75" stroke-width="2.6" d="M-180 938.1c36.3 9.4 145.2 50.3 217.8 56 72.6 5.8 145.2-6.3 217.8-21.6 72.5-15.2 145.1-54.3 217.7-69.9 72.6-15.5 145.2-28.5 217.8-23.3 72.6 5.3 145.2 36.1 217.8 55s145.2 51.7 217.8 58.6 145.2-2.9 217.7-17.4c72.6-14.5 145.2-53.5 217.8-69.7s181.5-22.8 217.8-27.4" class="hero-paths-tide-stroke"></path></g><g class="hero-paths-tide-band hero-paths-tide-band-2"><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".31" stroke-width=".9" d="M-180-101.1c36.3 11.4 145.2 51.3 217.8 68.5C110.4-15.3 183 4.3 255.6 2.4 328.1.5 400.7-25.3 473.3-43.7c72.6-18.5 145.2-54.6 217.8-64.6s145.2-7.4 217.8 4.7c72.6 12 145.2 49.8 217.8 67.5s145.2 39.4 217.7 38.7C1417 2 1489.6-21.9 1562.2-40c72.6-18.2 181.5-55.2 217.8-66.2" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".38" stroke-width="1.1" d="M-180 142.9c36.3 7.7 145.2 44.2 217.8 46.1s145.2-17.7 217.8-35c72.5-17.2 145.1-55.6 217.7-68.5 72.6-13 145.2-18 217.8-9.1s145.2 44.1 217.8 62.7c72.6 18.7 145.2 46.4 217.8 49.4 72.6 3.1 145.2-14.3 217.7-31 72.6-16.8 145.2-55.5 217.8-69.3S1743.7 77 1780 74.7" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".44" stroke-width="1.4" d="M-180 295.8c36.3-3.8 145.2-7.1 217.8-22.5s145.2-54.5 217.8-69.9c72.5-15.4 145.1-27.9 217.7-22.4s145.2 36.5 217.8 55.5c72.6 18.9 145.2 51.4 217.8 58.1 72.6 6.6 145.2-3.6 217.8-18.2 72.6-14.7 145.2-53.8 217.7-69.8 72.6-16.1 145.2-31 217.8-26.6 72.6 4.3 181.5 43.9 217.8 52.7" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade-accent)" stroke-opacity=".8" stroke-width="2" d="M-180 355c36.3-11.4 145.2-51.3 217.8-68.6 72.6-17.2 145.2-36.8 217.8-34.9 72.5 1.8 145.1 27.6 217.7 46.1 72.6 18.4 145.2 54.6 217.8 64.5 72.6 10 145.2 7.4 217.8-4.6s145.2-49.9 217.8-67.6 145.2-39.4 217.7-38.7c72.6.7 145.2 24.6 217.8 42.7S1743.7 349 1780 360" class="hero-paths-tide-stroke hero-paths-tide-accent"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".57" stroke-width="1.9" d="M-180 422.1c36.3-7.6 145.2-44.2 217.8-46.1 72.6-1.8 145.2 17.7 217.8 35 72.5 17.2 145.1 55.6 217.7 68.6 72.6 12.9 145.2 18 217.8 9 72.6-8.9 145.2-44 217.8-62.7s145.2-46.3 217.8-49.4c72.6-3 145.2 14.3 217.7 31.1 72.6 16.7 145.2 55.5 217.8 69.3s181.5 11.2 217.8 13.4" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".63" stroke-width="2.1" d="M-180 575.9c36.3 3.8 145.2 7.1 217.8 22.5s145.2 54.5 217.8 69.9c72.5 15.4 145.1 27.9 217.7 22.4s145.2-36.5 217.8-55.5c72.6-18.9 145.2-51.4 217.8-58.1 72.6-6.6 145.2 3.6 217.8 18.3 72.6 14.6 145.2 53.7 217.7 69.7 72.6 16.1 145.2 31 217.8 26.6 72.6-4.3 181.5-43.9 217.8-52.7" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".7" stroke-width="2.4" d="M-180 787.1c36.3 11.4 145.2 51.3 217.8 68.6 72.6 17.2 145.2 36.8 217.8 34.9 72.5-1.8 145.1-27.6 217.7-46.1 72.6-18.4 145.2-54.6 217.8-64.6 72.6-9.9 145.2-7.3 217.8 4.7s145.2 49.8 217.8 67.6c72.6 17.7 145.2 39.4 217.7 38.7 72.6-.7 145.2-24.6 217.8-42.7s181.5-55.1 217.8-66.1" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".76" stroke-width="2.6" d="M-180 969.1c36.3 7.7 145.2 44.3 217.8 46.1 72.6 1.9 145.2-17.7 217.8-34.9 72.5-17.3 145.1-55.7 217.7-68.6 72.6-13 145.2-18 217.8-9.1 72.6 9 145.2 44.1 217.8 62.8 72.6 18.6 145.2 46.3 217.8 49.3 72.6 3.1 145.2-14.3 217.7-31 72.6-16.8 145.2-55.5 217.8-69.3s181.5-11.2 217.8-13.5" class="hero-paths-tide-stroke"></path></g><g class="hero-paths-tide-band hero-paths-tide-band-3"><path stroke="url(#hero-paths-tide-fade-accent)" stroke-opacity=".8" stroke-width="1.1" d="M-180-49.8C-143.7-38.2-34.8 4.8 37.8 20.1S183 47.4 255.6 41.7c72.5-5.7 145.1-37.1 217.7-56 72.6-19 145.2-51.2 217.8-57.6s145.2 4.2 217.8 19C981.5-38 1054.1 1 1126.7 17c72.6 15.9 145.2 30.3 217.7 25.7 72.6-4.5 145.2-34.4 217.8-53.2 72.6-18.9 181.5-50 217.8-60" class="hero-paths-tide-stroke hero-paths-tide-accent"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".39" stroke-width="1.2" d="M-180 182.9c36.3 5.7 145.2 36.3 217.8 34.2s145.2-28.3 217.8-46.8c72.5-18.5 145.1-54.4 217.7-64.2s145.2-6.7 217.8 5.6c72.6 12.2 145.2 50.1 217.8 67.7 72.6 17.7 145.2 38.9 217.8 38s145.2-25.2 217.7-43.4c72.6-18.2 145.2-55 217.8-65.8s181.5.9 217.8 1.1" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".45" stroke-width="1.4" d="M-180 312.7c36.3-5.9 145.2-18.4 217.8-35.7 72.6-17.4 145.2-55.6 217.8-68.4 72.5-12.8 145.1-17.3 217.7-8.2 72.6 9.2 145.2 44.5 217.8 63.1 72.6 18.7 145.2 46 217.8 48.8s145.2-15 217.8-31.9c72.6-16.8 145.2-55.5 217.7-69.1 72.6-13.7 145.2-20.7 217.8-12.6s181.5 50.9 217.8 61.1" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".52" stroke-width="1.7" d="M-180 364c36.3-11.6 145.2-54.6 217.8-69.9 72.6-15.2 145.2-27.3 217.8-21.6 72.5 5.8 145.1 37.1 217.7 56.1 72.6 18.9 145.2 51.1 217.8 57.5 72.6 6.5 145.2-4.2 217.8-19s145.2-53.9 217.8-69.8c72.6-16 145.2-30.4 217.7-25.8 72.6 4.6 145.2 34.4 217.8 53.3 72.6 18.8 181.5 49.9 217.8 59.9" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".58" stroke-width="1.9" d="M-180 445.3c36.3-5.7 145.2-36.3 217.8-34.2s145.2 28.3 217.8 46.8c72.5 18.5 145.1 54.4 217.7 64.2s145.2 6.7 217.8-5.5c72.6-12.3 145.2-50.2 217.8-67.8 72.6-17.7 145.2-38.9 217.8-38s145.2 25.2 217.7 43.4c72.6 18.2 145.2 55 217.8 65.8s181.5-.9 217.8-1.1" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".65" stroke-width="2.2" d="M-180 616.2c36.3 6 145.2 18.4 217.8 35.8 72.6 17.3 145.2 55.6 217.8 68.4 72.5 12.7 145.1 17.3 217.7 8.1 72.6-9.1 145.2-44.4 217.8-63.1 72.6-18.6 145.2-45.9 217.8-48.7s145.2 15 217.8 31.8c72.6 16.9 145.2 55.6 217.7 69.2 72.6 13.6 145.2 20.7 217.8 12.6s181.5-50.9 217.8-61.1" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".71" stroke-width="2.4" d="M-180 828.3c36.3 11.6 145.2 54.6 217.8 69.9s145.2 27.3 217.8 21.6c72.5-5.7 145.1-37.1 217.7-56 72.6-19 145.2-51.2 217.8-57.6s145.2 4.2 217.8 19 145.2 53.9 217.8 69.9c72.6 15.9 145.2 30.3 217.7 25.7 72.6-4.5 145.2-34.4 217.8-53.2 72.6-18.9 181.5-50 217.8-60" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade-accent)" stroke-opacity=".8" stroke-width="3.4" d="M-180 997.1c36.3 5.7 145.2 36.3 217.8 34.2s145.2-28.2 217.8-46.7c72.5-18.5 145.1-54.5 217.7-64.3s145.2-6.7 217.8 5.6c72.6 12.2 145.2 50.1 217.8 67.8 72.6 17.6 145.2 38.8 217.8 37.9s145.2-25.1 217.7-43.4c72.6-18.2 145.2-55 217.8-65.8s181.5.9 217.8 1.1" class="hero-paths-tide-stroke hero-paths-tide-accent"></path></g><g class="hero-paths-tide-band hero-paths-tide-band-4"><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".34" d="M-180 1.4C-143.7 12.7-34.8 57 37.8 69.6S183 86.3 255.6 76.9c72.5-9.4 145.1-44.9 217.7-63.5s145.2-45.5 217.8-48.1S836.3-19 908.9-2.1c72.6 17 145.2 55.6 217.8 69.1 72.6 13.4 145.2 20 217.7 11.7 72.6-8.3 145.2-42.8 217.8-61.6s181.5-42.6 217.8-51.2" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".4" stroke-width="1.2" d="M-180 218.4c36.3 3.5 145.2 26.7 217.8 20.8 72.6-6 145.2-37.7 217.8-56.6 72.5-19 145.1-50.9 217.7-57.1s145.2 5 217.8 19.9c72.6 15 145.2 54.1 217.8 69.9s145.2 29.8 217.8 24.9c72.6-4.8 145.2-34.9 217.7-53.8 72.6-18.9 145.2-52.2 217.8-59.5s181.5 13 217.8 15.6" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".47" stroke-width="1.5" d="M-180 326.2c36.3-7.9 145.2-28.9 217.8-47.4 72.6-18.6 145.2-54.3 217.8-63.9 72.5-9.6 145.1-6 217.7 6.4s145.2 50.5 217.8 68c72.6 17.6 145.2 38.4 217.8 37.3 72.6-1.2 145.2-25.9 217.8-44.1 72.6-18.3 145.2-55 217.7-65.6 72.6-10.6 145.2-9.4 217.8 2 72.6 11.5 181.5 55.7 217.8 66.9" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".53" stroke-width="1.7" d="M-180 374.5c36.3-11.4 145.2-55.6 217.8-68.2S183 289.6 255.6 299c72.5 9.3 145.1 44.9 217.7 63.5s145.2 45.5 217.8 48.1c72.6 2.5 145.2-15.7 217.8-32.7 72.6-16.9 145.2-55.5 217.8-69s145.2-20 217.7-11.7c72.6 8.3 145.2 42.7 217.8 61.5s181.5 42.7 217.8 51.2" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade-accent)" stroke-opacity=".8" stroke-width="2.5" d="M-180 472.4c36.3-3.4 145.2-26.7 217.8-20.7 72.6 5.9 145.2 37.6 217.8 56.5 72.5 19 145.1 50.9 217.7 57.1s145.2-4.9 217.8-19.9 145.2-54.1 217.8-69.9 145.2-29.7 217.8-24.9 145.2 34.9 217.7 53.8c72.6 18.9 145.2 52.2 217.8 59.5 72.6 7.4 181.5-13 217.8-15.6" class="hero-paths-tide-stroke hero-paths-tide-accent"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".66" stroke-width="2.2" d="M-180 658.3c36.3 7.9 145.2 28.9 217.8 47.5 72.6 18.5 145.2 54.3 217.8 63.8 72.5 9.6 145.1 6 217.7-6.4s145.2-50.5 217.8-68 145.2-38.4 217.8-37.2c72.6 1.1 145.2 25.8 217.8 44.1 72.6 18.2 145.2 54.9 217.7 65.5 72.6 10.6 145.2 9.5 217.8-2s181.5-55.7 217.8-66.8" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".72" stroke-width="2.5" d="M-180 867.5c36.3 11.3 145.2 55.6 217.8 68.2S183 952.3 255.6 943c72.5-9.4 145.1-44.9 217.7-63.5s145.2-45.5 217.8-48.1 145.2 15.7 217.8 32.6c72.6 17 145.2 55.6 217.8 69.1 72.6 13.4 145.2 20 217.7 11.7 72.6-8.3 145.2-42.8 217.8-61.6s181.5-42.6 217.8-51.2" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".79" stroke-width="2.7" d="M-180 1022.5c36.3 3.4 145.2 26.7 217.8 20.7 72.6-5.9 145.2-37.6 217.8-56.5 72.5-19 145.1-50.9 217.7-57.1s145.2 4.9 217.8 19.9c72.6 14.9 145.2 54 217.8 69.8 72.6 15.9 145.2 29.8 217.8 25s145.2-34.9 217.7-53.8c72.6-18.9 145.2-52.2 217.8-59.6 72.6-7.3 181.5 13 217.8 15.7" class="hero-paths-tide-stroke"></path></g><g class="hero-paths-tide-band hero-paths-tide-band-5"><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".35" d="M-180 51.3c36.3 10.5 145.2 54.1 217.8 63.5 72.6 9.3 145.2 5.2 217.8-7.3 72.5-12.6 145.1-50.8 217.7-68.2C545.9 21.8 618.5 1.4 691.1 2.8s145.2 26.4 217.8 44.7c72.6 18.4 145.2 54.9 217.8 65.3s145.2 8.8 217.7-2.9c72.6-11.7 145.2-49.2 217.8-67.1S1743.7 9.3 1780 2.6" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade-accent)" stroke-opacity=".8" stroke-width="1.6" d="M-180 249c36.3 1.1 145.2 16 217.8 6.4s145.2-45.3 217.8-63.9c72.5-18.5 145.1-45.1 217.7-47.4s145.2 16.4 217.8 33.4c72.6 17.1 145.2 55.6 217.8 68.9s145.2 19.3 217.8 10.8 145.2-43.2 217.7-61.9c72.6-18.8 145.2-47.1 217.8-50.6s181.5 24.5 217.8 29.4" class="hero-paths-tide-stroke hero-paths-tide-accent"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".48" stroke-width="1.5" d="M-180 337.1c36.3-9.5 145.2-38.1 217.8-57.1 72.6-18.9 145.2-50.6 217.8-56.6 72.5-5.9 145.1 5.7 217.7 20.8s145.2 54.2 217.8 69.9 145.2 29.2 217.8 24.1c72.6-5 145.2-35.5 217.8-54.4s145.2-51.9 217.7-59c72.6-7.1 145.2 2.1 217.8 16.4 72.6 14.4 181.5 58.1 217.8 69.7" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".54" stroke-width="1.8" d="M-180 387.2c36.3-10.6 145.2-54.1 217.8-63.5s145.2-5.3 217.8 7.3c72.5 12.6 145.1 50.7 217.7 68.2 72.6 17.4 145.2 37.9 217.8 36.5s145.2-26.5 217.8-44.8 145.2-54.8 217.8-65.2 145.2-8.8 217.7 2.9c72.6 11.6 145.2 49.2 217.8 67 72.6 17.9 181.5 33.5 217.8 40.2" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".61" stroke-width="2" d="M-180 503.5c36.3-1.1 145.2-16 217.8-6.5 72.6 9.6 145.2 45.4 217.8 63.9 72.5 18.6 145.1 45.1 217.7 47.4 72.6 2.4 145.2-16.3 217.8-33.4 72.6-17 145.2-55.6 217.8-68.9 72.6-13.2 145.2-19.3 217.8-10.8s145.2 43.2 217.7 62c72.6 18.7 145.2 47 217.8 50.6 72.6 3.5 181.5-24.6 217.8-29.5" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".67" stroke-width="2.3" d="M-180 701.4c36.3 9.5 145.2 38.1 217.8 57 72.6 19 145.2 50.6 217.8 56.6 72.5 6 145.1-5.6 217.7-20.7 72.6-15.2 145.2-54.3 217.8-69.9 72.6-15.7 145.2-29.2 217.8-24.2 72.6 5.1 145.2 35.5 217.8 54.4 72.6 19 145.2 52 217.7 59.1 72.6 7.1 145.2-2.1 217.8-16.5 72.6-14.3 181.5-58 217.8-69.6" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".74" stroke-width="2.5" d="M-180 904.2c36.3 10.6 145.2 54.1 217.8 63.5s145.2 5.3 217.8-7.3c72.5-12.6 145.1-50.8 217.7-68.2 72.6-17.5 145.2-37.9 217.8-36.5s145.2 26.4 217.8 44.8c72.6 18.3 145.2 54.8 217.8 65.2s145.2 8.8 217.7-2.9c72.6-11.6 145.2-49.2 217.8-67.1 72.6-17.8 181.5-33.5 217.8-40.2" class="hero-paths-tide-stroke"></path><path stroke="url(#hero-paths-tide-fade)" stroke-opacity=".8" stroke-width="2.8" d="M-180 1045.3c36.3 1.1 145.2 16 217.8 6.5 72.6-9.6 145.2-45.4 217.8-63.9 72.5-18.6 145.1-45.1 217.7-47.4 72.6-2.4 145.2 16.3 217.8 33.4 72.6 17 145.2 55.6 217.8 68.9 72.6 13.2 145.2 19.3 217.8 10.8s145.2-43.2 217.7-62c72.6-18.7 145.2-47 217.8-50.6 72.6-3.5 181.5 24.6 217.8 29.5" class="hero-paths-tide-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-tide/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-tide {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-paths-tide .hero-paths-tide-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-paths-tide .hero-paths-tide-stroke {
  fill: none;
  stroke-linecap: round;
}
.pulsar-hero-paths-tide .hero-paths-tide-accent-stop {
  stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-tide .hero-paths-tide-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-tide .hero-paths-tide-band-1 {
  animation-name: hero-paths-tide-band-1;
  animation-duration: calc(12s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-tide .hero-paths-tide-band-2 {
  animation-name: hero-paths-tide-band-2;
  animation-duration: calc(14s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-tide .hero-paths-tide-band-3 {
  animation-name: hero-paths-tide-band-3;
  animation-duration: calc(17s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-tide .hero-paths-tide-band-4 {
  animation-name: hero-paths-tide-band-4;
  animation-duration: calc(20s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-tide .hero-paths-tide-band-5 {
  animation-name: hero-paths-tide-band-5;
  animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-tide-band-1 {
  from {
    transform: translate(-90px, 0px);
  }
  to {
    transform: translate(90px, 0px);
  }
}
@keyframes hero-paths-tide-band-2 {
  from {
    transform: translate(90px, 0px);
  }
  to {
    transform: translate(-90px, 0px);
  }
}
@keyframes hero-paths-tide-band-3 {
  from {
    transform: translate(-90px, 0px);
  }
  to {
    transform: translate(90px, 0px);
  }
}
@keyframes hero-paths-tide-band-4 {
  from {
    transform: translate(90px, 0px);
  }
  to {
    transform: translate(-90px, 0px);
  }
}
@keyframes hero-paths-tide-band-5 {
  from {
    transform: translate(-90px, 0px);
  }
  to {
    transform: translate(90px, 0px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-paths-tide .hero-paths-tide-band-1,
  .pulsar-hero-paths-tide .hero-paths-tide-band-2,
  .pulsar-hero-paths-tide .hero-paths-tide-band-3,
  .pulsar-hero-paths-tide .hero-paths-tide-band-4,
  .pulsar-hero-paths-tide .hero-paths-tide-band-5 {
    animation: none;
  }
}

More in this series10 in paths

All heroes