Pulsar
1×

Wake

Dark groundMedium

Curves fanning from off the bottom right corner, the fan opening and closing as its bands turn against each other.

“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
linesfandiagonal

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

The code

As a section

<!-- Pulsar by Business Nebula · "hero-paths-wake" · 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-wake/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-wake {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-paths-wake .hero-paths-wake-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-paths-wake .hero-paths-wake-stroke {
  fill: none;
  stroke-linecap: round;
}
.pulsar-hero-paths-wake .hero-paths-wake-accent-stop {
  stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-wake .hero-paths-wake-band {
  transform-box: view-box;
  transform-origin: 1820px 1080px;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-paths-wake .hero-paths-wake-band-1 {
  animation-name: hero-paths-wake-band-1;
  animation-duration: calc(12s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-wake .hero-paths-wake-band-2 {
  animation-name: hero-paths-wake-band-2;
  animation-duration: calc(15s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-wake .hero-paths-wake-band-3 {
  animation-name: hero-paths-wake-band-3;
  animation-duration: calc(18s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-wake .hero-paths-wake-band-4 {
  animation-name: hero-paths-wake-band-4;
  animation-duration: calc(21s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-wake .hero-paths-wake-band-5 {
  animation-name: hero-paths-wake-band-5;
  animation-duration: calc(25s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-wake-band-1 {
  from {
    transform: rotate(-1.4deg);
  }
  to {
    transform: rotate(1.4deg);
  }
}
@keyframes hero-paths-wake-band-2 {
  from {
    transform: rotate(1.4deg);
  }
  to {
    transform: rotate(-1.4deg);
  }
}
@keyframes hero-paths-wake-band-3 {
  from {
    transform: rotate(-1.4deg);
  }
  to {
    transform: rotate(1.4deg);
  }
}
@keyframes hero-paths-wake-band-4 {
  from {
    transform: rotate(1.4deg);
  }
  to {
    transform: rotate(-1.4deg);
  }
}
@keyframes hero-paths-wake-band-5 {
  from {
    transform: rotate(-1.4deg);
  }
  to {
    transform: rotate(1.4deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-paths-wake .hero-paths-wake-band-1,
  .pulsar-hero-paths-wake .hero-paths-wake-band-2,
  .pulsar-hero-paths-wake .hero-paths-wake-band-3,
  .pulsar-hero-paths-wake .hero-paths-wake-band-4,
  .pulsar-hero-paths-wake .hero-paths-wake-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-wake" data-pulsar="hero-paths-wake" 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-wake</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-wake-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-wake-fade-accent" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-paths-wake-accent-stop" offset="0" stop-opacity="0"></stop><stop class="hero-paths-wake-accent-stop" offset=".38" stop-opacity=".12"></stop><stop class="hero-paths-wake-accent-stop" offset=".72" stop-opacity=".7"></stop><stop class="hero-paths-wake-accent-stop" offset="1"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-paths-wake-ground"></rect><g class="hero-paths-wake-band hero-paths-wake-band-1"><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".3" d="M1820 1080Q655.7 779.5-537.5 630.3" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade-accent)" stroke-opacity=".8" stroke-width="1.6" d="M1820 1080Q822.8 404.3-276.4-88.3" class="hero-paths-wake-stroke hero-paths-wake-accent"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".44" stroke-width="1.6" d="M1820 1080Q989.9 206.9 18.3-505.6" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".51" stroke-width="1.9" d="M1820 1080Q1125.7 97.9 304.7-781.1" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".59" stroke-width="2.1" d="M1820 1080Q1364.8-31.5 815.1-1099.5" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".66" stroke-width="2.4" d="M1820 1080q-68.8-1198.9-228-2389.1" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".73" stroke-width="2.7" d="M1820 1080q298.2-1164.3 463.3-2354.9" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".8" stroke-width="3" d="M1820 1080Q2353.5.6 2703.5-1151.5" class="hero-paths-wake-stroke"></path></g><g class="hero-paths-wake-band hero-paths-wake-band-2"><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".31" stroke-width="1.1" d="M1820 1080Q680.8 693.6-500.9 468.8" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".39" stroke-width="1.3" d="M1820 1080Q860.8 350.9-212.9-195.6" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".46" stroke-width="1.6" d="M1820 1080Q1016.2 183 70.5-562.9" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".53" stroke-width="1.9" d="M1820 1080Q1160.8 74.5 381.4-841.1" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".6" stroke-width="2.2" d="M1820 1080Q1433.2-57 956.4-1159.2" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade-accent)" stroke-opacity=".8" stroke-width="3.1" d="M1820 1080q12.9-1200.9-69.8-2399" class="hero-paths-wake-stroke hero-paths-wake-accent"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".74" stroke-width="2.8" d="M1820 1080q355-1148.7 565.6-2332.4" class="hero-paths-wake-stroke"></path></g><g class="hero-paths-wake-band hero-paths-wake-band-3"><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".33" stroke-width="1.1" d="M1820 1080Q711.6 611.5-454.3 313.4" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".4" stroke-width="1.4" d="M1820 1080Q897.1 305.3-150.9-289.5" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade-accent)" stroke-opacity=".8" stroke-width="2.1" d="M1820 1080Q1041.7 161.3 122.9-617" class="hero-paths-wake-stroke hero-paths-wake-accent"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".54" stroke-width="2" d="M1820 1080Q1201.6 49.3 469.8-904.2" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".61" stroke-width="2.3" d="M1820 1080Q1507.6-79.5 1108-1212" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".69" stroke-width="2.5" d="M1820 1080q91.8-1197.6 80.6-2398.6" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".76" stroke-width="2.8" d="M1820 1080q406-1132.1 656.5-2308.5" class="hero-paths-wake-stroke"></path></g><g class="hero-paths-wake-band hero-paths-wake-band-4"><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".34" stroke-width="1.2" d="M1820 1080Q746.6 535.2-399.6 167.2" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".41" stroke-width="1.5" d="M1820 1080Q930.7 266.8-91.5-371.2" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".49" stroke-width="1.7" d="M1820 1080Q1067.5 140.6 177.8-670.2" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".56" stroke-width="2" d="M1820 1080Q1248.9 22.8 571.2-969.5" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".63" stroke-width="2.3" d="M1820 1080Q1586.5-97.9 1267-1255.4" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".7" stroke-width="2.6" d="M1820 1080q166.2-1189.8 220.6-2389.8" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade-accent)" stroke-opacity=".8" stroke-width="3.6" d="M1820 1080q452-1115 738-2283.7" class="hero-paths-wake-stroke hero-paths-wake-accent"></path></g><g class="hero-paths-wake-band hero-paths-wake-band-5"><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".36" stroke-width="1.2" d="M1820 1080Q784.2 465.8-339.5 32.8" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".43" stroke-width="1.5" d="M1820 1080Q961.6 234.4-35.3-442.5" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".5" stroke-width="1.8" d="M1820 1080Q1095 119.7 237.6-724.4" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade-accent)" stroke-opacity=".8" stroke-width="2.6" d="M1820 1080Q1303.2-4.5 686.3-1035.4" class="hero-paths-wake-stroke hero-paths-wake-accent"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".64" stroke-width="2.4" d="M1820 1080q-151.6-1191.2-390.3-2368" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".71" stroke-width="2.7" d="M1820 1080q235.2-1178.3 348.4-2374.6" class="hero-paths-wake-stroke"></path><path stroke="url(#hero-paths-wake-fade)" stroke-opacity=".79" stroke-width="2.9" d="M1820 1080q494.1-1097.5 812.7-2258.2" class="hero-paths-wake-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-wake/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-wake {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-paths-wake .hero-paths-wake-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-paths-wake .hero-paths-wake-stroke {
  fill: none;
  stroke-linecap: round;
}
.pulsar-hero-paths-wake .hero-paths-wake-accent-stop {
  stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-wake .hero-paths-wake-band {
  transform-box: view-box;
  transform-origin: 1820px 1080px;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-paths-wake .hero-paths-wake-band-1 {
  animation-name: hero-paths-wake-band-1;
  animation-duration: calc(12s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-wake .hero-paths-wake-band-2 {
  animation-name: hero-paths-wake-band-2;
  animation-duration: calc(15s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-wake .hero-paths-wake-band-3 {
  animation-name: hero-paths-wake-band-3;
  animation-duration: calc(18s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-wake .hero-paths-wake-band-4 {
  animation-name: hero-paths-wake-band-4;
  animation-duration: calc(21s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-wake .hero-paths-wake-band-5 {
  animation-name: hero-paths-wake-band-5;
  animation-duration: calc(25s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-wake-band-1 {
  from {
    transform: rotate(-1.4deg);
  }
  to {
    transform: rotate(1.4deg);
  }
}
@keyframes hero-paths-wake-band-2 {
  from {
    transform: rotate(1.4deg);
  }
  to {
    transform: rotate(-1.4deg);
  }
}
@keyframes hero-paths-wake-band-3 {
  from {
    transform: rotate(-1.4deg);
  }
  to {
    transform: rotate(1.4deg);
  }
}
@keyframes hero-paths-wake-band-4 {
  from {
    transform: rotate(1.4deg);
  }
  to {
    transform: rotate(-1.4deg);
  }
}
@keyframes hero-paths-wake-band-5 {
  from {
    transform: rotate(-1.4deg);
  }
  to {
    transform: rotate(1.4deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-paths-wake .hero-paths-wake-band-1,
  .pulsar-hero-paths-wake .hero-paths-wake-band-2,
  .pulsar-hero-paths-wake .hero-paths-wake-band-3,
  .pulsar-hero-paths-wake .hero-paths-wake-band-4,
  .pulsar-hero-paths-wake .hero-paths-wake-band-5 {
    animation: none;
  }
}

More in this series10 in paths

All heroes