Strata

<!-- Pulsar by Business Nebula · "hero-contour-strata" · 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-strata/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-strata {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-contour-strata .hero-contour-strata-ground {
  fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-contour-strata .hero-contour-strata-ring {
  fill: none;
  stroke: currentColor;
}
.pulsar-hero-contour-strata .hero-contour-strata-accent {
  stroke: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-contour-strata .hero-contour-strata-ground-stop {
  stop-color: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-contour-strata .hero-contour-strata-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-contour-strata .hero-contour-strata-band-1 {
  transform-origin: 1100px 450px;
  animation-name: hero-contour-strata-band-1;
  animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-contour-strata-band-1 {
  from {
    transform: translate(-34px, -8px) scale(0.98);
  }
  to {
    transform: translate(34px, 8px) scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-contour-strata .hero-contour-strata-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-strata" data-pulsar="hero-contour-strata" 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-strata</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-strata-veil" x1="0" x2="1600" y1="0" y2="0" gradientUnits="userSpaceOnUse"><stop class="hero-contour-strata-ground-stop" offset="0" stop-opacity=".88"></stop><stop class="hero-contour-strata-ground-stop" offset=".32" stop-opacity=".5"></stop><stop class="hero-contour-strata-ground-stop" offset=".66" stop-opacity=".1"></stop><stop class="hero-contour-strata-ground-stop" offset="1" stop-opacity="0"></stop></linearGradient></defs><rect width="1600" height="900" class="hero-contour-strata-ground"></rect><g class="hero-contour-strata-band hero-contour-strata-band-1"><path stroke-opacity=".25" d="M1222.3 441.5c.5 2.7-4 6.2-11.5 9.3s-19.8 6.4-33.5 9.2c-13.8 2.7-31.9 5.3-48.9 7.1-17.1 1.7-37 2.8-53.4 3.2-16.4.3-32.3-.2-45.2-1-13-.9-24.2-2.3-32.7-4.1-8.4-1.8-16.2-4.1-18.2-6.7-2-2.7-.7-6.2 6.2-9.3 7-3.1 21.1-6.8 35.6-9.4 14.6-2.7 34.4-4.9 51.7-6.4 17.2-1.6 35.2-2.4 51.7-2.9 16.4-.5 32.9-.6 46.8.1 13.9.6 27.9 1.7 36.5 3.5 8.5 1.8 14.3 4.6 14.9 7.4" class="hero-contour-strata-ring"></path><path stroke-opacity=".75" stroke-width="1.65" d="M1299.3 436.1c1.1 4.5-6.5 10.2-18.7 15.2-12.3 5-32.3 10.5-54.7 14.9s-52.1 8.8-79.8 11.5c-27.7 2.8-60.1 4.5-86.3 4.9-26.3.5-50.7-.6-71.2-2-20.6-1.4-37.9-3.6-52.1-6.4s-28.7-6.2-33.1-10.5c-4.3-4.2-4.1-10 6.9-15 11-5.1 35.1-11.3 59.3-15.5s57.8-7.6 85.9-10c28.1-2.3 56.4-3.4 82.6-4.1s52.2-.9 74.8-.1c22.5.9 46.3 2.5 60.8 5.3 14.4 2.9 24.4 7.3 25.6 11.8" class="hero-contour-strata-ring hero-contour-strata-accent"></path><path stroke-opacity=".38" stroke-width="1.53" d="M1377.5 430.6c1.9 6.2-9 14.2-26 21.2s-45 14.7-76.3 20.8c-31.2 6.1-72.7 12.2-111.1 15.9-38.5 3.7-83.6 5.9-119.4 6.3-35.9.5-67.9-1.4-95.7-3.4s-50.8-4.9-71.1-8.6-43-7.9-50.6-13.7-9.9-13.9 5-21c15-7.1 50-15.9 84.4-21.7s83-10.2 122.1-13.2 76.9-4.1 112.7-4.9c35.8-.9 70.6-1.5 102-.4 31.4 1 65.8 2.8 86.5 6.6 20.6 3.8 35.6 9.9 37.5 16.1" class="hero-contour-strata-ring"></path><path stroke-opacity=".45" stroke-width="1.8" d="M1457 425c2.8 8-11.5 18.3-33.4 27.3-22 9-58 18.9-98.2 26.8-40.3 7.8-93.9 15.7-143.2 20.4-49.3 4.6-107.3 7-152.4 7.4-45.2.4-84.1-2.4-118.8-5-34.7-2.7-62.8-6.2-89.5-10.7-26.8-4.6-59.4-9.5-71-16.8-11.7-7.2-17.8-17.7.8-26.9s65.7-20.8 110.8-28.2c45.2-7.3 109.8-12.5 160.1-16.1 50.4-3.6 97-4.3 142.1-5.3s88.3-2 128.6-.8c40.3 1.1 86.1 3 113.5 7.6 27.3 4.7 47.7 12.4 50.6 20.3" class="hero-contour-strata-ring"></path><path stroke-opacity=".52" stroke-width="2.07" d="M1537.7 419.4c4 9.6-14.1 22.4-41 33.4s-71.1 23.2-120.4 32.8c-49.4 9.6-115.5 19.3-175.8 24.9-60.2 5.5-131.2 8.2-185.5 8.4-54.3.3-99-3.8-140.3-7.1s-74-7.3-107.6-12.6-77.5-10.6-94.1-19.3c-16.7-8.8-27.9-21.7-5.8-33 22.2-11.3 82.2-25.9 138.6-34.8 56.4-9 138.2-14.8 200-18.8s116.5-4.2 170.7-5.3 105.1-2.5 154.5-1.4c49.4 1.2 107.3 2.9 141.8 8.3 34.4 5.5 60.9 14.8 64.9 24.5" class="hero-contour-strata-ring"></path><path stroke-opacity=".75" stroke-width="3.03" d="M1619.6 413.7c5.3 11.3-16.6 26.5-48.6 39.6-31.9 13.1-84.5 27.6-143.1 39-58.7 11.3-137.6 22.9-208.8 29.3-71.3 6.5-155.6 9.2-218.7 9.2-63.2-.1-112.9-5.5-160.5-9.4-47.6-4-84.2-8.5-125-14.5s-97.5-11.5-120-21.6-40.3-25.5-14.9-39c25.5-13.4 99.5-31.2 167.8-41.7 68.2-10.5 168.3-16.7 241.7-21.1 73.4-4.3 135.5-3.7 198.5-4.9 63.1-1.1 121.2-3.1 179.7-2.1 58.6 1.1 129.6 2.4 171.6 8.6 41.9 6.2 75 17.2 80.3 28.6" class="hero-contour-strata-ring hero-contour-strata-accent"></path><path stroke-opacity=".65" stroke-width="2.6" d="M1702.7 407.9c6.8 13.1-19.2 30.8-56.2 46-37.1 15.2-98.1 31.9-166.2 45.1s-160.1 26.7-242.5 33.9c-82.4 7.3-180.1 10-251.9 9.6-71.9-.4-125.6-7.3-179.1-12s-93.6-9.6-142-16.2-119.5-12-148.7-23.5c-29.1-11.4-55-29.5-26.3-45.1 28.6-15.7 117.6-36.8 198.2-48.8s200.2-18.6 285.4-23.1c85.1-4.5 153.9-2.9 225.6-4 71.6-1.2 136.4-3.9 204.2-3s152.6 1.6 202.6 8.5c49.9 6.8 90.1 19.5 96.9 32.6" class="hero-contour-strata-ring"></path></g><rect width="1600" height="900" fill="url(#hero-contour-strata-veil)" class="hero-contour-strata-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-strata/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-strata {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--pulsar-hero-ink, #1d1b3a);
}
.pulsar-hero-contour-strata .hero-contour-strata-ground {
  fill: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-contour-strata .hero-contour-strata-ring {
  fill: none;
  stroke: currentColor;
}
.pulsar-hero-contour-strata .hero-contour-strata-accent {
  stroke: var(--pulsar-accent, #8a7df7);
}
.pulsar-hero-contour-strata .hero-contour-strata-ground-stop {
  stop-color: var(--pulsar-hero-bg, #f7f7fb);
}
.pulsar-hero-contour-strata .hero-contour-strata-band {
  transform-box: view-box;
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.pulsar-hero-contour-strata .hero-contour-strata-band-1 {
  transform-origin: 1100px 450px;
  animation-name: hero-contour-strata-band-1;
  animation-duration: calc(23s / var(--pulsar-hero-speed, 1));
}
@keyframes hero-contour-strata-band-1 {
  from {
    transform: translate(-34px, -8px) scale(0.98);
  }
  to {
    transform: translate(34px, 8px) scale(1.02);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-hero-contour-strata .hero-contour-strata-band-1 {
    animation: none;
  }
}