Delta

<!-- Pulsar by Business Nebula · "hero-contour-delta" · 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: #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;
}
.hero-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
}
/* Generated by scripts/hero-contour.mjs from heroes/hero-contour-delta/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #f7f7fb)
     --pulsar-hero-ink    the contour rings   (default #1d1b3a)
     --pulsar-accent      the index rings     (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-contour-delta {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-contour-delta .hero-contour-delta-ground {
  fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-contour-delta .hero-contour-delta-ring {
  fill: none;
  stroke: currentColor;
}
.pulsar-hero-contour-delta .hero-contour-delta-accent {
  stroke: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-contour-delta .hero-contour-delta-ground-stop {
  stop-color: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-contour-delta .hero-contour-delta-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-contour-delta .hero-contour-delta-band-1 {
  transform-origin: 1220px 560px;
  animation-name: hero-contour-delta-band-1;
  animation-duration: calc(17s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-contour-delta-band-1 {
  from {
    transform: translate(-24px, -14px) scale(0.98);
  }
  to {
    transform: translate(24px, 14px) scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-contour-delta .hero-contour-delta-band-1 {
    animation: none;
  }
}
</style>
<section class="hero">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pulsar pulsar-hero pulsar-hero-contour-delta" data-pulsar="hero-contour-delta" 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-contour-delta</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-contour-delta-veil" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-contour-delta-ground-stop" offset="0" stop-opacity=".88"></stop><stop class="hero-contour-delta-ground-stop" offset=".32" stop-opacity=".5"></stop><stop class="hero-contour-delta-ground-stop" offset=".66" stop-opacity=".1"></stop><stop class="hero-contour-delta-ground-stop" offset="1" stop-opacity="0"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-contour-delta-ground"></rect><g class="hero-contour-delta-band hero-contour-delta-band-1"><path stroke-opacity=".25" d="M1300.1 583c-2.5 6.9-8.9 13.5-16.3 17.8-7.4 4.4-17.9 7.2-27.9 8.3-10.1 1.2-21.5.2-32.4-1.3-10.9-1.4-22.1-3.7-33-7.5-10.9-3.9-23.9-8.9-32.5-15.4-8.6-6.6-16.3-16.2-18.8-24-2.6-7.9.4-16.4 3.7-23 3.3-6.7 9.4-12.2 16.2-16.9 6.7-4.7 14.8-9.2 24.3-11.1 9.6-1.9 21.8-2.1 32.9-.5 11 1.6 22.9 5.6 33.3 10.1 10.5 4.5 21.2 10.2 29.4 16.8s16.2 15.1 19.7 22.8c3.5 7.8 3.9 16.9 1.4 23.9" class="hero-contour-delta-ring"></path><path stroke-opacity=".75" stroke-width="1.56" d="M1366.4 602c-4.8 12.5-17.5 24.2-31.3 31.7s-33.3 11.8-51.5 13.4c-18.1 1.7-38.1-.9-57.4-3.5-19.4-2.6-38.6-5.7-58.6-12s-45.4-14.2-61.6-25.9c-16.1-11.6-31.3-29.8-35.5-44.1-4.1-14.2 3.6-29.7 10.6-41.4 6.9-11.8 18.7-21 31-29.3 12.2-8.3 25.7-16.8 42.6-20.4 16.8-3.6 38.9-3.9 58.6-1s40.6 10.4 59.5 18.4c18.9 7.9 38.4 17.6 53.7 29.4 15.2 11.7 31 27 37.7 41.1 6.6 14.1 7 31 2.2 43.6" class="hero-contour-delta-ring hero-contour-delta-accent"></path><path stroke-opacity=".38" stroke-width="1.4" d="M1434.7 621.6c-7.5 18.1-27.3 34.7-48 45.1s-49.8 15.5-76.2 17.2c-26.4 1.8-54.3-3.1-81.9-6.7-27.5-3.7-53.9-6.9-83.3-15.1-29.5-8.3-68.9-18.1-93.3-34.7-24.5-16.6-48.1-44.1-53.6-65-5.5-20.8 9.3-43.2 20.7-60 11.3-16.8 29.6-28.9 47.4-40.6 17.9-11.8 35.8-24.8 59.8-30.1s55.9-5.8 84.1-1.6 57.8 15.5 85.1 26.8c27.2 11.4 55.9 24.5 78.6 41.2 22.8 16.8 47.6 39 57.7 59.6s10.4 45.7 2.9 63.9" class="hero-contour-delta-ring"></path><path stroke-opacity=".45" stroke-width="1.6" d="M1505 641.7c-10.5 23.8-38.3 45.3-66.4 58.2-28.1 13-67.5 18.3-102.1 19.7s-70.1-6.5-105.6-11.1-68.2-7-107.4-16.8c-39.1-9.7-94.2-20.3-127.7-41.7-33.4-21.5-66.5-59.2-73-86.8-6.5-27.5 17.6-57 34.2-78.6s42-35.8 65.5-51c23.6-15.2 45-33.1 75.9-40.2 30.8-7 72.6-7.7 109.2-2.2 36.5 5.6 74.3 20.8 110 35.5 35.8 14.6 73.8 30.5 104.5 52.2 30.6 21.7 65.7 50.9 79.6 78 13.8 27.2 13.8 61 3.3 84.8" class="hero-contour-delta-ring"></path><path stroke-opacity=".52" stroke-width="1.8" d="M1577.2 662.4c-13.8 29.6-50.5 55.6-86.4 70.9-36 15.3-86.2 20-129.1 20.7-43 .8-85.4-10.8-128.6-16.4-43.2-5.5-81.4-6.3-130.7-17-49.2-10.7-121.7-21.2-164.8-47.3-43.2-26-86.8-74.8-93.9-109.2-7.2-34.4 28.3-71.1 51.1-97.4 22.7-26.2 55.9-41.8 85.2-60.3 29.4-18.5 53.4-41.7 90.9-50.6 37.4-9 89.1-9.9 133.8-3 44.8 6.9 90.4 26.5 134.6 44.3s91.8 36 130.9 62.5 85.6 62.7 103.5 96.5c17.8 33.9 17.3 76.8 3.5 106.3" class="hero-contour-delta-ring"></path><path stroke-opacity=".75" stroke-width="2.6" d="M1651.5 683.7c-17.5 35.3-64.1 65.9-108.3 83.2-44.3 17.2-105.8 20.8-157.2 20.4s-100.3-16.3-150.9-22.8c-50.7-6.4-93.6-4.7-153.2-15.9-59.7-11.1-151.2-20.4-204.7-51.1-53.5-30.6-108.7-91-116.1-132.5-7.5-41.4 41.6-85.3 71.3-116.1s71.4-47 106.7-68.7c35.2-21.7 60.9-50.6 104.7-61.5s105.4-12 158.2-3.8c52.7 8.3 105.7 32.4 158.5 53.2 52.7 20.9 110.2 40.9 158.1 72.1s107.1 74.5 129.3 115.1c22.1 40.6 21 93.2 3.6 128.4" class="hero-contour-delta-ring hero-contour-delta-accent"></path><path stroke-opacity=".65" stroke-width="2.2" d="M1727.7 705.6c-21.4 41-78.8 76-131.8 95-53.1 19-126.6 20.7-186.4 18.9-59.9-1.9-114.7-23-172.6-30.3-57.9-7.2-104.6-2.2-175-13.3-70.3-11.1-182.6-18.3-247.1-53.3s-132.4-108-139.9-156.7c-7.5-48.6 57.6-99.8 95-135 37.5-35.1 88.5-51.2 129.7-76s67.6-59.8 117.6-72.7c49.9-12.9 121.3-14.3 182-4.7 60.7 9.7 120.6 38.5 182 62.4 61.3 23.9 128.8 45 186 80.8s130.3 86.3 157.1 133.8c26.7 47.5 24.8 110.1 3.4 151.1" class="hero-contour-delta-ring"></path></g><rect width="1600" height="900" fill="url(#hero-contour-delta-veil)" class="hero-contour-delta-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-contour.mjs from heroes/hero-contour-delta/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #f7f7fb)
     --pulsar-hero-ink    the contour rings   (default #1d1b3a)
     --pulsar-accent      the index rings     (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-contour-delta {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-contour-delta .hero-contour-delta-ground {
  fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-contour-delta .hero-contour-delta-ring {
  fill: none;
  stroke: currentColor;
}
.pulsar-hero-contour-delta .hero-contour-delta-accent {
  stroke: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-contour-delta .hero-contour-delta-ground-stop {
  stop-color: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-contour-delta .hero-contour-delta-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-contour-delta .hero-contour-delta-band-1 {
  transform-origin: 1220px 560px;
  animation-name: hero-contour-delta-band-1;
  animation-duration: calc(17s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-contour-delta-band-1 {
  from {
    transform: translate(-24px, -14px) scale(0.98);
  }
  to {
    transform: translate(24px, 14px) scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-contour-delta .hero-contour-delta-band-1 {
    animation: none;
  }
}