Я пытаюсь нарисовать фигуру с путем, который должен быть уменьшен, как в этом решении Find Parallel или Смещение пути SVG Я использую фильтр "размывание", но с шаблоном он не работает: шаблон деформируется.
Есть ли способ сделать это без решения bezier.js, с чистым SVG/CSS?
Вот пример моей проблемы. Я хочу иметь форму справа с рисунком слева.
<!DOCTYPE html>
<html>
<body>
<svg>
<defs>
<pattern id="circ" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse">
<rect fill="blue" width="100%" height="100%" />
<circle cx="10" cy="10" r="10" fill="green" />
</pattern>
<filter id="erode">
<feMorphology in="SourceGraphic" operator="erode" radius="10"/>
</filter>
<path id="thing" d="M 0,0 H 50 A 35,35 0 1 0 100,50 V 75 C 50,125 0,85 0,85 Z" />
</defs>
<use href="#thing" fill="url(#circ)" width="400" height="400" filter="#erode"/>
<use x="100" href="#thing" filter="url(#erode)" fill="url(#circ)" width="400" height="400" />
</svg>
</body>
</html>