Pulsar
1×

Swarm

Busy

Three dense groups with links running through all of them, the busiest field in the family.

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

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

The code

As a section

<!-- Pulsar by Business Nebula · "hero-constellation-swarm" · 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-swarm/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-swarm {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-constellation-swarm circle {
  fill: currentColor;
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-link {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-stars circle {
  fill: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-ground-stop {
  stop-color: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-band-1 {
  transform-origin: 1180px 420px;
  animation-name: hero-constellation-swarm-band-1;
  animation-duration: calc(17s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-band-2 {
  transform-origin: 1480px 740px;
  animation-name: hero-constellation-swarm-band-2;
  animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-band-3 {
  transform-origin: 820px 700px;
  animation-name: hero-constellation-swarm-band-3;
  animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-stars {
  animation-name: hero-constellation-swarm-stars;
  animation-duration: calc(9s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-constellation-swarm-band-1 {
  from {
    transform: translate(-26px, -16px) rotate(-1.5deg);
  }
  to {
    transform: translate(26px, 16px) rotate(1.5deg);
  }
}
@keyframes hero-constellation-swarm-band-2 {
  from {
    transform: translate(26px, 16px) rotate(1.5deg);
  }
  to {
    transform: translate(-26px, -16px) rotate(-1.5deg);
  }
}
@keyframes hero-constellation-swarm-band-3 {
  from {
    transform: translate(-26px, -16px) rotate(-1.5deg);
  }
  to {
    transform: translate(26px, 16px) rotate(1.5deg);
  }
}
@keyframes hero-constellation-swarm-stars {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-constellation-swarm .hero-constellation-swarm-band-1,
  .pulsar-hero-constellation-swarm .hero-constellation-swarm-band-2,
  .pulsar-hero-constellation-swarm .hero-constellation-swarm-band-3,
  .pulsar-hero-constellation-swarm .hero-constellation-swarm-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-swarm" data-pulsar="hero-constellation-swarm" 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-swarm</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-swarm-veil" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-constellation-swarm-ground-stop" offset="0" stop-opacity=".9"></stop><stop class="hero-constellation-swarm-ground-stop" offset=".3" stop-opacity=".55"></stop><stop class="hero-constellation-swarm-ground-stop" offset=".64" stop-opacity=".12"></stop><stop class="hero-constellation-swarm-ground-stop" offset="1" stop-opacity="0"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-constellation-swarm-ground"></rect><g class="hero-constellation-swarm-band hero-constellation-swarm-band-1"><path stroke-opacity=".18" d="m1026.4 364.1-90.3-20.9m90.3 20.9 17.2-110.3m-17.2 110.3 70.9 96.5m-70.9-96.5-7.8 60.6m7.8-60.6L975.1 295m260.4 146.7 84.5 52.5m-84.5-52.5-84.8 69m84.8-69-24.2 114.9m24.2-114.9 29.2-57.9m-29.2 57.9 26.1 69.8m-26.1-69.8-40.5-99.9m40.5 99.9 76.9-14.1m7.6 66.6 21.5 54.6m-21.5-54.6-108.7 62.4m108.7-62.4 62.4-54.6m-62.4 54.6-55.3-110.4m55.3 110.4-21.7 101.1m21.7-101.1-58.4 17.3m58.4-17.3 116.4-29.9M1320 494.2l-7.6-66.6m-376.3-84.4 82.5 81.5m-82.5-81.5-33.8 62.6m33.8-62.6 39-48.2m68.5-41.2 50-40.7m-50 40.7L975.1 295m175.6 215.7-36.5 122.5m36.5-122.5 60.6 45.9m-60.6-45.9-53.4-50.1m53.4 50.1 110.9.8m79.9 37.3 40.9-109.2m-40.9 109.2-43.2 46.5m43.2-46.5-79.9-37.3m79.9 37.3 94.9-84.5m-94.9 84.5-29.1-121.2m-340.2 67 49.9 72.1m-49.9-72.1 125.1-34m-125.1 34 46.4-69.9m-46.4 69.9-69.9-88.8M1175.4 274l-81.8-60.9m81.8 60.9 19.6 67.8m-19.6-67.8 85.2 27.4m-85.2-27.4-11.1-78.5m-50.1 437.7-92.1-66.5m92.1 66.5 97.1-76.6m0 0 87 38.7m-87-38.7 50.3-45.1m120.8-71.9 20.2-110.6m-20.2 110.6 54 24.7m-54-24.7 64.1-55.1m-64.1 55.1-70-12m-215.1 33-78.7-35.9m246.1-40.9-3.1 127.7m3.1-127.7-69.7-42m69.7 42 47.7 43.8m-47.7-43.8-4.1-82.4m37.7 293.9-36.7-83.8m0 0 50.8-83.9m2.9-204.7 56.2 49.6m-56.2-49.6-54.7 78.5m-167-88.3 70.7-17.6m30.7 146.3 65.6-40.4m142 27.6-31.1-56.5m31.1 56.5 43.9 55.5m-427.9 40.2-116.3-18.9m469.2-133.3-110.9 28.9m175.8 162.9 10.1-79.8m-10.1 79.8-124-36.7" class="hero-constellation-swarm-link"></path><circle cx="1026.4" cy="364.1" r="1.4" fill-opacity=".35"></circle><circle cx="1235.5" cy="441.7" r="1.45" fill-opacity=".37"></circle><circle cx="936.1" cy="343.2" r="1.54" fill-opacity=".4"></circle><circle cx="1043.6" cy="253.8" r="1.59" fill-opacity=".42"></circle><circle cx="1150.7" cy="510.7" r="1.64" fill-opacity=".44"></circle><circle cx="1341.5" cy="548.8" r="1.69" fill-opacity=".45"></circle><circle cx="972.2" cy="494.6" r="1.74" fill-opacity=".47"></circle><circle cx="1175.4" cy="274" r="1.79" fill-opacity=".49"></circle><circle cx="1022.1" cy="566.7" r="1.88" fill-opacity=".52"></circle><circle cx="1211.3" cy="556.6" r="1.93" fill-opacity=".54"></circle><circle cx="1382.4" cy="439.6" r="1.98" fill-opacity=".56"></circle><circle cx="1097.3" cy="460.6" r="2.03" fill-opacity=".57"></circle><circle cx="1264.7" cy="383.8" r="2.08" fill-opacity=".59"></circle><circle cx="1298.3" cy="595.3" r="2.12" fill-opacity=".61"></circle><circle cx="1315.3" cy="222.9" r="2.22" fill-opacity=".64"></circle><circle cx="1093.6" cy="213.1" r="2.27" fill-opacity=".66"></circle><circle cx="1195" cy="341.8" r="2.32" fill-opacity=".68"></circle><circle cx="1402.6" cy="329" r="2.37" fill-opacity=".69"></circle><circle cx="1018.6" cy="424.7" r="2.41" fill-opacity=".71"></circle><circle cx="1371.5" cy="272.5" r="2.46" fill-opacity=".73"></circle><circle cx="902.3" cy="405.8" r="2.56" fill-opacity=".76"></circle><circle cx="1446.5" cy="384.5" r="2.61" fill-opacity=".78"></circle><circle cx="975.1" cy="295" r="2.66" fill-opacity=".8"></circle><circle cx="1312.4" cy="427.6" r="2.7" fill-opacity=".82"></circle><circle cx="1260.6" cy="301.4" r="2.75" fill-opacity=".83"></circle><circle cx="1164.3" cy="195.5" r="2.8" fill-opacity=".85"></circle></g><g class="hero-constellation-swarm-band hero-constellation-swarm-band-2"><path stroke-opacity=".18" d="m1500.9 803.9-63.5 14.3m63.5-14.3-30.1-73.6m30.1 73.6-21.7 71.9m21.7-71.9 38.9 88.8m-38.9-88.8 114.1 59.6m-114.1-59.6-85.9 86.5m85.9-86.5 40.1-73.1m-40.1 73.1-106.2-66m42.7 80.3 33.4-87.9m-33.4 87.9 41.8 57.6m-41.8-57.6L1334 760m103.4 58.2 102.4 74.5m-102.4-74.5-22.4 72.2m22.4-72.2-95.2 41.6m95.2-41.6-42.7-80.3m76.1-7.6 12.3-79.3m-12.3 79.3-77.7-57.6m77.7 57.6 70.2.5m-70.2-.5-76.1 7.6m-59-92.5 57.4 27.3m-57.4-27.3L1334 760m1.7-114.6-27.8 61m27.8-61 59 92.5m234.8-24 5.3 84.5m-5.3-84.5-10.2-73.4m10.2 73.4-72.5-82.6m72.5 82.6-88.5 16.9m88.5-16.9 63.8 61.6M1483.1 651l-90 21.7m90-21.7 73.9-19.7m-73.9 19.7-30.9-67.2m30.9 67.2 57.9 79.8m-57.9-79.8-88.4 86.9m240.1 60.5-19.8 65.1m19.8-65.1-93.8-67.6m93.8 67.6 58.5-22.9m-300.2-102.8L1334 760m59.1-87.3 59.1-88.9m-59.1 88.9-85.2 33.7m85.2-33.7 1.6 65.2m224.6-97.4-62.3-9.2m62.3 9.2-78.3 90.3m16-99.5-104.8-47.5m104.8 47.5-16 99.5m-61.8 145 60.6 16.9m-60.6-16.9-64.2 14.6M1334 760l8.2 99.8M1334 760l-26.1-53.6M1334 760l-45.6 45.7M1334 760l60.7-22.1m145.1 154.8 75.2-29.2m-75.2 29.2-124.8-2.3m200-26.9 78.3-88M1415 890.4l-72.8-30.6m0 0-53.8-54.1m19.5-99.3-19.5 99.3m19.5-99.3 86.8 31.5m-106.3 67.8 106.3-67.8" class="hero-constellation-swarm-link"></path><circle cx="1437.4" cy="818.2" r="1.47" fill-opacity=".37"></circle><circle cx="1470.8" cy="730.3" r="1.53" fill-opacity=".4"></circle><circle cx="1335.7" cy="645.4" r="1.6" fill-opacity=".42"></circle><circle cx="1629.5" cy="713.9" r="1.67" fill-opacity=".45"></circle><circle cx="1483.1" cy="651" r="1.73" fill-opacity=".47"></circle><circle cx="1634.8" cy="798.4" r="1.8" fill-opacity=".49"></circle><circle cx="1619.3" cy="640.5" r="1.93" fill-opacity=".54"></circle><circle cx="1557" cy="631.3" r="2" fill-opacity=".56"></circle><circle cx="1479.2" cy="875.8" r="2.07" fill-opacity=".59"></circle><circle cx="1334" cy="760" r="2.13" fill-opacity=".61"></circle><circle cx="1539.8" cy="892.7" r="2.2" fill-opacity=".64"></circle><circle cx="1615" cy="863.5" r="2.27" fill-opacity=".66"></circle><circle cx="1342.2" cy="859.8" r="2.4" fill-opacity=".71"></circle><circle cx="1452.2" cy="583.8" r="2.47" fill-opacity=".73"></circle><circle cx="1307.9" cy="706.4" r="2.53" fill-opacity=".75"></circle><circle cx="1288.4" cy="805.7" r="2.6" fill-opacity=".78"></circle><circle cx="1541" cy="730.8" r="2.67" fill-opacity=".8"></circle><circle cx="1394.7" cy="737.9" r="2.73" fill-opacity=".83"></circle></g><g class="hero-constellation-swarm-band hero-constellation-swarm-band-3"><path stroke-opacity=".18" d="M904.6 613.8 824 630.2m80.6-16.4 75.7 8.3m-75.7-8.3 31.5 65.9m-31.5-65.9-60.5-39m-121.8 42.7 21 120.9m-21-120.9L680 713.6m42.3-96.1L824 630.2m-101.7-12.7 17.9 61.3m-17.9-61.3-62.9-2.2m62.9 2.2 54.6-31.8m-54.6 31.8 121.8-42.7m-121.8 42.7-98 55m353.3 72.2-76.8 39.5m76.8-39.5 2.7-122.6m-2.7 122.6-41.5-65M713.6 823.1l29.7-84.7m-29.7 84.7 92.7 3.2m-92.7-3.2L680 713.6m33.6 109.5-51.6-43m81.3-41.7 63 87.9m-63-87.9 63.9-11m-63.9 11L680 713.6m63.3 24.8-3.1-59.6m3.1 59.6L662 780.1m144.3 46.2 94.5-42.1m-94.5 42.1.9-98.9m93.6 56.8-93.6-56.8m93.6 56.8 35.3-104.5m-128.9 47.7L680 713.6m127.2 13.8 16.8-97.2m-16.8 97.2-67-48.6M680 713.6l60.2-34.8M680 713.6l-20.6-98.3m20.6 98.3-18 66.5m18-66.5-55.7-41.1M824 630.2l-83.8 48.6m83.8-48.6 112.1 49.5M824 630.2l-47.1-44.5m47.1 44.5 20.1-55.4m-103.9 104-80.8-63.5m80.8 63.5 36.7-93.1m-36.7 93.1L662 780.1m78.2-101.3-115.9-6.3m356-50.4-44.2 57.6m-276.7-64.4 117.5-29.6m-117.5 29.6-35.1 57.2m152.6-86.8 67.2-10.9M662 780.1l-37.7-107.6" class="hero-constellation-swarm-link"></path><circle cx="904.6" cy="613.8" r="1.4" fill-opacity=".35"></circle><circle cx="722.3" cy="617.5" r="1.48" fill-opacity=".38"></circle><circle cx="977.6" cy="744.7" r="1.56" fill-opacity=".41"></circle><circle cx="713.6" cy="823.1" r="1.65" fill-opacity=".44"></circle><circle cx="743.3" cy="738.4" r="1.73" fill-opacity=".47"></circle><circle cx="806.3" cy="826.3" r="1.81" fill-opacity=".5"></circle><circle cx="807.2" cy="727.4" r="1.98" fill-opacity=".56"></circle><circle cx="680" cy="713.6" r="2.06" fill-opacity=".59"></circle><circle cx="824" cy="630.2" r="2.14" fill-opacity=".61"></circle><circle cx="740.2" cy="678.8" r="2.22" fill-opacity=".64"></circle><circle cx="980.3" cy="622.1" r="2.31" fill-opacity=".67"></circle><circle cx="659.4" cy="615.3" r="2.39" fill-opacity=".7"></circle><circle cx="776.9" cy="585.7" r="2.55" fill-opacity=".76"></circle><circle cx="844.1" cy="574.8" r="2.64" fill-opacity=".79"></circle><circle cx="662" cy="780.1" r="2.72" fill-opacity=".82"></circle><circle cx="624.3" cy="672.5" r="2.8" fill-opacity=".85"></circle></g><g class="hero-constellation-swarm-band hero-constellation-swarm-stars"><circle cx="1320" cy="494.2" r="2.1"></circle><circle cx="1114.2" cy="633.2" r="2.57"></circle><circle cx="1261.6" cy="511.5" r="3.04"></circle><circle cx="1436.4" cy="464.3" r="3.51"></circle><circle cx="1500.9" cy="803.9" r="1.96"></circle><circle cx="1393.1" cy="672.7" r="2.61"></circle><circle cx="1415" cy="890.4" r="3.27"></circle><circle cx="1693.3" cy="775.5" r="3.92"></circle><circle cx="900.8" cy="784.2" r="2.65"></circle><circle cx="936.1" cy="679.7" r="3.46"></circle></g><rect width="1600" height="900" fill="url(#hero-constellation-swarm-veil)" class="hero-constellation-swarm-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-swarm/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-swarm {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-constellation-swarm circle {
  fill: currentColor;
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-link {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-stars circle {
  fill: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-ground-stop {
  stop-color: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-band-1 {
  transform-origin: 1180px 420px;
  animation-name: hero-constellation-swarm-band-1;
  animation-duration: calc(17s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-band-2 {
  transform-origin: 1480px 740px;
  animation-name: hero-constellation-swarm-band-2;
  animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-band-3 {
  transform-origin: 820px 700px;
  animation-name: hero-constellation-swarm-band-3;
  animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-constellation-swarm .hero-constellation-swarm-stars {
  animation-name: hero-constellation-swarm-stars;
  animation-duration: calc(9s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-constellation-swarm-band-1 {
  from {
    transform: translate(-26px, -16px) rotate(-1.5deg);
  }
  to {
    transform: translate(26px, 16px) rotate(1.5deg);
  }
}
@keyframes hero-constellation-swarm-band-2 {
  from {
    transform: translate(26px, 16px) rotate(1.5deg);
  }
  to {
    transform: translate(-26px, -16px) rotate(-1.5deg);
  }
}
@keyframes hero-constellation-swarm-band-3 {
  from {
    transform: translate(-26px, -16px) rotate(-1.5deg);
  }
  to {
    transform: translate(26px, 16px) rotate(1.5deg);
  }
}
@keyframes hero-constellation-swarm-stars {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-constellation-swarm .hero-constellation-swarm-band-1,
  .pulsar-hero-constellation-swarm .hero-constellation-swarm-band-2,
  .pulsar-hero-constellation-swarm .hero-constellation-swarm-band-3,
  .pulsar-hero-constellation-swarm .hero-constellation-swarm-stars {
    animation: none;
  }
}

More in this family10 in Constellation

All heroes