Scatter

Busy

Four loose groups of points across the right, joined where they fall close, each group turning on its own period.

“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: 29 s, mirrored, loops
Canvas: 1600 by 900, crops to fill
Default tone: Dark ground: ground #0b0a16, ink #ffffff
Family: Constellation · Points
Tags: points clusters network

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-constellation-scatter" · 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-constellation.mjs from heroes/hero-constellation-scatter/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #0b0a16)
     --pulsar-hero-ink    the dots and links  (default #ffffff)
     --pulsar-accent      the pulsing dots    (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-constellation-scatter {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-constellation-scatter circle {
  fill: currentColor;
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-link {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-stars circle {
  fill: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-ground-stop {
  stop-color: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-band-1 {
  transform-origin: 1150px 300px;
  animation-name: hero-constellation-scatter-band-1;
  animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-band-2 {
  transform-origin: 1420px 640px;
  animation-name: hero-constellation-scatter-band-2;
  animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-band-3 {
  transform-origin: 860px 620px;
  animation-name: hero-constellation-scatter-band-3;
  animation-duration: calc(17s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-band-4 {
  transform-origin: 1520px 220px;
  animation-name: hero-constellation-scatter-band-4;
  animation-duration: calc(29s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-stars {
  animation-name: hero-constellation-scatter-stars;
  animation-duration: calc(9s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-constellation-scatter-band-1 {
  from {
    transform: translate(-26px, -16px) rotate(-1.5deg);
  }
  to {
    transform: translate(26px, 16px) rotate(1.5deg);
  }
}
@keyframes hero-constellation-scatter-band-2 {
  from {
    transform: translate(26px, 16px) rotate(1.5deg);
  }
  to {
    transform: translate(-26px, -16px) rotate(-1.5deg);
  }
}
@keyframes hero-constellation-scatter-band-3 {
  from {
    transform: translate(-26px, -16px) rotate(-1.5deg);
  }
  to {
    transform: translate(26px, 16px) rotate(1.5deg);
  }
}
@keyframes hero-constellation-scatter-band-4 {
  from {
    transform: translate(26px, 16px) rotate(1.5deg);
  }
  to {
    transform: translate(-26px, -16px) rotate(-1.5deg);
  }
}
@keyframes hero-constellation-scatter-stars {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-constellation-scatter .hero-constellation-scatter-band-1,
  .pulsar-hero-constellation-scatter .hero-constellation-scatter-band-2,
  .pulsar-hero-constellation-scatter .hero-constellation-scatter-band-3,
  .pulsar-hero-constellation-scatter .hero-constellation-scatter-band-4,
  .pulsar-hero-constellation-scatter .hero-constellation-scatter-stars {
    animation: none;
  }
}
</style>
<section class="hero">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pulsar pulsar-hero pulsar-hero-constellation-scatter" data-pulsar="hero-constellation-scatter" 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-constellation-scatter</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><linearGradient id="hero-constellation-scatter-veil" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-constellation-scatter-ground-stop" offset="0" stop-opacity=".9"></stop><stop class="hero-constellation-scatter-ground-stop" offset=".3" stop-opacity=".55"></stop><stop class="hero-constellation-scatter-ground-stop" offset=".64" stop-opacity=".12"></stop><stop class="hero-constellation-scatter-ground-stop" offset="1" stop-opacity="0"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-constellation-scatter-ground"></rect><g class="hero-constellation-scatter-band hero-constellation-scatter-band-1"><path stroke-opacity=".18" d="m975.7 291 30.9-73.1M975.7 291l2.1 76.1m-2.1-76.1 97.4 4.2m-97.4-4.2 87.7-93.3m-56.8 20.2 103.3 20.1m-103.3-20.1 66.5 77.3m-66.5-77.3 56.8-20.2m190.8 1.8-117.7-67.3m117.7 67.3-52.9 47.4m52.9-47.4 52.1 89.6m-52.1-89.6 71.7-10.2m-22.7 170.4-98.4 20.8m98.4-20.8 3.1-70.6m-3.1 70.6 71.7-51.1m-397.1 58.5 94.1 55.2m-94.1-55.2 95.3-71.9m36.8-57.2 39.5 102.3M1109.9 238l26.6-105.8M1109.9 238l91.4 8.9m-91.4-8.9-36.8 57.2m36.8-57.2-46.5-40.3m141.4 182.8-132.9 41.8m132.9-41.8-55.4-40.2m55.4 40.2-3.5-133.6m3.5 133.6 101.5-91.4m-234.4 133.2 77.5-82m-77.5 82 1.2-127.1m76.3 45.1 51.9-93.4m-51.9 93.4-76.3-45.1m63.4-163 64.8 114.7m-64.8-114.7-73.1 65.5m137.9 49.2 105 42.2m-105-42.2-128.2 48.3m128.2-48.3 124.6-57.6m-19.6 99.8 68.6 19.5m-68.6-19.5 19.6-99.8m49 119.3-49-119.3m-252.8 105.9-9.7-97.5" class="hero-constellation-scatter-link"></path><circle cx="975.7" cy="291" r="1.6" fill-opacity=".35"></circle><circle cx="1006.6" cy="217.9" r="1.72" fill-opacity=".38"></circle><circle cx="1303.2" cy="359.7" r="1.96" fill-opacity=".45"></circle><circle cx="977.8" cy="367.1" r="2.08" fill-opacity=".48"></circle><circle cx="1109.9" cy="238" r="2.2" fill-opacity=".52"></circle><circle cx="1204.8" cy="380.5" r="2.32" fill-opacity=".55"></circle><circle cx="1071.9" cy="422.3" r="2.44" fill-opacity=".58"></circle><circle cx="1149.4" cy="340.3" r="2.56" fill-opacity=".62"></circle><circle cx="1201.3" cy="246.9" r="2.8" fill-opacity=".68"></circle><circle cx="1306.3" cy="289.1" r="2.92" fill-opacity=".72"></circle><circle cx="1374.9" cy="308.6" r="3.04" fill-opacity=".75"></circle><circle cx="1073.1" cy="295.2" r="3.16" fill-opacity=".78"></circle><circle cx="1325.9" cy="189.3" r="3.28" fill-opacity=".82"></circle><circle cx="1063.4" cy="197.7" r="3.4" fill-opacity=".85"></circle></g><g class="hero-constellation-scatter-band hero-constellation-scatter-band-2"><path stroke-opacity=".18" d="m1463.7 663-85.2 43.2m85.2-43.2 126.4 58.9M1463.7 663l29.5-116m-29.5 116-46.3-60.6m46.3 60.6 48.2-29.7m-48.2 29.7 20.7 108.9M1463.7 663l121.3-69.6m-239.6-18.7 33.1 131.5m-33.1-131.5-120.1 53.5m120.1-53.5 72 27.7m-72-27.7-80.1 103.5m80.1-103.5-35.2-49m68.3 180.5 38.9-103.8m-38.9 103.8-113.2-28m113.2 28 105.9 65.7m-105.9-65.7-57 16.3m57-16.3-37.7 72.4m-115.5-150.4 40 50m-40-50 96.2 94.3m-96.2-94.3 84.9-102.5m279.9 196.2-78.2-88.6m78.2 88.6-105.7 50m105.7-50-5.1-128.5m-91.8-46.4-75.8 55.4m75.8-55.4 18.7 86.3m-18.7-86.3 91.8 46.4m-167.6 9 94.5 30.9m-94.5-30.9-107.2-76.7m-44.9 152.5 56.2 44.3m-56.2-44.3 75.5 100.4m171.1-145.3 73.1-39.9m-263.5 129.1 19.3 56.1" class="hero-constellation-scatter-link"></path><circle cx="1345.4" cy="574.7" r="1.74" fill-opacity=".39"></circle><circle cx="1378.5" cy="706.2" r="1.88" fill-opacity=".43"></circle><circle cx="1225.3" cy="628.2" r="2.02" fill-opacity=".47"></circle><circle cx="1590.1" cy="721.9" r="2.15" fill-opacity=".5"></circle><circle cx="1493.2" cy="547" r="2.29" fill-opacity=".54"></circle><circle cx="1417.4" cy="602.4" r="2.43" fill-opacity=".58"></circle><circle cx="1511.9" cy="633.3" r="2.71" fill-opacity=".66"></circle><circle cx="1484.4" cy="771.9" r="2.85" fill-opacity=".7"></circle><circle cx="1321.5" cy="722.5" r="2.98" fill-opacity=".73"></circle><circle cx="1585" cy="593.4" r="3.12" fill-opacity=".77"></circle><circle cx="1310.2" cy="525.7" r="3.26" fill-opacity=".81"></circle><circle cx="1340.8" cy="778.6" r="3.4" fill-opacity=".85"></circle></g><g class="hero-constellation-scatter-band hero-constellation-scatter-band-3"><path stroke-opacity=".18" d="m681.2 605.7 97.4-61.3m-97.4 61.3 48.8-58.9m-48.8 58.9 43.6 31.6m-43.6-31.6 95.8 92.4m235.7-58.3-108.4 81.9m108.4-81.9-1.5-78.6m1.5 78.6L943.3 604m69.4 35.8-56.6 41.1m-51.8 40.8 39-117.7m-39 117.7 51.8-40.8m-51.8 40.8-97.5 12.6m97.5-12.6L777 698.1m1.6-153.7-48.6 2.4m48.6-2.4-53.8 92.9m5.2-90.5-5.2 90.5m286.4-76.1L943.3 604m67.9-42.8-55.1 119.7M943.3 604l12.8 76.9m-149.3 53.4-82-97m82 97L777 698.1m-52.2-60.8 52.2 60.8" class="hero-constellation-scatter-link"></path><circle cx="1012.7" cy="639.8" r="1.78" fill-opacity=".4"></circle><circle cx="904.3" cy="721.7" r="1.96" fill-opacity=".45"></circle><circle cx="778.6" cy="544.4" r="2.14" fill-opacity=".5"></circle><circle cx="730" cy="546.8" r="2.32" fill-opacity=".55"></circle><circle cx="1011.2" cy="561.2" r="2.5" fill-opacity=".6"></circle><circle cx="943.3" cy="604" r="2.68" fill-opacity=".65"></circle><circle cx="806.8" cy="734.3" r="3.04" fill-opacity=".75"></circle><circle cx="724.8" cy="637.3" r="3.22" fill-opacity=".8"></circle><circle cx="777" cy="698.1" r="3.4" fill-opacity=".85"></circle></g><g class="hero-constellation-scatter-band hero-constellation-scatter-band-4"><path stroke-opacity=".18" d="m1544.4 245.8-62.4-7.3m62.4 7.3-32 37.3m32-37.3L1437 233.3m107.4 12.5 104.4-82.9m-104.4 82.9-83.9 83m83.9-83-48.5-55.2m48.5 55.2 38.3-90.3m-38.3 90.3 90.6 37.6m-153-44.9 30.4 44.6m-30.4-44.6-45-5.2m45 5.2-21.5 90.3m21.5-90.3 13.9-47.9m-13.9 47.9 100.7-83m-70.3 127.6-75.4-49.8m75.4 49.8-51.9 45.7m51.9-45.7-16.5-92.5m16.5 92.5 70.3-127.6m-70.3 127.6 122.6.3m-198-50.1 23.5 95.5m-23.5-95.5 58.9-42.7m152.9-27.7-66.1-7.4m66.1 7.4L1635 283.4m-174.5 45.4 35.4-138.2m0 0 86.8-35.1m0 0 52.3 127.9" class="hero-constellation-scatter-link"></path><circle cx="1544.4" cy="245.8" r="1.6" fill-opacity=".35"></circle><circle cx="1482" cy="238.5" r="1.83" fill-opacity=".41"></circle><circle cx="1512.4" cy="283.1" r="2.05" fill-opacity=".48"></circle><circle cx="1648.8" cy="162.9" r="2.5" fill-opacity=".6"></circle><circle cx="1460.5" cy="328.8" r="2.73" fill-opacity=".66"></circle><circle cx="1495.9" cy="190.6" r="2.95" fill-opacity=".73"></circle><circle cx="1582.7" cy="155.5" r="3.18" fill-opacity=".79"></circle><circle cx="1635" cy="283.4" r="3.4" fill-opacity=".85"></circle></g><g class="hero-constellation-scatter-band hero-constellation-scatter-stars"><circle cx="1254.2" cy="199.5" r="2.58"></circle><circle cx="1136.5" cy="132.2" r="3.75"></circle><circle cx="1463.7" cy="663" r="2.24"></circle><circle cx="1265.3" cy="678.2" r="3.6"></circle><circle cx="681.2" cy="605.7" r="2.24"></circle><circle cx="956.1" cy="680.9" r="4"></circle><circle cx="1437" cy="233.3" r="3.18"></circle></g><rect width="1600" height="900" fill="url(#hero-constellation-scatter-veil)" class="hero-constellation-scatter-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-constellation.mjs from heroes/hero-constellation-scatter/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #0b0a16)
     --pulsar-hero-ink    the dots and links  (default #ffffff)
     --pulsar-accent      the pulsing dots    (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-constellation-scatter {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-constellation-scatter circle {
  fill: currentColor;
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-link {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-stars circle {
  fill: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-ground-stop {
  stop-color: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-band-1 {
  transform-origin: 1150px 300px;
  animation-name: hero-constellation-scatter-band-1;
  animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-band-2 {
  transform-origin: 1420px 640px;
  animation-name: hero-constellation-scatter-band-2;
  animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-band-3 {
  transform-origin: 860px 620px;
  animation-name: hero-constellation-scatter-band-3;
  animation-duration: calc(17s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-band-4 {
  transform-origin: 1520px 220px;
  animation-name: hero-constellation-scatter-band-4;
  animation-duration: calc(29s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-constellation-scatter .hero-constellation-scatter-stars {
  animation-name: hero-constellation-scatter-stars;
  animation-duration: calc(9s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-constellation-scatter-band-1 {
  from {
    transform: translate(-26px, -16px) rotate(-1.5deg);
  }
  to {
    transform: translate(26px, 16px) rotate(1.5deg);
  }
}
@keyframes hero-constellation-scatter-band-2 {
  from {
    transform: translate(26px, 16px) rotate(1.5deg);
  }
  to {
    transform: translate(-26px, -16px) rotate(-1.5deg);
  }
}
@keyframes hero-constellation-scatter-band-3 {
  from {
    transform: translate(-26px, -16px) rotate(-1.5deg);
  }
  to {
    transform: translate(26px, 16px) rotate(1.5deg);
  }
}
@keyframes hero-constellation-scatter-band-4 {
  from {
    transform: translate(26px, 16px) rotate(1.5deg);
  }
  to {
    transform: translate(-26px, -16px) rotate(-1.5deg);
  }
}
@keyframes hero-constellation-scatter-stars {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-constellation-scatter .hero-constellation-scatter-band-1,
  .pulsar-hero-constellation-scatter .hero-constellation-scatter-band-2,
  .pulsar-hero-constellation-scatter .hero-constellation-scatter-band-3,
  .pulsar-hero-constellation-scatter .hero-constellation-scatter-band-4,
  .pulsar-hero-constellation-scatter .hero-constellation-scatter-stars {
    animation: none;
  }
}

More in this family10 in Constellation

All heroes

The platform your operations team already trusts.

The platform your operations team already trusts.

The platform your operations team already trusts.

Scatter

The four variables

Files

The code

As a section

animation.css

More in this family10 in Constellation

The platform your operations team already trusts.

Cluster

The platform your operations team already trusts.

Crown

The platform your operations team already trusts.

Dust

The platform your operations team already trusts.

Mesh

The platform your operations team already trusts.

Pair

The platform your operations team already trusts.

Spark

The platform your operations team already trusts.

Swarm

The platform your operations team already trusts.

Trace

The platform your operations team already trusts.

Verge