Contour
Nested contours bulging in from the right edge, topographic, each band breathing on its own period.
Light groundMedium
1×
Drift
Dark groundMediumForty long strokes rising across the section in five bands that flex against each other. The original Background Paths composition, ported.
After 21st.dev @kokonutd/background-paths, as adapted for telcocentric.com.au.
“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-drift" · 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-drift/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-drift {
display: block;
width: 100%;
height: 100%;
color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-paths-drift .hero-paths-drift-ground {
fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-paths-drift .hero-paths-drift-stroke {
fill: none;
stroke-linecap: round;
}
.pulsar-hero-paths-drift .hero-paths-drift-accent-stop {
stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-drift .hero-paths-drift-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-drift .hero-paths-drift-band-1 {
animation-name: hero-paths-drift-band-1;
animation-duration: calc(11s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-drift .hero-paths-drift-band-2 {
animation-name: hero-paths-drift-band-2;
animation-duration: calc(13s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-drift .hero-paths-drift-band-3 {
animation-name: hero-paths-drift-band-3;
animation-duration: calc(15s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-drift .hero-paths-drift-band-4 {
animation-name: hero-paths-drift-band-4;
animation-duration: calc(17s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-drift .hero-paths-drift-band-5 {
animation-name: hero-paths-drift-band-5;
animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-drift-band-1 {
from {
transform: translate(-44px, 30px) skewY(-2deg);
}
to {
transform: translate(44px, -30px) skewY(2deg);
}
}
@keyframes hero-paths-drift-band-2 {
from {
transform: translate(44px, -30px) skewY(2deg);
}
to {
transform: translate(-44px, 30px) skewY(-2deg);
}
}
@keyframes hero-paths-drift-band-3 {
from {
transform: translate(-44px, 30px) skewY(-2deg);
}
to {
transform: translate(44px, -30px) skewY(2deg);
}
}
@keyframes hero-paths-drift-band-4 {
from {
transform: translate(44px, -30px) skewY(2deg);
}
to {
transform: translate(-44px, 30px) skewY(-2deg);
}
}
@keyframes hero-paths-drift-band-5 {
from {
transform: translate(-44px, 30px) skewY(-2deg);
}
to {
transform: translate(44px, -30px) skewY(2deg);
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-hero-paths-drift .hero-paths-drift-band-1,
.pulsar-hero-paths-drift .hero-paths-drift-band-2,
.pulsar-hero-paths-drift .hero-paths-drift-band-3,
.pulsar-hero-paths-drift .hero-paths-drift-band-4,
.pulsar-hero-paths-drift .hero-paths-drift-band-5 {
animation: none;
}
}
</style>
<section class="hero">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pulsar pulsar-hero pulsar-hero-paths-drift" data-pulsar="hero-paths-drift" 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-drift</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-drift-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-drift-fade-accent" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-paths-drift-accent-stop" offset="0" stop-opacity="0"></stop><stop class="hero-paths-drift-accent-stop" offset=".38" stop-opacity=".12"></stop><stop class="hero-paths-drift-accent-stop" offset=".72" stop-opacity=".7"></stop><stop class="hero-paths-drift-accent-stop" offset="1"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-paths-drift-ground"></rect><g class="hero-paths-drift-band hero-paths-drift-band-1"><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".35" d="M-180-190c545 312.3 1290-712.3 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".41" stroke-width="1.3" d="M-180 70.5c545 367.5 1290-767.6 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade-accent)" stroke-opacity=".8" stroke-width="2" d="M-180 234.7c545 329 1290-729.1 1960-400" class="hero-paths-drift-stroke hero-paths-drift-accent"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".52" stroke-width="1.8" d="M-180 330.6c545 225.1 1290-625.1 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".58" stroke-width="2.1" d="M-180 474.4c545 132.1 1290-532.1 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".64" stroke-width="2.4" d="M-180 720.4c545 118.4 1290-518.4 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".7" stroke-width="2.7" d="M-180 991c545 194.1 1290-594.1 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".75" stroke-width="3" d="M-180 1176.9c545 303.6 1290-703.5 1960-400" class="hero-paths-drift-stroke"></path></g><g class="hero-paths-drift-band hero-paths-drift-band-2"><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".36" stroke-width="1.1" d="M-180-133.7c545 329.7 1290-729.8 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".42" stroke-width="1.3" d="M-180 112.2c545 367.5 1290-767.4 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".48" stroke-width="1.6" d="M-180 256c545 311.5 1290-711.4 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".53" stroke-width="1.9" d="M-180 352C365 554.9 1110-250.9 1780-48" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".59" stroke-width="2.2" d="M-180 516.2c545 121.7 1290-521.6 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".65" stroke-width="2.5" d="M-180 776.7c545 127.3 1290-527.4 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade-accent)" stroke-opacity=".8" stroke-width="3.4" d="M-180 1037.1c545 215.9 1290-615.9 1960-400" class="hero-paths-drift-stroke hero-paths-drift-accent"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".77" stroke-width="3" d="M-180 1201.3c545 322.2 1290-722.1 1960-400" class="hero-paths-drift-stroke"></path></g><g class="hero-paths-drift-band hero-paths-drift-band-3"><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".37" stroke-width="1.1" d="M-180-78.6c545 344.5 1290-744.4 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".43" stroke-width="1.4" d="M-180 149.4c545 363.4 1290-763.3 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".49" stroke-width="1.7" d="M-180 275.2c545 291.6 1290-691.6 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade-accent)" stroke-opacity=".8" stroke-width="2.4" d="M-180 376.4c545 181.9 1290-581.9 1960-400" class="hero-paths-drift-stroke hero-paths-drift-accent"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".6" stroke-width="2.2" d="M-180 562.3c545 114.9 1290-514.9 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".66" stroke-width="2.5" d="M-180 832.9c545 139.9 1290-539.8 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".72" stroke-width="2.8" d="M-180 1078.9c545 238.4 1290-638.4 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".78" stroke-width="3.1" d="M-180 1222.7c545 338.2 1290-738.2 1960-400" class="hero-paths-drift-stroke"></path></g><g class="hero-paths-drift-band hero-paths-drift-band-4"><path stroke="url(#hero-paths-drift-fade-accent)" stroke-opacity=".8" stroke-width="1.5" d="M-180-25.6c545 355.9 1290-755.8 1960-400" class="hero-paths-drift-stroke hero-paths-drift-accent"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".44" stroke-width="1.5" d="M-180 182c545 355.4 1290-755.4 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".5" stroke-width="1.7" d="M-180 293.3c545 270.2 1290-670.1 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".56" stroke-width="2" d="M-180 404.7C365 567.4 1110-158 1780 4.7" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".62" stroke-width="2.3" d="M-180 612.2c545 112.1 1290-512 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".67" stroke-width="2.6" d="M-180 888.1c545 155.5 1290-555.5 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".73" stroke-width="2.9" d="M-180 1116.1c545 261 1290-661 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade-accent)" stroke-opacity=".8" stroke-width="3.9" d="M-180 1241.9c545 351.1 1290-751.1 1960-400" class="hero-paths-drift-stroke hero-paths-drift-accent"></path></g><g class="hero-paths-drift-band hero-paths-drift-band-5"><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".4" stroke-width="1.2" d="M-180 24.4c545 363.6 1290-763.7 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".45" stroke-width="1.5" d="M-180 210.2c545 343.9 1290-743.8 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".51" stroke-width="1.8" d="M-180 311.4c545 247.8 1290-647.7 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".57" stroke-width="2.1" d="M-180 437.2c545 146 1290-545.9 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade-accent)" stroke-opacity=".8" stroke-width="2.9" d="M-180 665.2c545 113.3 1290-513.2 1960-400" class="hero-paths-drift-stroke hero-paths-drift-accent"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".68" stroke-width="2.6" d="M-180 941.1c545 173.8 1290-573.8 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".74" stroke-width="2.9" d="M-180 1148.7c545 282.9 1290-683 1960-400" class="hero-paths-drift-stroke"></path><path stroke="url(#hero-paths-drift-fade)" stroke-opacity=".8" stroke-width="3.2" d="M-180 1260c545 360.6 1290-760.6 1960-400" class="hero-paths-drift-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-drift/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-drift {
display: block;
width: 100%;
height: 100%;
color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-paths-drift .hero-paths-drift-ground {
fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-paths-drift .hero-paths-drift-stroke {
fill: none;
stroke-linecap: round;
}
.pulsar-hero-paths-drift .hero-paths-drift-accent-stop {
stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-drift .hero-paths-drift-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-drift .hero-paths-drift-band-1 {
animation-name: hero-paths-drift-band-1;
animation-duration: calc(11s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-drift .hero-paths-drift-band-2 {
animation-name: hero-paths-drift-band-2;
animation-duration: calc(13s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-drift .hero-paths-drift-band-3 {
animation-name: hero-paths-drift-band-3;
animation-duration: calc(15s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-drift .hero-paths-drift-band-4 {
animation-name: hero-paths-drift-band-4;
animation-duration: calc(17s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-drift .hero-paths-drift-band-5 {
animation-name: hero-paths-drift-band-5;
animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-drift-band-1 {
from {
transform: translate(-44px, 30px) skewY(-2deg);
}
to {
transform: translate(44px, -30px) skewY(2deg);
}
}
@keyframes hero-paths-drift-band-2 {
from {
transform: translate(44px, -30px) skewY(2deg);
}
to {
transform: translate(-44px, 30px) skewY(-2deg);
}
}
@keyframes hero-paths-drift-band-3 {
from {
transform: translate(-44px, 30px) skewY(-2deg);
}
to {
transform: translate(44px, -30px) skewY(2deg);
}
}
@keyframes hero-paths-drift-band-4 {
from {
transform: translate(44px, -30px) skewY(2deg);
}
to {
transform: translate(-44px, 30px) skewY(-2deg);
}
}
@keyframes hero-paths-drift-band-5 {
from {
transform: translate(-44px, 30px) skewY(-2deg);
}
to {
transform: translate(44px, -30px) skewY(2deg);
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-hero-paths-drift .hero-paths-drift-band-1,
.pulsar-hero-paths-drift .hero-paths-drift-band-2,
.pulsar-hero-paths-drift .hero-paths-drift-band-3,
.pulsar-hero-paths-drift .hero-paths-drift-band-4,
.pulsar-hero-paths-drift .hero-paths-drift-band-5 {
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 groundMediumHorizon
Shallow arcs stacked across the lower half of the section, a curved horizon that breathes.
Dark groundSparseMeridian
Near-vertical arcs leaning to the right, like lines of longitude, swaying gently on four periods.
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