spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/filters/ink-bleed-reveal.html7  Desc   : Content revealed by an organically spreading ink blot8  ============================================================9-->10<!--svgarden11title: Ink bleed reveal12slug: ink-bleed-reveal13category: filters14tags: [filter, mask, ink, reveal]15difficulty: advanced16techniques: [animated-mask, feTurbulence, feDisplacementMap, feMorphology]17how_it_works: >18  The reveal is a plain white circle growing inside a mask — but the circle19  passes through a filter before the mask samples it, and that changes20  everything. feTurbulence + feDisplacementMap chew the circle's rim into an21  irregular coastline, and feMorphology dilates the result so thin tendrils22  thicken like ink wicking into paper. Because masks read luminance, whatever23  the filter does to the white shape directly sculpts what's visible: filter24  the mask, not the artwork, and any reveal can borrow any texture.25customizable:26  - { var: "--sg-color", label: "Ink",   type: color, default: "#7F77DD" }27  - { var: "--sg-size",  label: "Width", type: range, min: 140, max: 380, default: 240, unit: px }28created: 2026-08-1029-->30<div class="sg-ink-bleed-reveal" style="--sg-color:#7F77DD; --sg-size:240px;">31  <svg viewBox="0 0 200 100" aria-hidden="true" focusable="false">32    <defs>33      <filter id="sg-ink-bleed-reveal-rough" x="-40%" y="-40%" width="180%" height="180%">34        <feTurbulence type="fractalNoise" baseFrequency="0.09" numOctaves="3" seed="7" result="n" />35        <feDisplacementMap in="SourceGraphic" in2="n" scale="28" xChannelSelector="R" yChannelSelector="G" result="torn" />36        <feMorphology in="torn" operator="dilate" radius="1.4" />37      </filter>38      <mask id="sg-ink-bleed-reveal-m">39        <rect width="200" height="100" fill="black" />40        <circle cx="100" cy="50" r="2" fill="white" filter="url(#sg-ink-bleed-reveal-rough)">41          <animate attributeName="r" values="2;78;78;2" keyTimes="0;0.45;0.8;1" dur="6s" repeatCount="indefinite" />42        </circle>43      </mask>44    </defs>45    <g mask="url(#sg-ink-bleed-reveal-m)">46      <rect class="sg-ink-bleed-reveal-panel" x="10" y="14" width="180" height="72" rx="10" />47      <text class="sg-ink-bleed-reveal-word" x="100" y="61">ink bleed</text>48    </g>49  </svg>50</div>51<style>52  .sg-ink-bleed-reveal {53    width: var(--sg-size);54  }55  .sg-ink-bleed-reveal svg {56    display: block;57    width: 100%;58  }59  .sg-ink-bleed-reveal-panel {60    fill: var(--sg-color);61    opacity: 0.14;62  }63  .sg-ink-bleed-reveal-word {64    font-family: inherit;65    font-size: 32px;66    font-weight: 700;67    letter-spacing: 1px;68    text-anchor: middle;69    fill: var(--sg-color);70  }71</style>72