Pulsar
1×

Vault

Sparse

The floor turned over: a ceiling of lines converging above the copy, sparse, with one light at the far end.

“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
19 s, mirrored, loops
Canvas
1600 by 900, crops to fill
Default tone
Light ground: ground #f7f7fb, ink #1d1b3a
Series
lattice
Tags
gridperspective

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

The code

As a section

<!-- Pulsar by Business Nebula · "hero-lattice-vault" · https://pulsaricons.com | Licence: https://pulsaricons.com/legal/licence | Free-licence credit: Animation by Pulsar, linked to https://pulsaricons.com | 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;
}
.hero-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
}
/* Generated by scripts/hero-lattice.mjs from heroes/hero-lattice-vault/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #f7f7fb)
     --pulsar-hero-ink    the grid            (default #1d1b3a)
     --pulsar-accent      the glows and nodes (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-lattice-vault {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-lattice-vault .hero-lattice-vault-ground {
  fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-lattice-vault .hero-lattice-vault-accent-stop {
  stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-lattice-vault .hero-lattice-vault-ground-stop {
  stop-color: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-lattice-vault .hero-lattice-vault-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-lattice-vault .hero-lattice-vault-glow-1 {
  transform-origin: 900px 560px;
  animation-name: hero-lattice-vault-glow-1;
  animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-lattice-vault-glow-1 {
  from {
    transform: translate(-40px, -6px) scale(0.92);
  }
  to {
    transform: translate(40px, 6px) scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-lattice-vault .hero-lattice-vault-glow-1 {
    animation: none;
  }
}
</style>
<section class="hero">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pulsar pulsar-hero pulsar-hero-lattice-vault" data-pulsar="hero-lattice-vault" preserveAspectRatio="xMidYMid slice" 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-lattice-vault</dc:title><dc:creator>Pulsar by Business Nebula</dc:creator><dc:publisher>Business Nebula</dc:publisher><dc:source>https://pulsaricons.com/icons</dc:source><dc:relation>https://businessnebula.com.au</dc:relation><dc:rights>Pulsar licence, https://pulsaricons.com/legal/licence</dc:rights></rdf:Description></rdf:RDF></metadata><defs><radialGradient id="hero-lattice-vault-glow-1"><stop class="hero-lattice-vault-accent-stop" offset="0" stop-opacity=".45"></stop><stop class="hero-lattice-vault-accent-stop" offset=".5" stop-opacity=".19"></stop><stop class="hero-lattice-vault-accent-stop" offset="1" stop-opacity="0"></stop></radialGradient><linearGradient id="hero-lattice-vault-veil" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-lattice-vault-ground-stop" offset="0" stop-opacity=".92"></stop><stop class="hero-lattice-vault-ground-stop" offset=".3" stop-opacity=".6"></stop><stop class="hero-lattice-vault-ground-stop" offset=".62" stop-opacity=".15"></stop><stop class="hero-lattice-vault-ground-stop" offset="1" stop-opacity="0"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-lattice-vault-ground"></rect><g class="hero-lattice-vault-band hero-lattice-vault-glow hero-lattice-vault-glow-1"><ellipse cx="900" cy="560" fill="url(#hero-lattice-vault-glow-1)" rx="600" ry="150"></ellipse></g><g class="hero-lattice-vault-field" opacity=".3"><path fill="none" stroke="currentColor" d="M900 560-380 0M900 560-263.6 0M900 560-147.3 0M900 560-30.9 0M900 560 85.5 0M900 560 201.8 0M900 560 318.2 0M900 560 434.5 0M900 560 550.9 0M900 560 667.3 0M900 560 783.6 0M900 560V0m0 560L1016.4 0M900 560 1132.7 0M900 560 1249.1 0M900 560 1365.5 0M900 560 1481.8 0M900 560 1598.2 0M900 560 1714.5 0M900 560 1830.9 0M900 560 1947.3 0M900 560 2063.6 0M900 560 2180 0" class="hero-lattice-vault-grid"></path><path fill="none" stroke="currentColor" d="M0 554.2h1600M0 533.5h1600M0 495.3h1600M0 438.1h1600M0 360.9h1600M0 262.6h1600M0 142.5h1600M0 0h1600" class="hero-lattice-vault-grid"></path></g><rect width="1600" height="900" fill="url(#hero-lattice-vault-veil)" class="hero-lattice-vault-veil"></rect></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-lattice.mjs from heroes/hero-lattice-vault/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #f7f7fb)
     --pulsar-hero-ink    the grid            (default #1d1b3a)
     --pulsar-accent      the glows and nodes (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-lattice-vault {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-lattice-vault .hero-lattice-vault-ground {
  fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-lattice-vault .hero-lattice-vault-accent-stop {
  stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-lattice-vault .hero-lattice-vault-ground-stop {
  stop-color: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-lattice-vault .hero-lattice-vault-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-lattice-vault .hero-lattice-vault-glow-1 {
  transform-origin: 900px 560px;
  animation-name: hero-lattice-vault-glow-1;
  animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-lattice-vault-glow-1 {
  from {
    transform: translate(-40px, -6px) scale(0.92);
  }
  to {
    transform: translate(40px, 6px) scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-lattice-vault .hero-lattice-vault-glow-1 {
    animation: none;
  }
}

More in this series10 in lattice

All heroes