Repository 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