Electric border

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/filters/electric-border.html
  Desc   : Crackling electric outline with a soft glow
  ============================================================
-->
<div class="sg-electric-border" style="--sg-color:#57C7F0; --sg-size:200px;">
  <svg viewBox="0 0 200 120" aria-hidden="true" focusable="false">
    <defs>
      <filter id="sg-electric-border-f" x="-25%" y="-25%" width="150%" height="150%">
        <feTurbulence type="turbulence" baseFrequency="0.045 0.09" numOctaves="2" seed="2" result="n">
          <animate attributeName="seed" values="2;7;12;17;23;29;2" dur="0.7s"
            calcMode="discrete" repeatCount="indefinite" />
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" in2="n" scale="8"
          xChannelSelector="R" yChannelSelector="G" result="jag" />
        <feGaussianBlur in="jag" stdDeviation="3" result="glow" />
        <feMerge>
          <feMergeNode in="glow" />
          <feMergeNode in="glow" />
          <feMergeNode in="jag" />
        </feMerge>
      </filter>
    </defs>
    <rect class="sg-electric-border-frame" x="18" y="18" width="164" height="84" rx="12" />
    <rect class="sg-electric-border-arc" x="18" y="18" width="164" height="84" rx="12"
      filter="url(#sg-electric-border-f)" />
    <path class="sg-electric-border-bolt" d="M106 38 L88 64 h11 l-7 20 19-28 h-11 z" />
  </svg>
</div>
<style>
  .sg-electric-border {
    width: var(--sg-size);
  }
  .sg-electric-border svg {
    display: block;
    width: 100%;
  }
  .sg-electric-border-frame {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 1;
    opacity: 0.25;
  }
  .sg-electric-border-arc {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 2.2;
  }
  .sg-electric-border-bolt {
    fill: var(--sg-color);
  }
</style>