SVG-фильтры для типографики

Когда использовать

Create expressive text with SVG filters and paths while keeping readable semantic content.

Решения для реализации

1. Use unique useId-generated filter and path IDs for every mounted specimen. Duplicate IDs connect separate demos accidentally.
2. Constrain filter bounds and displacement amplitude. Filtered text is a short display effect, not a reading-body style.
3. Use feTurbulence with feDisplacementMap for distortion, feMorphology for ink spread, and textPath for path layout.
4. Pause SVG animation when hidden and provide intact static text under reduced motion. For path outlines, verify the font license before converting text.

Как проверить результат

• Two copies of the component use independent filters.
• The text remains available to assistive technology once.
• Reduced motion renders a readable static sample.

Файлы