Cluster
One dense group right of centre with a faint mesh through it, and a handful of its points lit.
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
Set any of these on the section, or on any ancestor, and the hero follows. Nothing else in the file needs editing.
<!-- 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>
/* 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;
}
}
One dense group right of centre with a faint mesh through it, and a handful of its points lit.
An arc of groups across the top right, thinning downward, as a skyline of points.
Four groups of very small points with no links at all, a field of grain behind the heading.
Long links between few points, so the net reads before the dots do.
Two small groups and the few lines between their nearest points, the sparsest field in the family.
Four loose groups of points across the right, joined where they fall close, each group turning on its own period.
Three small groups with every third point in the accent, so the field reads as lit rather than drawn.
Two long shallow bands of points running across the section, joined end to end.
Points gathered at the right edge and thinning toward the copy, with only the closest pairs joined.