Shoal

<!-- Pulsar by Business Nebula · "hero-contour-shoal" · 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-contour.mjs from heroes/hero-contour-shoal/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #0b0a16)
     --pulsar-hero-ink    the contour rings   (default #ffffff)
     --pulsar-accent      the index rings     (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-contour-shoal {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-contour-shoal .hero-contour-shoal-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-contour-shoal .hero-contour-shoal-ring {
  fill: none;
  stroke: currentColor;
}
.pulsar-hero-contour-shoal .hero-contour-shoal-accent {
  stroke: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-contour-shoal .hero-contour-shoal-ground-stop {
  stop-color: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-contour-shoal .hero-contour-shoal-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-contour-shoal .hero-contour-shoal-band-1 {
  transform-origin: 1160px 280px;
  animation-name: hero-contour-shoal-band-1;
  animation-duration: calc(21s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-contour-shoal .hero-contour-shoal-band-2 {
  transform-origin: 1460px 760px;
  animation-name: hero-contour-shoal-band-2;
  animation-duration: calc(27s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-contour-shoal-band-1 {
  from {
    transform: translate(-24px, -14px) scale(0.98);
  }
  to {
    transform: translate(24px, 14px) scale(1.02);
  }
}
@keyframes hero-contour-shoal-band-2 {
  from {
    transform: translate(24px, 14px) scale(0.98);
  }
  to {
    transform: translate(-24px, -14px) scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-contour-shoal .hero-contour-shoal-band-1,
  .pulsar-hero-contour-shoal .hero-contour-shoal-band-2 {
    animation: none;
  }
}
</style>
<section class="hero">
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="pulsar pulsar-hero pulsar-hero-contour-shoal" data-pulsar="hero-contour-shoal" 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-shoal</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-shoal-veil" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-contour-shoal-ground-stop" offset="0" stop-opacity=".88"></stop><stop class="hero-contour-shoal-ground-stop" offset=".32" stop-opacity=".5"></stop><stop class="hero-contour-shoal-ground-stop" offset=".66" stop-opacity=".1"></stop><stop class="hero-contour-shoal-ground-stop" offset="1" stop-opacity="0"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-contour-shoal-ground"></rect><g class="hero-contour-shoal-band hero-contour-shoal-band-1"><path stroke-opacity=".25" d="M1240.5 265.8c1.7 8.3.3 18.2-3.5 26.6-3.7 8.4-10.9 17.2-19.2 23.8-8.4 6.6-19.8 12.1-30.7 15.6s-23.4 5.3-34.7 5.4-23.4-1.5-33.1-5c-9.7-3.4-18.8-9.2-25.1-15.6s-10.7-14.6-12.7-22.8c-2-8.1-2.4-17.8.8-26.3 3.1-8.5 9.8-18.2 18.2-24.8 8.5-6.6 21.2-11.7 32.3-14.7 11.2-3.1 23.4-3.7 34.6-3.6s22.7 1.2 32.6 4.2c10 3.1 20.4 7.8 27.1 14 6.8 6.2 11.8 14.9 13.4 23.2" class="hero-contour-shoal-ring"></path><path stroke-opacity=".45" stroke-width="1.6" d="M1306.5 254.2c3.4 14.9.9 33.1-6.2 48.3-7 15.2-20.6 31.4-36.1 42.8-15.4 11.4-37.1 20.1-56.6 25.7-19.6 5.7-41 8.1-60.8 8.1s-40.9-2.1-57.8-7.9c-17-5.9-32.7-16-44-27.2-11.2-11.1-19-25-23.7-39.5-4.6-14.5-8.9-31.8-4.2-47.5 4.6-15.6 16.3-34.9 32.1-46.4s42.3-18.6 62.8-22.5 41-1.6 60.4-.9 38 .8 56 5.1c17.9 4.3 38.8 10.4 51.8 20.7s23 26.2 26.3 41.2" class="hero-contour-shoal-ring"></path><path stroke-opacity=".75" stroke-width="2.86" d="M1375.7 242c5.4 21.7 1.6 49-9 71.2s-31.4 46.1-54.5 62.2c-23.2 16-56.1 26.9-84.5 34.1-28.5 7.3-58.2 9.4-86.2 9.3s-57.8-2.1-81.8-10.1-45.9-22.5-62.3-38.1c-16.3-15.7-27.4-34.8-35.7-55.6s-19.5-45.9-14.2-69.1c5.3-23.3 21.9-54.1 45.9-70.3 23.9-16.3 67.4-23.6 97.9-27 30.6-3.5 58.2 4.8 85.3 6.5 27.2 1.7 51.5-.9 77.8 3.8 26.2 4.6 59.6 10.2 79.8 24.1 20.2 13.8 36 37.3 41.5 59" class="hero-contour-shoal-ring hero-contour-shoal-accent"></path></g><g class="hero-contour-shoal-band hero-contour-shoal-band-2"><path stroke-opacity=".25" d="M1516.9 783c-2.6 6.6-7.6 13-13.6 17.5-6 4.4-14.3 7.8-22.4 9-8 1.3-17.6.5-26-1.5s-17-5.8-24.2-10.4-14.1-10.7-18.7-17.1c-4.7-6.4-7.9-14.3-9.2-21.4-1.2-7.2-.5-14.8 1.8-21.5 2.2-6.6 6.1-13.7 11.7-18.4 5.7-4.8 14-8.9 22.2-10.2 8.1-1.2 18.3.4 26.6 2.8 8.4 2.4 16.3 7 23.4 11.7 7 4.6 13.7 10.1 18.7 16.4 5 6.2 9.6 13.9 11.2 21 1.6 7.2 1 15.5-1.5 22.1" class="hero-contour-shoal-ring"></path><path stroke-opacity=".45" stroke-width="1.6" d="M1572.7 805.5c-4.7 13.1-14.9 26.1-26.8 34.8-12 8.6-28.8 15.1-44.8 17-15.9 1.9-34.8-1-50.9-5.4s-31.9-12.1-45.5-21c-13.6-8.8-27.1-19.9-36-32s-15-27-17.5-40.7c-2.6-13.6-1.4-28 2.1-41.3 3.6-13.3 8.7-28.6 19.2-38.7 10.5-10 27.6-19.8 43.8-21.6 16.2-1.9 37.7 4.5 53.6 10.6 15.9 6.2 28.9 17.1 41.9 26.4 13 9.2 25.7 17.6 36.1 28.9 10.3 11.4 21.8 25.5 25.9 39.3 4.1 13.9 3.5 30.7-1.1 43.7" class="hero-contour-shoal-ring"></path><path stroke-opacity=".75" stroke-width="2.86" d="M1631.2 829.2c-6.6 19.8-22.4 39.9-40.6 52.8-18.2 13-44.5 22.5-68.6 24.6-24.2 2.2-52.7-4.3-76.4-11.6-23.6-7.4-45.7-19.4-65.5-32.4-19.8-13.1-40-28.4-53.1-45.9-13.2-17.5-21.8-39.2-25.8-59.3-4.1-20-2.7-40.5 1.4-61s8.3-45.7 23.2-61.9c14.9-16.1 41.5-33.2 66.3-35.1s59.2 12.3 82.5 23.6c23.3 11.4 38.9 30.8 57.3 44.7 18.5 13.9 36.9 23.1 53.3 38.9 16.4 15.9 37.3 35.7 45 56.2 7.7 20.4 7.6 46.5 1 66.4" class="hero-contour-shoal-ring hero-contour-shoal-accent"></path></g><rect width="1600" height="900" fill="url(#hero-contour-shoal-veil)" class="hero-contour-shoal-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-shoal/params.json.
   Consumers set four custom properties on any ancestor:
     --pulsar-hero-bg     the ground          (default #0b0a16)
     --pulsar-hero-ink    the contour rings   (default #ffffff)
     --pulsar-accent      the index rings     (default #8a7df7)
     --pulsar-hero-speed  a rate; 2 is twice as fast, 0.5 half speed */
.pulsar-hero-contour-shoal {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #ffffff);
}
.pulsar-hero-contour-shoal .hero-contour-shoal-ground {
  fill: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-contour-shoal .hero-contour-shoal-ring {
  fill: none;
  stroke: currentColor;
}
.pulsar-hero-contour-shoal .hero-contour-shoal-accent {
  stroke: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-contour-shoal .hero-contour-shoal-ground-stop {
  stop-color: var(--pulsar-hero-bg, #0b0a16);
}
.pulsar-hero-contour-shoal .hero-contour-shoal-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-contour-shoal .hero-contour-shoal-band-1 {
  transform-origin: 1160px 280px;
  animation-name: hero-contour-shoal-band-1;
  animation-duration: calc(21s / var(--pulsar-hero-speed, 1));
}
.pulsar-hero-contour-shoal .hero-contour-shoal-band-2 {
  transform-origin: 1460px 760px;
  animation-name: hero-contour-shoal-band-2;
  animation-duration: calc(27s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-contour-shoal-band-1 {
  from {
    transform: translate(-24px, -14px) scale(0.98);
  }
  to {
    transform: translate(24px, 14px) scale(1.02);
  }
}
@keyframes hero-contour-shoal-band-2 {
  from {
    transform: translate(24px, 14px) scale(0.98);
  }
  to {
    transform: translate(-24px, -14px) scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-contour-shoal .hero-contour-shoal-band-1,
  .pulsar-hero-contour-shoal .hero-contour-shoal-band-2 {
    animation: none;
  }
}