Current
Horizontal laminar flow: a shallow sine crossing the section, the bands sliding along it at unequal rates.
Nested contours bulging in from the right edge, topographic, each band breathing 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
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-paths-contour" · 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: #1d1b3a;
background: #f7f7fb;
}
.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, #f7f7fb 0%, color-mix(in oklab, #f7f7fb 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-contour/params.json.
Consumers set four custom properties on any ancestor:
--pulsar-hero-bg the ground (default #f7f7fb)
--pulsar-hero-ink the strokes (default #1d1b3a)
--pulsar-accent the accented strokes (default #8a7df7)
--pulsar-hero-speed a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-paths-contour {
display: block;
width: 100%;
height: 100%;
color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-paths-contour .hero-paths-contour-ground {
fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-paths-contour .hero-paths-contour-stroke {
fill: none;
stroke-linecap: round;
}
.pulsar-hero-paths-contour .hero-paths-contour-accent-stop {
stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-contour .hero-paths-contour-band {
transform-box: view-box;
transform-origin: 1760px 450px;
will-change: transform;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.pulsar-hero-paths-contour .hero-paths-contour-band-1 {
animation-name: hero-paths-contour-band-1;
animation-duration: calc(16s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-contour .hero-paths-contour-band-2 {
animation-name: hero-paths-contour-band-2;
animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-contour .hero-paths-contour-band-3 {
animation-name: hero-paths-contour-band-3;
animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-contour .hero-paths-contour-band-4 {
animation-name: hero-paths-contour-band-4;
animation-duration: calc(27s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-contour-band-1 {
from {
transform: scale(0.98) translate(0px, 0);
}
to {
transform: scale(1.02) translate(0px, 0);
}
}
@keyframes hero-paths-contour-band-2 {
from {
transform: scale(1.02) translate(0px, 0);
}
to {
transform: scale(0.98) translate(0px, 0);
}
}
@keyframes hero-paths-contour-band-3 {
from {
transform: scale(0.98) translate(0px, 0);
}
to {
transform: scale(1.02) translate(0px, 0);
}
}
@keyframes hero-paths-contour-band-4 {
from {
transform: scale(1.02) translate(0px, 0);
}
to {
transform: scale(0.98) translate(0px, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-hero-paths-contour .hero-paths-contour-band-1,
.pulsar-hero-paths-contour .hero-paths-contour-band-2,
.pulsar-hero-paths-contour .hero-paths-contour-band-3,
.pulsar-hero-paths-contour .hero-paths-contour-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-contour" data-pulsar="hero-paths-contour" 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-contour</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-contour-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-contour-fade-accent" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-paths-contour-accent-stop" offset="0" stop-opacity="0"></stop><stop class="hero-paths-contour-accent-stop" offset=".38" stop-opacity=".12"></stop><stop class="hero-paths-contour-accent-stop" offset=".72" stop-opacity=".7"></stop><stop class="hero-paths-contour-accent-stop" offset="1"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-paths-contour-ground"></rect><g class="hero-paths-contour-band hero-paths-contour-band-1"><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".3" d="M1950 450c2.3 16 2 34.2-4.5 49.7-6.5 15.6-19.2 31.9-34.3 43.8s-36.3 21.2-56.2 27.7-42.2 9.4-63.3 11.3-42.3 1.9-63.4 0-43.4-4.8-63.3-11.3-41.1-15.8-56.2-27.7-27.8-28.2-34.3-43.8c-6.5-15.5-6.8-33.7-4.5-49.7s10.1-31.6 18.4-46c8.4-14.4 19-27.9 31.7-40.5 12.8-12.5 27.3-25.3 44.9-34.7 17.6-9.5 39.2-18.4 60.7-22 21.6-3.7 47-3.7 68.6 0 21.5 3.6 43.1 12.5 60.7 22 17.6 9.4 32.1 22.2 44.9 34.7 12.7 12.6 23.3 26.1 31.7 40.5 8.3 14.4 16.1 30 18.4 46Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade-accent)" stroke-opacity=".8" stroke-width="1.6" d="M2057 450c2.8 26.2-1.2 56.2-13.1 80.9s-34.5 48.9-58.4 67.2-55.2 31.9-84.8 42.7-61.1 17.5-92.7 22.2c-31.7 4.7-64.6 7.9-97.3 6-32.8-2-68.8-6.5-99.2-17.7-30.3-11.1-61.6-28.8-82.9-49.3-21.4-20.4-36.9-47.8-45.2-73.2-8.3-25.3-7.7-53.3-4.8-78.8 2.8-25.5 11.1-50.2 21.8-74 10.6-23.8 23.5-47.7 42-68.9 18.5-21.3 41.6-43.4 69.1-58.4s62.8-27.4 96-31.6c33.3-4.3 71.4-1.1 103.6 6 32.2 7 62.9 21.4 89.6 36.1 26.8 14.7 49.9 32.7 70.9 51.8 21.1 19.1 41.1 39.8 55.3 62.9 14.2 23.2 27.2 49.9 30.1 76.1Z" class="hero-paths-contour-stroke hero-paths-contour-accent"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".44" stroke-width="1.5" d="M2165.1 450c1.4 36.4-9.7 77.3-28.2 110.5-18.4 33.1-50.6 63.7-82.5 88.5-31.8 24.8-70.4 43.7-108.6 60.2s-78.2 30.1-120.6 38.8c-42.3 8.6-88.7 15.8-133.3 13.2-44.7-2.5-94.6-11.4-134.5-28.6-39.8-17.3-78.2-45.5-104.7-75-26.4-29.4-43.2-67.1-53.9-101.7s-11.8-71-10.5-105.9c1.4-34.9 6.8-69.6 18.7-103.5 11.8-33.8 27.3-69.8 52.4-99.7 25.1-29.8 59.5-60.2 98-79.4 38.5-19.1 88.1-31.8 132.9-35.5 44.9-3.7 93.9 3.4 136.4 13.3 42.6 9.8 82.3 27.2 119.1 45.6 36.9 18.4 71.5 39.5 102 64.7s61.4 54 81 86.4c19.5 32.4 35 71.7 36.3 108.1Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".52" stroke-width="1.8" d="M2268.2 450c-2 46.5-21.8 96.3-46.4 137.6s-63.1 77.9-101.2 110.2c-38 32.2-81 59.6-127.1 83.3s-96 46.4-149.5 59-115.2 21.5-171.6 16.6c-56.3-5-118.4-21.7-166.5-46.4-48.2-24.6-91-63.6-122.3-101.7-31.4-38.1-50.9-83.7-66-126.8s-22.5-87.3-24.6-131.8c-2-44.5-1-91.2 12.4-135.5 13.4-44.2 34.8-92.5 68.2-129.9 33.4-37.5 82.1-73.1 132.3-94.9s112.8-32.7 168.8-35.9c55.9-3.2 113.9 5.8 167.1 16.6 53.1 10.9 103.5 27.7 151.7 48.5 48.1 20.8 97 44.9 137.1 76.5s80.5 70.9 103.4 113.4c22.9 42.4 36.3 94.7 34.2 141.2Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade-accent)" stroke-opacity=".8" stroke-width="2.5" d="M2361.3 450c-6 56-32.4 113-61 162.7-28.7 49.7-68.6 94.2-111 135.4-42.3 41.3-88.9 80.4-143.2 112-54.2 31.7-116.7 62.9-182.1 77.8-65.5 14.9-143 21.3-210.5 11.8-67.4-9.5-138.5-36.4-194.2-68.8-55.6-32.3-102.1-79.7-139.7-125.1-37.7-45.4-64.3-96.2-86.2-147.2-22-50.9-39.7-103.9-45.7-158.6s-7.3-115.1 9.7-169.4c17.1-54.4 49.2-113.2 92.9-156.8 43.6-43.5 107.4-81 169-104.7 61.7-23.8 134.5-33.4 200.9-37.7 66.3-4.3 132.8 2.1 197.1 11.9 64.3 9.7 128.6 23.5 188.8 46.6 60.3 23 124.2 52.2 172.5 91.7 48.3 39.4 93.8 91.8 117.6 144.9 23.8 53 31.1 117.5 25.1 173.5Z" class="hero-paths-contour-stroke hero-paths-contour-accent"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".66" stroke-width="2.3" d="M2444.2 450c-8.4 65.1-35.8 128.8-65.5 187.8-29.7 58.9-67.1 114.6-112.9 166.1-45.8 51.4-98.3 104.1-161.9 142.8s-142.1 74.6-220 89.3c-77.9 14.6-169.8 13.8-247.5-1.5s-155-51.8-218.5-90.4-115.9-90.2-162.3-141.2-85.4-105.8-116-164.6-59-123-67.4-188.3-6.5-139.9 17.2-203.5c23.8-63.6 70.6-129.6 125.3-178 54.8-48.4 131.4-86 203.2-112.6 71.8-26.5 151.6-38.5 227.8-46.6 76.1-8 152.6-8.8 228.9-1.4 76.4 7.3 157.3 18.8 229.3 45.4s148.6 65.3 202.7 114.2c54.2 49 99.3 115.8 122.3 179.5 22.9 63.8 23.7 137.9 15.3 203Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".73" stroke-width="2.5" d="M2522.5 450c-7.4 74-29 145.8-57.4 215.2-28.3 69.5-62.7 139.6-112.9 201.5s-113.3 126.6-188.2 170c-75 43.4-171.2 78.5-261.6 90.4-90.4 12-193.6 1.8-280.8-18.7-87.3-20.6-170.1-62.4-242.8-104.7-72.8-42.3-136.1-93.9-193.6-149.2-57.6-55.4-112.9-115.4-151.7-182.8S959.4 526.1 952.1 450c-7.4-76.1 4.5-163.5 37.4-235.2 32.8-71.6 94.9-141.4 159.8-194.5 64.8-53.1 149.4-92.3 229.5-124 80-31.7 165-51.8 250.9-66 85.9-14.1 175.5-24.2 264.6-18.7 89 5.5 187.3 19 269.7 51.7 82.3 32.8 166.6 85.1 224.2 144.7 57.5 59.7 98.6 139.7 121 213.4 22.4 73.6 20.6 154.6 13.3 228.6Z" class="hero-paths-contour-stroke"></path></g><g class="hero-paths-contour-band hero-paths-contour-band-2"><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".32" stroke-width="1.1" d="M1976.3 450c2.6 18.5 1.7 39.7-6 57.6-7.6 17.9-22.7 36.3-40 49.9s-41.2 24-63.7 31.4c-22.4 7.5-47.1 11.1-70.9 13.6-23.7 2.4-47.7 3-71.7 1.1s-49.6-5.1-72.2-12.6c-22.5-7.6-46.5-18.8-63.3-32.8-16.8-13.9-30.4-33-37.4-51s-6.9-38.8-4.4-57.2c2.6-18.4 10.9-36.2 19.9-52.9 9.1-16.8 20.4-32.7 34.6-47.4 14.2-14.6 30.6-29.7 50.6-40.7 20-10.9 44.9-20.9 69.3-24.8 24.5-4 53.3-3.4 77.5 1.1 24.3 4.5 48.2 14.9 68 25.8 19.9 10.8 36.3 25.1 51 39.4s27.4 29.6 37.2 46.2c9.8 16.5 19 34.8 21.5 53.3Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".39" stroke-width="1.3" d="M2084.1 450c2.7 28.7-2.8 61.6-16.3 88.5s-38.6 52.8-64.6 72.7-59.4 34.6-91.3 46.6c-31.8 12.1-65.4 20.2-99.7 25.9-34.3 5.6-70.4 9.8-106.1 7.8-35.7-1.9-75.3-7.3-108.2-19.8-32.8-12.5-66.1-32.7-88.9-55.4-22.7-22.6-38.5-52.8-47.3-80.5-8.8-27.8-8.2-58-5.6-85.8 2.7-27.8 10.6-54.9 21.6-81.1 11-26.3 24.4-53.1 44.4-76.6 20-23.4 45.7-47.8 75.8-64 30.2-16.2 69-28.9 105.2-33.1s77.2.1 112 7.9 67.7 23.3 96.8 39.1c29.2 15.7 54.9 34.6 78.2 55.3 23.3 20.6 46 43.2 61.7 68.6s29.7 55.2 32.3 83.9Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".46" stroke-width="1.6" d="M2191.6 450c.7 39-12.6 82.3-32.7 117.5s-54.2 67.2-87.8 93.7c-33.6 26.6-73.5 47.3-113.7 65.5s-82.6 33.9-127.6 43.6c-45.1 9.7-95.2 17.7-142.8 14.7s-100.8-13.5-142.8-32.5c-42.1-19-81.8-50-109.4-81.7s-44.8-71.6-56.4-108.4-13.8-75.1-13.2-112.4c.7-37.3 5-74.8 17.2-111.2 12.1-36.5 28.6-75.6 55.6-107.5 27-31.8 64.8-63.9 106.2-83.8 41.4-20 94.4-32.3 142.1-35.8 47.7-3.6 99 4.4 144.2 14.7 45.2 10.2 87.3 27.8 126.9 46.9 39.5 19.1 77.5 40.9 110.5 67.6 32.9 26.8 66.4 57.9 87.1 92.8 20.6 34.8 36 77.3 36.6 116.3Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".53" stroke-width="1.8" d="M2292.5 450c-3 48.9-24.8 100.7-50.7 144-25.9 43.4-65.2 81.7-104.4 116-39.3 34.4-83.2 64.4-131.3 90.1-48 25.7-100.8 50.7-157.2 64-56.4 13.4-122.1 22.2-181.3 16.3s-123.8-25-173.9-51.7c-50-26.6-93.7-68-126.5-108-32.7-40.1-53.5-87.2-70.1-132.3s-26.3-91.4-29.4-138.4c-3-47-3-97 11.1-143.8 14.1-46.9 37.7-98 73.5-137.1 35.8-39.2 88.3-75.6 141.4-97.8 53.1-22.3 118.6-32.7 177.3-36 58.6-3.3 118.7 5.5 174.5 16.3 55.9 10.8 109.5 26.9 160.6 48.3 51.2 21.3 103.8 46.4 146.2 79.8 42.3 33.4 84.4 75.8 107.8 120.8 23.4 45.1 35.5 100.6 32.4 149.5Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".61" stroke-width="2.1" d="M2382.9 450c-6.8 58.4-34.1 117-63.3 168.9s-68.8 98.8-112.1 142.5c-43.2 43.7-90.9 86.2-147.3 119.8-56.5 33.5-122.7 66.3-191.2 81.5-68.5 15.1-149.9 20-220 9.2-70-10.9-142.9-40.5-200.4-74.6-57.6-34-105.2-82.9-144.8-129.9-39.6-46.9-68.8-98.8-92.8-151.7s-44.5-108.4-51.3-165.7-8-121.3 10.4-178c18.5-56.8 54-117.7 100.4-162.6s113.7-82.5 178.1-106.7c64.3-24.3 139.2-34.1 208-39 68.8-5 137.6 0 204.8 9.2 67.3 9.2 135.5 22.2 198.8 45.9 63.2 23.8 130.6 54.9 180.7 96.6 50 41.6 95.9 97.6 119.5 153.4 23.7 55.7 29.3 122.8 22.5 181.2Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".68" stroke-width="2.3" d="M2463.9 450c-8.5 67.3-35.1 132.8-64.6 194.3-29.6 61.5-66.1 120.5-112.9 174.6-46.7 54.1-101.2 110.1-167.5 150.2s-149.1 76.4-230.2 90.6c-81 14.1-176.1 11-256.2-5.7-80.1-16.8-158.8-55.1-224.4-94.9s-120.3-91.8-169.2-143.9c-49-52.1-91.9-108-124.7-168.9-32.7-60.9-63.5-128.3-71.9-196.3-8.5-68-4.8-146 21.1-211.7s76.6-133 134-182.5c57.5-49.6 136.6-87.3 210.7-114.9 74-27.5 155.2-41 233.8-50.4 78.5-9.3 157.9-12.4 237.4-5.7s164.8 18.2 239.6 46.1c74.7 27.9 153.8 69.6 209 121.2 55.2 51.5 99.5 121.8 122.2 188.1 22.7 66.4 22.2 142.5 13.8 209.8Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".75" stroke-width="2.6" d="M2542.4 450c-6.4 76.2-25.7 150.5-53.6 222.7s-61.9 146.3-113.5 210.7c-51.7 64.4-118.4 131.4-196.5 175.6-78.1 44.1-178.7 78.1-272.2 89.1-93.4 11.1-198.8-1.2-288.4-22.8-89.7-21.5-174-63.7-249.4-106.5s-142.3-93.9-202.9-150.3-120-118.1-160.6-187.9c-40.6-69.7-76.4-151.8-82.9-230.6-6.4-78.8 8.8-169 44.1-242.5 35.3-73.4 100.7-143.9 167.8-198.3 67-54.4 152.6-94.6 234.5-128 81.8-33.4 168.1-56.5 256.5-72.4 88.5-15.9 181.9-28.2 274.2-22.8 92.2 5.4 194.7 20.3 279.3 55 84.6 34.8 169.9 90.9 228.1 153.3 58.1 62.4 98.1 145.2 120.7 221.2 22.6 75.9 21.3 158.3 14.8 234.5Z" class="hero-paths-contour-stroke"></path></g><g class="hero-paths-contour-band hero-paths-contour-band-3"><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".34" stroke-width="1.1" d="M2003 450c2.8 21 1.1 45.2-7.9 65.4s-26.6 40.7-46.1 55.9c-19.5 15.1-46 26.6-70.9 35.1s-51.9 13-78.3 16.1-53.3 4.4-80.2 2.5c-26.8-1.9-55.9-5.4-81.1-14.1s-51.7-21.9-70.1-38c-18.4-16-32.9-37.9-40.3-58.4s-7.1-43.8-4.3-64.5 11.3-40.9 21-59.9 21.5-37.5 37.1-54.3c15.7-16.9 34.2-34.3 56.6-46.7s50.7-23.3 78.1-27.5c27.4-4.1 59.3-2.7 86.3 2.6 26.9 5.3 53.1 17.2 75.2 29.4s40.6 27.9 57.4 43.8c16.7 16 31.7 33.1 42.9 51.8 11.3 18.8 21.8 39.8 24.6 60.8Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".41" stroke-width="1.4" d="M2111.3 450c2.4 31.3-4.8 67-19.9 96-15.2 29-42.8 56.5-70.8 78-28.1 21.5-63.4 37.4-97.4 50.9-34.1 13.4-69.8 23.2-106.8 29.8-36.9 6.6-76.3 11.9-115 9.8s-81.8-8.4-117-22.4c-35.3-14-70.5-36.8-94.5-61.7-24-25-40.2-57.8-49.5-87.8-9.4-30.1-9.1-62.4-6.7-92.6s9.6-59.7 20.9-88.4c11.3-28.8 25.3-58.6 46.9-84.2s50-52.2 82.9-69.5c32.8-17.3 75.3-30.2 114.4-34.2 39.1-4.1 82.9 1.2 120.3 9.8 37.4 8.5 72.4 24.9 104.1 41.6 31.6 16.7 60.1 36.5 85.8 58.7 25.6 22.1 51.1 46.6 68.1 74.4 17.1 27.7 31.8 60.5 34.2 91.8Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade-accent)" stroke-opacity=".8" stroke-width="2.1" d="M2217.7 450c-.2 41.5-15.6 87.1-37.3 124.4-21.7 37.2-57.6 70.7-92.8 99-35.2 28.4-76.3 51.1-118.5 71-42.1 20-86.8 38-134.7 48.7-47.8 10.7-101.7 19.3-152.3 15.8-50.5-3.5-106.8-15.9-151-36.7-44.1-20.9-85-54.6-113.8-88.5s-46.6-75.9-59.2-114.8c-12.6-39-16.2-79.2-16.4-118.9s3-80.1 15.5-119.2c12.5-39 30.4-81.2 59.3-115 29-33.9 70.4-67.3 114.6-88 44.3-20.6 100.7-32.5 151.2-35.9 50.5-3.3 104.2 5.2 152 15.8s92.5 28.1 134.8 47.9c42.4 19.7 83.9 42.2 119.3 70.5 35.3 28.3 71.4 61.9 92.9 99.3 21.6 37.3 36.6 83.1 36.4 124.6Z" class="hero-paths-contour-stroke hero-paths-contour-accent"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".55" stroke-width="1.9" d="M2316.2 450c-4.1 51.3-27.7 104.9-54.7 150.3s-66.8 85.6-107.2 122.2c-40.4 36.5-85.1 69.4-135.2 97.1-50 27.7-105.8 54.9-165.2 68.9-59.4 14.1-129.1 22.4-191.1 15.4s-128.9-28.7-180.9-57.2c-51.9-28.6-96.5-72.2-130.7-114.2-34.3-41.9-56.7-90.4-74.9-137.5s-30.5-95.5-34.5-145c-4.1-49.5-4.8-102.9 10.1-152.3s41-103.2 79.4-144c38.3-40.7 94.6-77.6 150.6-100.4 56-22.7 124.2-32.7 185.4-36.1 61.3-3.5 123.4 4.8 182.1 15.3 58.6 10.6 115.6 26 169.7 47.9 54.2 21.9 110.6 48 155.1 83.4 44.5 35.3 88.1 80.9 111.7 128.6 23.7 47.7 34.3 106.3 30.3 157.6Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".62" stroke-width="2.2" d="M2403.8 450c-7.5 60.6-35.2 120.9-64.8 175.1s-68.6 103.8-112.7 150c-44.1 46.3-93.1 92.2-151.8 127.5-58.7 35.4-128.8 69.6-200.5 84.7-71.6 15.2-156.7 18.4-229.3 6.1-72.7-12.3-147.2-44.4-206.6-80.1-59.5-35.7-108.4-85.8-150.1-134.2s-73.9-101.3-100-156.1c-26.2-54.8-49.5-113.1-57-173s-8.1-127.5 11.9-186.6c20.1-59.1 59.2-122 108.4-168.1s119.8-83.7 186.8-108.6c66.9-24.9 143.6-35.1 214.9-40.9s142.5-2.5 212.7 6.1c70.3 8.6 142.6 20.9 208.8 45.5 66.2 24.5 136.9 57.9 188.5 101.9s97.5 103.5 121 162c23.5 58.4 27.3 128.1 19.8 188.7Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade-accent)" stroke-opacity=".8" stroke-width="3" d="M2483.4 450c-8.4 69.6-33.7 137-62.9 201-29.3 64.1-65 126.6-112.7 183.4-47.8 56.8-104.8 115.8-173.9 157.2-69 41.4-156.3 77.7-240.5 91.2-84.2 13.6-182.2 8.1-264.7-10-82.5-18.2-162.5-58.1-230.4-98.9-67.8-40.8-125-92.8-176.7-146.1-51.7-53.2-98.6-110.3-133.6-173.3-34.9-62.9-67.5-133.8-75.8-204.5-8.4-70.7-2.3-152 25.8-219.8 28.1-67.7 82.7-136 142.8-186.7 60-50.7 141.3-88.7 217.5-117.4 76.2-28.8 158.7-44.1 239.7-55 80.9-10.8 163.5-16.3 246.2-10 82.6 6.2 172.3 17.9 249.7 47.3 77.4 29.3 158.6 74.3 214.7 128.5 56.1 54.3 99.5 128 121.9 196.8 22.5 68.9 21.2 146.7 12.9 216.3Z" class="hero-paths-contour-stroke hero-paths-contour-accent"></path></g><g class="hero-paths-contour-band hero-paths-contour-band-4"><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".35" stroke-width="1.2" d="M2029.9 450c2.9 23.6.1 50.7-10.3 73.2s-30.5 44.9-52.2 61.6c-21.7 16.8-50.7 29.2-77.9 38.9-27.3 9.6-56.6 15.1-85.7 18.9-29 3.9-58.8 6.1-88.6 4.2s-62.3-5.9-90.1-15.8c-27.9-9.8-56.8-25.2-76.7-43.4-20-18.3-35-42.9-42.9-65.9-7.8-22.9-7.3-48.6-4.4-71.7s11.4-45.5 21.6-66.9 22.6-42.5 39.7-61.6c17-19 37.7-38.8 62.7-52.5 24.9-13.8 56.6-25.5 86.9-29.8 30.4-4.2 65.5-1.9 95 4.2 29.6 6.2 58.1 19.5 82.5 32.9 24.4 13.5 45.1 30.4 63.9 48 18.9 17.5 36.3 36.4 49 57.3 12.8 21 24.6 44.8 27.5 68.4Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".43" stroke-width="1.4" d="M2138.3 450c2 33.9-7.1 72.2-23.9 103.3s-46.8 60.2-76.8 83.3-67 40.4-103.2 55.4c-36.1 14.9-74 26.5-113.6 34.1s-82.5 13.9-124.1 11.6c-41.7-2.3-88.3-9.7-125.9-25.3s-74.5-41.1-99.7-68.3c-25.2-27.1-41.7-62.5-51.7-94.8-9.9-32.4-10.2-66.8-8.3-99.3 2-32.5 8.4-64.6 19.9-95.9 11.6-31.3 26.3-64.1 49.6-91.9 23.3-27.7 54.6-56.3 90.2-74.6 35.7-18.3 81.7-31.1 123.7-35.1 42-3.9 88.4 2.4 128.4 11.7 40 9.2 77.3 26.2 111.5 43.8s65.7 38.1 93.8 61.8c28 23.7 56.2 50.2 74.6 80.3 18.4 30 33.6 66 35.5 99.9Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".5" stroke-width="1.7" d="M2243.3 450c-1.1 44-18.8 91.8-42 131.1-23.2 39.2-60.5 74.2-97.2 104.5-36.7 30.2-78.8 55.2-122.9 77-44.2 21.8-91.4 42.1-142 53.8-50.7 11.7-108.5 20.6-161.9 16.4-53.5-4.1-112.8-18.6-158.9-41.3-46.2-22.8-88.1-59.2-118.2-95.2-30-36-48.5-79.9-62.3-121-13.8-41-19.2-83.2-20.2-125.3-1.1-42.1.9-85.6 13.8-127.2 12.9-41.7 32.4-87 63.5-122.7 31.2-35.7 76.1-70.3 123.4-91.6 47.2-21.2 106.8-32.6 160-35.9 53.3-3.2 109.1 5.7 159.6 16.5s98 28 143.2 48.3 90.3 43.5 128.1 73.5c37.7 29.9 76.1 66.3 98.4 106.2 22.3 39.8 36.6 88.9 35.6 132.9Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".57" stroke-width="2" d="M2339.1 450c-5.1 53.7-30.2 109-58.1 156.5-28 47.6-68 89.8-109.4 128.6-41.4 38.9-87 74.9-139.1 104.5-52.2 29.7-111.2 59-173.6 73.5-62.4 14.6-136 22.1-200.8 13.9-64.7-8.2-133.8-32.5-187.6-63-53.8-30.4-99.3-76.1-135.2-119.8s-60.2-93.4-80.2-142.5c-20-49-35-99.6-40-151.7-5.1-52.1-6.3-109 9.6-160.8 16-51.9 44.9-108.4 85.9-150.6 40.9-42.2 101-79.4 159.9-102.6 58.8-23.3 129.4-33 193.2-36.8s128.1 3.7 189.6 13.9 122 24.8 179.2 47.3c57.1 22.4 117.4 50 163.8 87.3 46.5 37.3 91.2 86.2 115 136.6s32.8 112 27.8 165.7Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".64" stroke-width="2.2" d="M2424.2 450c-8 62.9-35.8 124.8-65.5 181.4-29.8 56.5-68.1 109-113 157.9-44.9 48.8-95.5 98.1-156.6 135.2s-135.3 72.3-210.1 87.3-163.3 16.3-238.5 2.5-151.2-48.2-212.6-85.5c-61.4-37.2-112-88.2-155.9-137.9-44-49.7-79.5-103.6-107.8-160.4-28.4-56.8-54.4-117.9-62.4-180.5s-7.6-133.7 14.2-195.1 64.7-125.9 116.7-173.2 125.7-84.9 195.2-110.5c69.4-25.7 147.8-36.6 221.5-43.5 73.7-6.8 147.4-5.4 220.7 2.5 73.3 8 149.8 19.8 219 45.3C2158.2 1 2232 36.9 2285 83.3c52.9 46.4 98.6 109.6 121.8 170.7s25.4 133.1 17.4 196Z" class="hero-paths-contour-stroke"></path><path stroke="url(#hero-paths-contour-fade)" stroke-opacity=".71" stroke-width="2.5" d="M2502.9 450c-8 71.8-31.7 141.3-60.5 208-28.9 66.7-63.8 133-112.7 192.4-48.9 59.3-108.8 121.3-180.7 163.8-72 42.5-163.7 78.4-251 91.1-87.3 12.8-188 5-272.9-14.4-84.9-19.5-166.3-60.5-236.5-102.1-70.3-41.7-130.3-93.6-184.9-147.9S1098.1 728.2 1061.1 663c-36.9-65.1-71.1-139.6-79-213-8-73.4.8-157.9 31.2-227.6 30.5-69.7 88.9-138.8 151.4-190.7 62.6-51.9 145.7-90.4 223.9-120.5s161.9-47.7 245.3-60.1 169.4-20.3 255.2-14.5c85.9 5.8 179.9 18.3 259.9 49.2 79.9 30.9 162.8 79.5 219.7 136.5 56.9 56.9 99.1 133.8 121.5 205.1s20.6 150.8 12.7 222.6Z" class="hero-paths-contour-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>
/* Generated by scripts/hero-paths.mjs from heroes/hero-paths-contour/params.json.
Consumers set four custom properties on any ancestor:
--pulsar-hero-bg the ground (default #f7f7fb)
--pulsar-hero-ink the strokes (default #1d1b3a)
--pulsar-accent the accented strokes (default #8a7df7)
--pulsar-hero-speed a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-paths-contour {
display: block;
width: 100%;
height: 100%;
color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-paths-contour .hero-paths-contour-ground {
fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-paths-contour .hero-paths-contour-stroke {
fill: none;
stroke-linecap: round;
}
.pulsar-hero-paths-contour .hero-paths-contour-accent-stop {
stop-color: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-paths-contour .hero-paths-contour-band {
transform-box: view-box;
transform-origin: 1760px 450px;
will-change: transform;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.pulsar-hero-paths-contour .hero-paths-contour-band-1 {
animation-name: hero-paths-contour-band-1;
animation-duration: calc(16s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-contour .hero-paths-contour-band-2 {
animation-name: hero-paths-contour-band-2;
animation-duration: calc(19s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-contour .hero-paths-contour-band-3 {
animation-name: hero-paths-contour-band-3;
animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-paths-contour .hero-paths-contour-band-4 {
animation-name: hero-paths-contour-band-4;
animation-duration: calc(27s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-paths-contour-band-1 {
from {
transform: scale(0.98) translate(0px, 0);
}
to {
transform: scale(1.02) translate(0px, 0);
}
}
@keyframes hero-paths-contour-band-2 {
from {
transform: scale(1.02) translate(0px, 0);
}
to {
transform: scale(0.98) translate(0px, 0);
}
}
@keyframes hero-paths-contour-band-3 {
from {
transform: scale(0.98) translate(0px, 0);
}
to {
transform: scale(1.02) translate(0px, 0);
}
}
@keyframes hero-paths-contour-band-4 {
from {
transform: scale(1.02) translate(0px, 0);
}
to {
transform: scale(0.98) translate(0px, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.pulsar-hero-paths-contour .hero-paths-contour-band-1,
.pulsar-hero-paths-contour .hero-paths-contour-band-2,
.pulsar-hero-paths-contour .hero-paths-contour-band-3,
.pulsar-hero-paths-contour .hero-paths-contour-band-4 {
animation: none;
}
}
Horizontal laminar flow: a shallow sine crossing the section, the bands sliding along it at unequal rates.
Forty long strokes rising across the section in five bands that flex against each other. The original Background Paths composition, ported.
Shallow arcs stacked across the lower half of the section, a curved horizon that breathes.
Near-vertical arcs leaning to the right, like lines of longitude, swaying gently on four periods.
A tight bundle of twelve strokes weaving once across the section as a single ribbon, fading at both ends.
Nine long strokes only, wide apart: the quietest field in the series, for a section that wants texture and nothing more.
Stacked sine waves, phase shifted down the section, sliding sideways at five different rates.
Curves fanning from off the bottom right corner, the fan opening and closing as its bands turn against each other.
Two families of diagonals crossing at a shallow angle, each in its own bands moving the other way.