Ink bleed reveal

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/filters/ink-bleed-reveal.html
  Desc   : Content revealed by an organically spreading ink blot
  ============================================================
-->
<div class="sg-ink-bleed-reveal" style="--sg-color:#7F77DD; --sg-size:240px;">
  <svg viewBox="0 0 200 100" aria-hidden="true" focusable="false">
    <defs>
      <filter id="sg-ink-bleed-reveal-rough" x="-40%" y="-40%" width="180%" height="180%">
        <feTurbulence type="fractalNoise" baseFrequency="0.09" numOctaves="3" seed="7" result="n" />
        <feDisplacementMap in="SourceGraphic" in2="n" scale="28" xChannelSelector="R" yChannelSelector="G" result="torn" />
        <feMorphology in="torn" operator="dilate" radius="1.4" />
      </filter>
      <mask id="sg-ink-bleed-reveal-m">
        <rect width="200" height="100" fill="black" />
        <circle cx="100" cy="50" r="2" fill="white" filter="url(#sg-ink-bleed-reveal-rough)">
          <animate attributeName="r" values="2;78;78;2" keyTimes="0;0.45;0.8;1" dur="6s" repeatCount="indefinite" />
        </circle>
      </mask>
    </defs>
    <g mask="url(#sg-ink-bleed-reveal-m)">
      <rect class="sg-ink-bleed-reveal-panel" x="10" y="14" width="180" height="72" rx="10" />
      <text class="sg-ink-bleed-reveal-word" x="100" y="61">ink bleed</text>
    </g>
  </svg>
</div>
<style>
  .sg-ink-bleed-reveal {
    width: var(--sg-size);
  }
  .sg-ink-bleed-reveal svg {
    display: block;
    width: 100%;
  }
  .sg-ink-bleed-reveal-panel {
    fill: var(--sg-color);
    opacity: 0.14;
  }
  .sg-ink-bleed-reveal-word {
    font-family: inherit;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 1px;
    text-anchor: middle;
    fill: var(--sg-color);
  }
</style>