Design Atlas
한국어
✦ Visual effects

SVG morphology

SVG 모폴로지

Grows (dilate) or shrinks (erode) an alpha shape. Dilation thickens strokes until they merge; erosion thins them until thin strokes can break apart.

Also known as: feMorphologyDilate/erode filter
···
html
<svg width="0" height="0"><filter id="morph" x="-20%" y="-20%" width="140%" height="140%">
  <feMorphology id="morphOp" operator="dilate" radius="0"/>
</filter></svg>
<div class="panel"><h1 class="outline" id="txt">FLOW</h1></div>
<div class="label" id="l">dilate(0)</div>
css
.panel{position:relative;width:min(80%,320px);height:120px;border-radius:16px;background:#181822;display:grid;place-items:center}
.outline{margin:0;color:#fff;font:500 13vmin/1 sans-serif;letter-spacing:.02em;filter:url(#morph)}
.label{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);padding:4px 10px;border-radius:999px;
  background:rgba(0,0,0,.55);color:#fff;font:600 12px/1.4 monospace}
js
const op = document.getElementById('morphOp');
const l = document.getElementById('l');
const STEPS = [['dilate',0],['dilate',2],['dilate',4],['dilate',6],['erode',0],['erode',1],['erode',2],['erode',3]];
let i = 0;
function apply(){
  const [operator, radius] = STEPS[i];
  op.setAttribute('operator', operator);
  op.setAttribute('radius', String(radius));
  l.textContent = operator + '(' + radius + ')';
  i = (i + 1) % STEPS.length;
}
apply();
setInterval(apply, 900);

feMorphology takes the max (dilate) or min (erode) alpha value within a radius around each pixel — exactly the dilation/erosion operations from classic image processing. You can give separate x and y radii.

Dilate fattens the strokes of text or an icon until neighbouring strokes fuse together; erode thins them until the narrowest parts break apart first — watch a thin display font crack apart at higher erode steps in the demo.

Cost grows roughly with the square of the radius (it's a min/max convolution), so large radii get expensive. Dilated outlines look blocky because they follow the pixel grid directly; stacking a light feGaussianBlur afterward rounds the corners back out. Support is solid across Chromium, Firefox and Safari.

When to use

For thickening/thinning an icon outline, or cleaning up noise at a mask's edge. Keep the radius small, and add a light blur afterward if the blocky result bothers you.