spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/backgrounds/aurora-veil.html7  Desc   : Northern-lights aurora ribbons drifting over a night sky8  ============================================================9-->10<!--svgarden11title: Aurora veil12slug: aurora-veil13category: backgrounds14tags: [background, aurora, blend-mode, blur]15difficulty: advanced16techniques: ["mix-blend-mode", "blur()", periodic-paths, translate-property, layered-opacity]17how_it_works: >18  Each ribbon is one very wide stroked path whose curve repeats every 30019  units, so animating the modern translate property by exactly one period20  loops with no visible seam. A heavy CSS blur() turns the hard strokes into21  soft light, and mix-blend-mode: screen makes overlapping ribbons add their22  light together the way real aurora curtains do against a dark sky. The23  three layers drift at 1×, 1.6× and 2.3× the base duration, so the24  composition slowly evolves and only realigns once every few minutes.25  Where blend modes are unavailable the ribbons simply composite as26  translucent color — dimmer, but never broken.27support: mix-blend-mode on SVG elements needs a modern browser; without it the ribbons fall back to plain translucency.28customizable:29  - { var: "--sg-color",    label: "Aurora color", type: color, default: "#52E6A7" }30  - { var: "--sg-size",     label: "Height",       type: range, min: 120, max: 320, default: 200, unit: px }31  - { var: "--sg-duration", label: "Drift speed",  type: range, min: 6, max: 40, step: 1, default: 14, unit: s }32created: 2026-08-1033-->34<div class="sg-aurora-veil" style="--sg-color:#52E6A7; --sg-size:200px; --sg-duration:14s;">35  <svg viewBox="0 0 600 200" preserveAspectRatio="xMidYMid slice" aria-hidden="true" focusable="false">36    <defs>37      <linearGradient id="sg-aurora-veil-sky" x1="0" y1="0" x2="0" y2="1">38        <stop offset="0" stop-color="#071022" />39        <stop offset="1" stop-color="#161031" />40      </linearGradient>41    </defs>42    <rect class="sg-aurora-veil-bg" x="0" y="0" width="600" height="200" fill="url(#sg-aurora-veil-sky)" />43    <g class="sg-aurora-veil-stars">44      <circle cx="60" cy="38" r="1.1" /><circle cx="170" cy="22" r="0.9" />45      <circle cx="292" cy="46" r="1.2" /><circle cx="405" cy="18" r="0.8" />46      <circle cx="498" cy="52" r="1.1" /><circle cx="552" cy="26" r="0.9" />47    </g>48    <path class="sg-aurora-veil-r1" d="M-20 84 c75 -30 225 30 300 0 c75 -30 225 30 300 0 c75 -30 225 30 300 0" />49    <path class="sg-aurora-veil-r2" d="M-20 112 c90 -22 210 24 300 0 c90 -22 210 24 300 0 c90 -22 210 24 300 0" />50    <path class="sg-aurora-veil-r3" d="M-20 62 c70 -18 230 20 300 0 c70 -18 230 20 300 0 c70 -18 230 20 300 0" />51  </svg>52</div>53<style>54  .sg-aurora-veil {55    width: 100%;56    min-width: 260px;57    height: var(--sg-size);58    overflow: hidden;59    border-radius: 8px;60  }61  .sg-aurora-veil svg {62    display: block;63    width: 100%;64    height: 100%;65  }66  .sg-aurora-veil-stars circle {67    fill: #cdd6f4;68    opacity: 0.6;69  }70  .sg-aurora-veil path {71    fill: none;72    stroke-linecap: round;73    mix-blend-mode: screen;74    animation: sg-aurora-veil-drift var(--sg-duration) linear infinite;75  }76  .sg-aurora-veil-r1 {77    stroke: var(--sg-color);78    stroke-width: 38;79    filter: blur(13px);80    opacity: 0.75;81  }82  .sg-aurora-veil-r2 {83    stroke: #7f77dd;84    stroke-width: 30;85    filter: blur(15px);86    opacity: 0.6;87    animation-duration: calc(var(--sg-duration) * 1.6);88  }89  .sg-aurora-veil-r3 {90    stroke: #3ec7de;91    stroke-width: 22;92    filter: blur(11px);93    opacity: 0.5;94    animation-duration: calc(var(--sg-duration) * 2.3);95  }96  @keyframes sg-aurora-veil-drift {97    from { translate: 0 0; }98    to   { translate: -300px 0; }99  }100</style>101