Pulsar
1×

Weave

Light groundBusy

Two families of diagonals crossing at a shallow angle, each in its own bands moving the other way.

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

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

The code

As a section

<!-- Pulsar by Business Nebula · "hero-paths-weave" · 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-weave/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-weave {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-paths-weave .hero-paths-weave-ground {
  fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-paths-weave .hero-paths-weave-stroke {
  fill: none;
  stroke-linecap: round;
}
.pulsar-hero-paths-weave .hero-paths-weave-accent-stop {
  stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-weave .hero-paths-weave-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-weave .hero-paths-weave-band-1 {
  animation-name: hero-paths-weave-band-1;
  animation-duration: calc(11s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-weave .hero-paths-weave-band-2 {
  animation-name: hero-paths-weave-band-2;
  animation-duration: calc(14s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-weave .hero-paths-weave-band-3 {
  animation-name: hero-paths-weave-band-3;
  animation-duration: calc(16s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-weave .hero-paths-weave-band-4 {
  animation-name: hero-paths-weave-band-4;
  animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-weave .hero-paths-weave-band-5 {
  animation-name: hero-paths-weave-band-5;
  animation-duration: calc(22s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-weave-band-1 {
  from {
    transform: translate(-36px, 24px) skewY(-1.5deg);
  }
  to {
    transform: translate(36px, -24px) skewY(1.5deg);
  }
}
@keyframes hero-paths-weave-band-2 {
  from {
    transform: translate(36px, -24px) skewY(1.5deg);
  }
  to {
    transform: translate(-36px, 24px) skewY(-1.5deg);
  }
}
@keyframes hero-paths-weave-band-3 {
  from {
    transform: translate(-36px, 24px) skewY(-1.5deg);
  }
  to {
    transform: translate(36px, -24px) skewY(1.5deg);
  }
}
@keyframes hero-paths-weave-band-4 {
  from {
    transform: translate(36px, -24px) skewY(1.5deg);
  }
  to {
    transform: translate(-36px, 24px) skewY(-1.5deg);
  }
}
@keyframes hero-paths-weave-band-5 {
  from {
    transform: translate(-36px, 24px) skewY(-1.5deg);
  }
  to {
    transform: translate(36px, -24px) skewY(1.5deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-paths-weave .hero-paths-weave-band-1,
  .pulsar-hero-paths-weave .hero-paths-weave-band-2,
  .pulsar-hero-paths-weave .hero-paths-weave-band-3,
  .pulsar-hero-paths-weave .hero-paths-weave-band-4,
  .pulsar-hero-paths-weave .hero-paths-weave-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-weave" data-pulsar="hero-paths-weave" 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-weave</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-weave-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-weave-fade-accent" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-paths-weave-accent-stop" offset="0" stop-opacity="0"></stop><stop class="hero-paths-weave-accent-stop" offset=".38" stop-opacity=".12"></stop><stop class="hero-paths-weave-accent-stop" offset=".72" stop-opacity=".7"></stop><stop class="hero-paths-weave-accent-stop" offset="1"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-paths-weave-ground"></rect><g class="hero-paths-weave-band hero-paths-weave-band-1"><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".25" stroke-width=".8" d="M-180-60C420 60 1180-700 1780-580" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".35" stroke-width="1.2" d="M-180 300.3c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".44" stroke-width="1.6" d="M-180 495.7c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".54" stroke-width="1.9" d="M-180 896.8c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".63" stroke-width="2.3" d="M-180 1206.3c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".31" d="M-180-150.9c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".4" stroke-width="1.4" d="M-180 67C420-53 1180 707 1780 587" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade-accent)" stroke-opacity=".8" stroke-width="2.2" d="M-180 376.6c600-120 1360 640 1960 520" class="hero-paths-weave-stroke hero-paths-weave-accent"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".59" stroke-width="2.2" d="M-180 777.7c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path></g><g class="hero-paths-weave-band hero-paths-weave-band-2"><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".27" stroke-width=".9" d="M-180 30.1c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".36" stroke-width="1.3" d="M-180 339.6c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade-accent)" stroke-opacity=".8" stroke-width="2" d="M-180 557.6c600 120 1360-640 1960-520" class="hero-paths-weave-stroke hero-paths-weave-accent"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".55" stroke-width="2" d="M-180 981.3c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".65" stroke-width="2.4" d="M-180 1240c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".33" stroke-width="1.1" d="M-180-89c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".42" stroke-width="1.5" d="M-180 106.3c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".52" stroke-width="1.9" d="M-180 466.7c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".61" stroke-width="2.2" d="M-180 827c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path></g><g class="hero-paths-weave-band hero-paths-weave-band-3"><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".29" d="M-180 114.6c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".38" stroke-width="1.3" d="M-180 373.3c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".48" stroke-width="1.7" d="M-180 632C420 752 1180-8 1780 112" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".57" stroke-width="2.1" d="M-180 1055.8c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".25" stroke-width=".8" d="M-180-400c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade-accent)" stroke-opacity=".8" stroke-width="1.5" d="M-180-39.7c600-120 1360 640 1960 520" class="hero-paths-weave-stroke hero-paths-weave-accent"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".44" stroke-width="1.6" d="M-180 155.7c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".54" stroke-width="1.9" d="M-180 556.8c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".63" stroke-width="2.3" d="M-180 866.3c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path></g><g class="hero-paths-weave-band hero-paths-weave-band-4"><path stroke="url(#hero-paths-weave-fade-accent)" stroke-opacity=".8" stroke-width="1.3" d="M-180 189.1c600 120 1360-640 1960-520" class="hero-paths-weave-stroke hero-paths-weave-accent"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".4" stroke-width="1.4" d="M-180 407c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".5" stroke-width="1.8" d="M-180 716.6c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".59" stroke-width="2.2" d="M-180 1117.7c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".27" stroke-width=".9" d="M-180-309.9c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".36" stroke-width="1.3" d="M-180-.4c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".46" stroke-width="1.6" d="M-180 217.6c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".55" stroke-width="2" d="M-180 641.3c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade-accent)" stroke-opacity=".8" stroke-width="3" d="M-180 900c600-120 1360 640 1960 520" class="hero-paths-weave-stroke hero-paths-weave-accent"></path></g><g class="hero-paths-weave-band hero-paths-weave-band-5"><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".33" stroke-width="1.1" d="M-180 251c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".42" stroke-width="1.5" d="M-180 446.3c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".52" stroke-width="1.9" d="M-180 806.7c600 120 1360-640 1960-520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade-accent)" stroke-opacity=".8" stroke-width="2.8" d="M-180 1167c600 120 1360-640 1960-520" class="hero-paths-weave-stroke hero-paths-weave-accent"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".29" d="M-180-225.4c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".38" stroke-width="1.3" d="M-180 33.3c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".48" stroke-width="1.7" d="M-180 292c600-120 1360 640 1960 520" class="hero-paths-weave-stroke"></path><path stroke="url(#hero-paths-weave-fade)" stroke-opacity=".57" stroke-width="2.1" d="M-180 715.8c600-120 1360 640 1960 520" class="hero-paths-weave-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-weave/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-weave {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-paths-weave .hero-paths-weave-ground {
  fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-paths-weave .hero-paths-weave-stroke {
  fill: none;
  stroke-linecap: round;
}
.pulsar-hero-paths-weave .hero-paths-weave-accent-stop {
  stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-weave .hero-paths-weave-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-weave .hero-paths-weave-band-1 {
  animation-name: hero-paths-weave-band-1;
  animation-duration: calc(11s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-weave .hero-paths-weave-band-2 {
  animation-name: hero-paths-weave-band-2;
  animation-duration: calc(14s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-weave .hero-paths-weave-band-3 {
  animation-name: hero-paths-weave-band-3;
  animation-duration: calc(16s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-weave .hero-paths-weave-band-4 {
  animation-name: hero-paths-weave-band-4;
  animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-weave .hero-paths-weave-band-5 {
  animation-name: hero-paths-weave-band-5;
  animation-duration: calc(22s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-weave-band-1 {
  from {
    transform: translate(-36px, 24px) skewY(-1.5deg);
  }
  to {
    transform: translate(36px, -24px) skewY(1.5deg);
  }
}
@keyframes hero-paths-weave-band-2 {
  from {
    transform: translate(36px, -24px) skewY(1.5deg);
  }
  to {
    transform: translate(-36px, 24px) skewY(-1.5deg);
  }
}
@keyframes hero-paths-weave-band-3 {
  from {
    transform: translate(-36px, 24px) skewY(-1.5deg);
  }
  to {
    transform: translate(36px, -24px) skewY(1.5deg);
  }
}
@keyframes hero-paths-weave-band-4 {
  from {
    transform: translate(36px, -24px) skewY(1.5deg);
  }
  to {
    transform: translate(-36px, 24px) skewY(-1.5deg);
  }
}
@keyframes hero-paths-weave-band-5 {
  from {
    transform: translate(-36px, 24px) skewY(-1.5deg);
  }
  to {
    transform: translate(36px, -24px) skewY(1.5deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-paths-weave .hero-paths-weave-band-1,
  .pulsar-hero-paths-weave .hero-paths-weave-band-2,
  .pulsar-hero-paths-weave .hero-paths-weave-band-3,
  .pulsar-hero-paths-weave .hero-paths-weave-band-4,
  .pulsar-hero-paths-weave .hero-paths-weave-band-5 {
    animation: none;
  }
}

More in this series10 in paths

All heroes