Squircle реализация на css/js
Дизайнер хочет на сайте все скругления(картинок и кнопок) реализовать с помощью squircle, что это можно прочитать тут
Я пока нашла два варианта:
на чистом css в помощью before и after, но этот вариант подходит только для элементов со сплошной заливкой цветом пример;
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="css,result" data-user="rogie" data-slug-hash="alBcH" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="CSS Squircle">See the Pen CSS Squircle by Rogie (@rogie) on CodePen.
с помощью Squircley.js он позволяет менять параметры svg, но тогда нужно загружать картинки только в формате svg пример;
с помощью houdini, но у него очень плохая поддержка пример;
Может кто-то сталкивался с подобной проблемой? В идеале нужно найти универсальный способ и для картинок(без привязки к формату) и для элементов с заливкой цветом.