spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/filters/electric-border.html7  Desc   : Crackling electric outline with a soft glow8  ============================================================9-->10<!--svgarden11title: Electric border12slug: electric-border13category: filters14tags: [filter, electric, glow, border]15difficulty: advanced16techniques: [feTurbulence, feDisplacementMap, "SMIL seed cycling", feMerge-glow]17how_it_works: >18  A clean rounded rect goes through feTurbulence + feDisplacementMap so its19  stroke wanders like an arc of electricity. The crackle is time-based but not20  smooth on purpose: a SMIL animate cycles the turbulence seed through discrete21  values, and every seed is an entirely new noise field, so the border snaps22  between jitter states like real discharge. feGaussianBlur then makes a halo23  from the displaced stroke and feMerge stacks glow twice under the crisp copy —24  layering the same result is the cheap way to intensify a glow without25  another primitive.26customizable:27  - { var: "--sg-color", label: "Arc color", type: color, default: "#57C7F0" }28  - { var: "--sg-size",  label: "Width",     type: range, min: 120, max: 340, default: 200, unit: px }29created: 2026-08-1030-->31<div class="sg-electric-border" style="--sg-color:#57C7F0; --sg-size:200px;">32  <svg viewBox="0 0 200 120" aria-hidden="true" focusable="false">33    <defs>34      <filter id="sg-electric-border-f" x="-25%" y="-25%" width="150%" height="150%">35        <feTurbulence type="turbulence" baseFrequency="0.045 0.09" numOctaves="2" seed="2" result="n">36          <animate attributeName="seed" values="2;7;12;17;23;29;2" dur="0.7s"37            calcMode="discrete" repeatCount="indefinite" />38        </feTurbulence>39        <feDisplacementMap in="SourceGraphic" in2="n" scale="8"40          xChannelSelector="R" yChannelSelector="G" result="jag" />41        <feGaussianBlur in="jag" stdDeviation="3" result="glow" />42        <feMerge>43          <feMergeNode in="glow" />44          <feMergeNode in="glow" />45          <feMergeNode in="jag" />46        </feMerge>47      </filter>48    </defs>49    <rect class="sg-electric-border-frame" x="18" y="18" width="164" height="84" rx="12" />50    <rect class="sg-electric-border-arc" x="18" y="18" width="164" height="84" rx="12"51      filter="url(#sg-electric-border-f)" />52    <path class="sg-electric-border-bolt" d="M106 38 L88 64 h11 l-7 20 19-28 h-11 z" />53  </svg>54</div>55<style>56  .sg-electric-border {57    width: var(--sg-size);58  }59  .sg-electric-border svg {60    display: block;61    width: 100%;62  }63  .sg-electric-border-frame {64    fill: none;65    stroke: var(--sg-color);66    stroke-width: 1;67    opacity: 0.25;68  }69  .sg-electric-border-arc {70    fill: none;71    stroke: var(--sg-color);72    stroke-width: 2.2;73  }74  .sg-electric-border-bolt {75    fill: var(--sg-color);76  }77</style>78