Hex

Medium

A honeycomb of thin hexagons with an accent light and an ink shadow moving under it.

“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: 21 s, mirrored, loops
Canvas: 1600 by 900, crops to fill
Default tone: Dark ground: ground #0b0a16, ink #ffffff
Series: lattice
Tags: grid hex glow

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

The code

As a section

<!-- Pulsar by Business Nebula · "hero-lattice-hex" · 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: #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;
}
.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-hex/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #0b0a16)
     --pulsar-hero-ink    the grid            (default #ffffff)
     --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-hex {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-lattice-hex .hero-lattice-hex-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-lattice-hex .hero-lattice-hex-accent-stop {
  stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-lattice-hex .hero-lattice-hex-ground-stop {
  stop-color: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-lattice-hex .hero-lattice-hex-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-lattice-hex .hero-lattice-hex-glow-1 {
  transform-origin: 1250px 420px;
  animation-name: hero-lattice-hex-glow-1;
  animation-duration: calc(21s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-lattice-hex .hero-lattice-hex-glow-2 {
  transform-origin: 1550px 850px;
  animation-name: hero-lattice-hex-glow-2;
  animation-duration: calc(15s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-lattice-hex-glow-1 {
  from {
    transform: translate(-80px, -30px) scale(0.94);
  }
  to {
    transform: translate(80px, 30px) scale(1.06);
  }
}
@keyframes hero-lattice-hex-glow-2 {
  from {
    transform: translate(80px, 30px) scale(0.94);
  }
  to {
    transform: translate(-80px, -30px) scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-lattice-hex .hero-lattice-hex-glow-1,
  .pulsar-hero-lattice-hex .hero-lattice-hex-glow-2 {
    animation: none;
  }
}
</style>
<section class="hero">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pulsar pulsar-hero pulsar-hero-lattice-hex" data-pulsar="hero-lattice-hex" 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-hex</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-hex-glow-1"><stop class="hero-lattice-hex-accent-stop" offset="0" stop-opacity=".5"></stop><stop class="hero-lattice-hex-accent-stop" offset=".5" stop-opacity=".21"></stop><stop class="hero-lattice-hex-accent-stop" offset="1" stop-opacity="0"></stop></radialGradient><radialGradient id="hero-lattice-hex-glow-2"><stop offset="0" stop-color="currentColor" stop-opacity=".15"></stop><stop offset=".5" stop-color="currentColor" stop-opacity=".06"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></radialGradient><linearGradient id="hero-lattice-hex-veil" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-lattice-hex-ground-stop" offset="0" stop-opacity=".92"></stop><stop class="hero-lattice-hex-ground-stop" offset=".3" stop-opacity=".6"></stop><stop class="hero-lattice-hex-ground-stop" offset=".62" stop-opacity=".15"></stop><stop class="hero-lattice-hex-ground-stop" offset="1" stop-opacity="0"></stop></linearGradient><pattern id="hero-lattice-hex-tile" width="108" height="62.4" patternUnits="userSpaceOnUse"><path fill="none" stroke="currentColor" stroke-linejoin="round" d="M72 31.2 54 62.4H18L0 31.2 18 0h36ZM126 0l-18 31.2H72L54 0l18-31.2h36Zm0 62.4-18 31.1H72L54 62.4l18-31.2h36Z"></path></pattern></defs><rect width="1600" height="900" class="hero-lattice-hex-ground"></rect><g class="hero-lattice-hex-band hero-lattice-hex-glow hero-lattice-hex-glow-1"><ellipse cx="1250" cy="420" fill="url(#hero-lattice-hex-glow-1)" rx="500" ry="400"></ellipse></g><g class="hero-lattice-hex-band hero-lattice-hex-glow hero-lattice-hex-glow-2"><ellipse cx="1550" cy="850" fill="url(#hero-lattice-hex-glow-2)" rx="420" ry="300"></ellipse></g><rect width="1600" height="900" fill="url(#hero-lattice-hex-tile)" class="hero-lattice-hex-field" opacity=".3"></rect><rect width="1600" height="900" fill="url(#hero-lattice-hex-veil)" class="hero-lattice-hex-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-hex/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #0b0a16)
     --pulsar-hero-ink    the grid            (default #ffffff)
     --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-hex {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-lattice-hex .hero-lattice-hex-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-lattice-hex .hero-lattice-hex-accent-stop {
  stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-lattice-hex .hero-lattice-hex-ground-stop {
  stop-color: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-lattice-hex .hero-lattice-hex-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-lattice-hex .hero-lattice-hex-glow-1 {
  transform-origin: 1250px 420px;
  animation-name: hero-lattice-hex-glow-1;
  animation-duration: calc(21s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-lattice-hex .hero-lattice-hex-glow-2 {
  transform-origin: 1550px 850px;
  animation-name: hero-lattice-hex-glow-2;
  animation-duration: calc(15s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-lattice-hex-glow-1 {
  from {
    transform: translate(-80px, -30px) scale(0.94);
  }
  to {
    transform: translate(80px, 30px) scale(1.06);
  }
}
@keyframes hero-lattice-hex-glow-2 {
  from {
    transform: translate(80px, 30px) scale(0.94);
  }
  to {
    transform: translate(-80px, -30px) scale(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-lattice-hex .hero-lattice-hex-glow-1,
  .pulsar-hero-lattice-hex .hero-lattice-hex-glow-2 {
    animation: none;
  }
}

More in this series10 in lattice

All heroes

The platform your operations team already trusts.

The platform your operations team already trusts.

The platform your operations team already trusts.

Hex

The four variables

Files

The code

As a section

animation.css

More in this series10 in lattice

The platform your operations team already trusts.

Cross

The platform your operations team already trusts.

Diamond

The platform your operations team already trusts.

Field

The platform your operations team already trusts.

Floor

The platform your operations team already trusts.

Graph

The platform your operations team already trusts.

Halo

The platform your operations team already trusts.

Rule

The platform your operations team already trusts.

Slant

The platform your operations team already trusts.

Vault