Contour
Nested contours bulging in from the right edge, topographic, each band breathing on its own period.
Light groundMedium
1×
Meridian
Dark groundSparseNear-vertical arcs leaning to the right, like lines of longitude, swaying gently on four periods.
“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
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
The code
As a section
<!-- Pulsar by Business Nebula · "hero-paths-meridian" · https://pulsar.businessnebula.com.au | Licence: https://pulsar.businessnebula.com.au/legal/licence | Free-licence credit: Animation by Pulsar, linked to https://pulsar.businessnebula.com.au | 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;
}
/* Generated by scripts/hero-paths.mjs from heroes/hero-paths-meridian/params.json.
Consumers set four custom properties on any ancestor:
--pulsar-hero-bg the ground (default #0b0a16)
--pulsar-hero-ink the strokes (default #ffffff)
--pulsar-accent the accented strokes (default #8a7df7)
--pulsar-hero-speed a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-paths-meridian {
display: block;
width: 100%;
height: 100%;
color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-paths-meridian .hero-paths-meridian-ground {
fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-paths-meridian .hero-paths-meridian-stroke {
fill: none;
stroke-linecap: round;
}
.pulsar-hero-paths-meridian .hero-paths-meridian-accent-stop {
stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-meridian .hero-paths-meridian-band {
transform-box: view-box;
transform-origin: 800px 450px;
will-change: transform;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.pulsar-hero-paths-meridian .hero-paths-meridian-band-1 {
animation-name: hero-paths-meridian-band-1;
animation-duration: calc(13s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-meridian .hero-paths-meridian-band-2 {
animation-name: hero-paths-meridian-band-2;
animation-duration: calc(16s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-meridian .hero-paths-meridian-band-3 {
animation-name: hero-paths-meridian-band-3;
animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-meridian .hero-paths-meridian-band-4 {
animation-name: hero-paths-meridian-band-4;
animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-meridian-band-1 {
from {
transform: translate(-30px, 0) skewX(-1.5deg);
}
to {
transform: translate(30px, 0) skewX(1.5deg);
}
}
@keyframes hero-paths-meridian-band-2 {
from {
transform: translate(30px, 0) skewX(1.5deg);
}
to {
transform: translate(-30px, 0) skewX(-1.5deg);
}
}
@keyframes hero-paths-meridian-band-3 {
from {
transform: translate(-30px, 0) skewX(-1.5deg);
}
to {
transform: translate(30px, 0) skewX(1.5deg);
}
}
@keyframes hero-paths-meridian-band-4 {
from {
transform: translate(30px, 0) skewX(1.5deg);
}
to {
transform: translate(-30px, 0) skewX(-1.5deg);
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-hero-paths-meridian .hero-paths-meridian-band-1,
.pulsar-hero-paths-meridian .hero-paths-meridian-band-2,
.pulsar-hero-paths-meridian .hero-paths-meridian-band-3,
.pulsar-hero-paths-meridian .hero-paths-meridian-band-4 {
animation: none;
}
}
</style>
<section class="hero">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pulsar pulsar-hero pulsar-hero-paths-meridian" data-pulsar="hero-paths-meridian" preserveAspectRatio="none" 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-paths-meridian</dc:title><dc:creator>Pulsar by Business Nebula</dc:creator><dc:publisher>Business Nebula</dc:publisher><dc:source>https://pulsar.businessnebula.com.au/icons</dc:source><dc:relation>https://businessnebula.com.au</dc:relation><dc:rights>Pulsar licence, https://pulsar.businessnebula.com.au/legal/licence</dc:rights></rdf:Description></rdf:RDF></metadata><defs><linearGradient id="hero-paths-meridian-fade" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="currentColor" stop-opacity="0"></stop><stop offset=".38" stop-color="currentColor" stop-opacity=".12"></stop><stop offset=".72" stop-color="currentColor" stop-opacity=".7"></stop><stop offset="1" stop-color="currentColor"></stop></linearGradient><linearGradient id="hero-paths-meridian-fade-accent" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-paths-meridian-accent-stop" offset="0" stop-opacity="0"></stop><stop class="hero-paths-meridian-accent-stop" offset=".38" stop-opacity=".12"></stop><stop class="hero-paths-meridian-accent-stop" offset=".72" stop-opacity=".7"></stop><stop class="hero-paths-meridian-accent-stop" offset="1"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-paths-meridian-ground"></rect><g class="hero-paths-meridian-band hero-paths-meridian-band-1"><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".3" d="M-160-120c12.6 38 52.5 152 75.7 228 23.3 76 45.7 152 63.7 228 17.9 76 32.6 152 44 228s18.2 152 24.3 228S58 982 60 1020" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".37" stroke-width="1.3" d="M265.2-120c15.3 38 64.3 152 91.9 228s54 152 73.6 228 34.3 152 44 228c9.8 76 12.7 152 14.4 228 1.8 76-3.2 190-3.9 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade-accent)" stroke-opacity=".8" stroke-width="2" d="M487.9-120c16.1 38 67.8 152 96.6 228 28.9 76 56.5 152 76.5 228 20.1 76 34.8 152 44 228 9.3 76 11.1 152 11.5 228 .5 76-7.1 190-8.6 228" class="hero-paths-meridian-stroke hero-paths-meridian-accent"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".51" stroke-width="1.9" d="M738.3-120c14.4 38 60.4 152 86.5 228S876 260 895 336c19.1 76 33.8 152 44 228 10.3 76 14.6 152 17.8 228s1.2 190 1.5 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".58" stroke-width="2.3" d="M1187.4-120c11.4 38 47.4 152 68.7 228 21.4 76 42.1 152 59.3 228s31.9 152 44 228 20.7 152 28.7 228 16.1 190 19.3 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade-accent)" stroke-opacity=".8" stroke-width="3.2" d="M1581.7-120c9.3 38 38.1 152 56 228s35.5 152 51.4 228 30.5 152 44 228c13.4 76 25.1 152 36.6 228 11.4 76 26.7 190 32 228" class="hero-paths-meridian-stroke hero-paths-meridian-accent"></path></g><g class="hero-paths-meridian-band hero-paths-meridian-band-2"><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".32" stroke-width="1.1" d="M-39.5-120c13.3 38 55.8 152 80.3 228 24.4 76 48 152 66.4 228s33.1 152 44 228 16.7 152 21.6 228c4.8 76 6.4 190 7.7 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".39" stroke-width="1.4" d="M337.4-120c15.7 38 66.2 152 94.5 228 28.2 76 55.3 152 75.2 228 19.8 76 34.5 152 44 228 9.4 76 11.7 152 12.8 228 1 76-5.4 190-6.5 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".46" stroke-width="1.7" d="M534.1-120C550-82 601 32 629.5 108s55.7 152 75.7 228 34.6 152 44 228 11.4 152 12.3 228c.8 76-6.2 190-7.4 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".53" stroke-width="2" d="M836.3-120c13.7 38 57.3 152 82.3 228s49.1 152 67.7 228 33.3 152 44 228 16 152 20.3 228 4.8 190 5.7 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".6" stroke-width="2.3" d="M1304.3-120c10.8 38 44.4 152 64.6 228s40 152 56.7 228c16.8 76 31.5 152 44 228 12.6 76 22.2 152 31.3 228s19.5 190 23.4 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".67" stroke-width="2.6" d="M1644.2-120c9.1 38 37.2 152 54.8 228s34.9 152 50.7 228 30.4 152 44 228 25.6 152 37.3 228c11.8 76 27.7 190 33.2 228" class="hero-paths-meridian-stroke"></path></g><g class="hero-paths-meridian-band hero-paths-meridian-band-3"><path stroke="url(#hero-paths-meridian-fade-accent)" stroke-opacity=".8" stroke-width="1.4" d="M74.6-120c14.2 38 59.1 152 84.7 228s50.3 152 69.1 228c18.9 76 33.5 152 44 228s15.2 152 18.9 228 2.8 190 3.3 228" class="hero-paths-meridian-stroke hero-paths-meridian-accent"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".4" stroke-width="1.5" d="M395.6-120c16 38 67.4 152 96.2 228 28.7 76 56.2 152 76.2 228s34.7 152 44 228 11.2 152 11.8 228-6.8 190-8.2 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".47" stroke-width="1.8" d="M588.5-120c15.5 38 65.2 152 93.1 228 28 76 54.7 152 74.4 228 19.8 76 34.4 152 44 228s12.2 152 13.6 228-4.3 190-5.1 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade-accent)" stroke-opacity=".8" stroke-width="2.6" d="M947.2-120c12.9 38 54 152 77.8 228s46.7 152 64.9 228c18.1 76 32.8 152 44 228s17.5 152 23.1 228c5.5 76 8.5 190 10.2 228" class="hero-paths-meridian-stroke hero-paths-meridian-accent"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".61" stroke-width="2.4" d="M1411.3-120c10.2 38 41.7 152 61 228 19.2 76 38.1 152 54.5 228s31.1 152 44 228 23.4 152 33.5 228 22.5 190 27 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".68" stroke-width="2.7" d="M1695.2-120c9.1 38 37.1 152 54.7 228 17.5 76 34.8 152 50.5 228 15.8 76 30.5 152 44 228 13.6 76 25.7 152 37.5 228s27.8 190 33.3 228" class="hero-paths-meridian-stroke"></path></g><g class="hero-paths-meridian-band hero-paths-meridian-band-4"><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".35" stroke-width="1.2" d="M177.3-120c14.8 38 61.9 152 88.6 228s52.3 152 71.6 228c19.2 76 33.9 152 44 228s13.8 152 16.4 228c2.7 76-.5 190-.6 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".42" stroke-width="1.5" d="M443.9-120c16.1 38 67.9 152 96.9 228 28.9 76 56.5 152 76.6 228 20.2 76 34.8 152 44 228 9.3 76 11 152 11.4 228s-7.4 190-8.9 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".49" stroke-width="1.9" d="M655.7-120c15 38 63 152 90.2 228 27.1 76 53.1 152 72.5 228s34.1 152 44 228 13.2 152 15.5 228c2.2 76-1.9 190-2.2 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".56" stroke-width="2.2" d="M1066.2-120c12.2 38 50.7 152 73.2 228 22.6 76 44.4 152 62.1 228s32.3 152 44 228c11.6 76 19.1 152 25.9 228s12.3 190 14.8 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".63" stroke-width="2.5" d="M1504.3-120c9.7 38 39.6 152 58.1 228s36.6 152 52.7 228 30.8 152 44 228 24.4 152 35.3 228 25 190 29.9 228" class="hero-paths-meridian-stroke"></path><path stroke="url(#hero-paths-meridian-fade)" stroke-opacity=".7" stroke-width="2.8" d="M1740-120c9.2 38 37.7 152 55.4 228 17.8 76 35.3 152 51.1 228 15.9 76 30.5 152 44 228s25.4 152 36.9 228c11.6 76 27.2 190 32.6 228" class="hero-paths-meridian-stroke"></path></g></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-paths.mjs from heroes/hero-paths-meridian/params.json.
Consumers set four custom properties on any ancestor:
--pulsar-hero-bg the ground (default #0b0a16)
--pulsar-hero-ink the strokes (default #ffffff)
--pulsar-accent the accented strokes (default #8a7df7)
--pulsar-hero-speed a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-paths-meridian {
display: block;
width: 100%;
height: 100%;
color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-paths-meridian .hero-paths-meridian-ground {
fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-paths-meridian .hero-paths-meridian-stroke {
fill: none;
stroke-linecap: round;
}
.pulsar-hero-paths-meridian .hero-paths-meridian-accent-stop {
stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-meridian .hero-paths-meridian-band {
transform-box: view-box;
transform-origin: 800px 450px;
will-change: transform;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.pulsar-hero-paths-meridian .hero-paths-meridian-band-1 {
animation-name: hero-paths-meridian-band-1;
animation-duration: calc(13s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-meridian .hero-paths-meridian-band-2 {
animation-name: hero-paths-meridian-band-2;
animation-duration: calc(16s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-meridian .hero-paths-meridian-band-3 {
animation-name: hero-paths-meridian-band-3;
animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-meridian .hero-paths-meridian-band-4 {
animation-name: hero-paths-meridian-band-4;
animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-meridian-band-1 {
from {
transform: translate(-30px, 0) skewX(-1.5deg);
}
to {
transform: translate(30px, 0) skewX(1.5deg);
}
}
@keyframes hero-paths-meridian-band-2 {
from {
transform: translate(30px, 0) skewX(1.5deg);
}
to {
transform: translate(-30px, 0) skewX(-1.5deg);
}
}
@keyframes hero-paths-meridian-band-3 {
from {
transform: translate(-30px, 0) skewX(-1.5deg);
}
to {
transform: translate(30px, 0) skewX(1.5deg);
}
}
@keyframes hero-paths-meridian-band-4 {
from {
transform: translate(30px, 0) skewX(1.5deg);
}
to {
transform: translate(-30px, 0) skewX(-1.5deg);
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-hero-paths-meridian .hero-paths-meridian-band-1,
.pulsar-hero-paths-meridian .hero-paths-meridian-band-2,
.pulsar-hero-paths-meridian .hero-paths-meridian-band-3,
.pulsar-hero-paths-meridian .hero-paths-meridian-band-4 {
animation: none;
}
}
More in this series10 in paths
All heroesCurrent
Horizontal laminar flow: a shallow sine crossing the section, the bands sliding along it at unequal rates.
Light groundMediumDrift
Forty long strokes rising across the section in five bands that flex against each other. The original Background Paths composition, ported.
Dark groundMediumHorizon
Shallow arcs stacked across the lower half of the section, a curved horizon that breathes.
Dark groundSparseRibbon
A tight bundle of twelve strokes weaving once across the section as a single ribbon, fading at both ends.
Light groundSparseStrand
Nine long strokes only, wide apart: the quietest field in the series, for a section that wants texture and nothing more.
Dark groundSparseTide
Stacked sine waves, phase shifted down the section, sliding sideways at five different rates.
Dark groundBusyWake
Curves fanning from off the bottom right corner, the fan opening and closing as its bands turn against each other.
Dark groundMediumWeave
Two families of diagonals crossing at a shallow angle, each in its own bands moving the other way.
Light groundBusy