SVG 모폴로지

<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>

.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}

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);