Как правильно создавать интерактивные геометрические фигуры?

Всем привет!
Дизайнер нарисовал такую фигуру, при этом на ней имеется комбинация всевозможных украшательств, таких, как тень и градиент. В результате при наведении на неё еще должен быть интерактив.

Побродив на просторах интернета нашел 3 способа решения данного вопроса, но все имеют свои недостатки и вопросы.

1. CSS
Сначала я конечно же попробовал нарисовать при помощи CSS. При использовании clip-path, в данном случае не видна тень, которую делал через box-shadow + плоха поддержка.

Потом я решил просто нарисовать квадрат и повернуть его на нужный угол и использовать overflow: hidden, но тут меня волнует адаптация и анимация.

2. Canvas
Вроде бы все получилось, все нарисовал, но почему-то при загрузке на телефоне, качество отвратное. При этом высота вычисляется в зависимости от высоты и ширины экрана. Из-за чего это может быть? Высота и ширина холсту тоже задается в зависимости от параметров экрана.

3. SVG
Тоже удалось реализовать при помощи библиотеки snap.svg. При этом при скорлле просидает fps и градиент какой-то ломаный (проблема из-за добавления тени через filter), отсутствуют плавные переходы.

Есть ли какие-то советы по анимации?

Возможно кто-то реализовывал подобное? Буду очень благодарен за любую помощь!

Фигура
5d12354a1c298956114360.png

Анимация
5d12362143e58177080652.png
  • Вопрос задан
  • 453 просмотра
Пригласить эксперта
Ответы на вопрос 2
@antares4045
Если сдюжите при помощи чистого css -- это будет сильная победа, ибо css всё-таки про создание стилей а не отрисовку с нуля, но наверное, в вебе всё, что сделано на нём без серьёзных огрехов -- самое производительное. Но признаться честно, я вообще не представляю себе небходимого инструментария в css;
Канвас многим хорош, но он хочет чтобы вы решили много проблем, прочитали его мануалы и тогда будет вам счастье. Раз вместо того, чтобы гуглить правила ресайза для него, вы пошли писать на форум -- это тоже врядли ваш путь (без претензии: это нормально);
Осталось svg. Для того чтобы он работал, тоже надо учиться, но всевозможных материалов по нему максимальное количество. Суть вашей анимации я, признаться честно, не понял, но вероятно, проблема в том, что анимация по умолчанию идёт в режиме ускорение-замедление, и если вы скажете ей проходить по линейной временной функции, главная ваша проблема отпадёт. И да, svg лучше всего подходит для наведения интерактива. Скорее всего вам стоит разобраться как работает svg сам по себе и не пользоваться сторонними фреймворками, т.к. высока вероятность, что выбранный вами действительно кушает ощутимую производительность.
Ответ написан
@skuvaWeb
Варианта 2,
1) canvas (скорее всего качество плохое, потому что на телефоне высокий DPI, и canvas нужно увеличивать в 2-3 раза, почитайте об этом)
2) WebGl, можете использовать нативный, придется немного запарится, но нарисовать градиентный треугольник сможете. Либо возьмите Pixi.js , это обертка над webGl, с ним будет проще. Погуглите про displacementFilter в pixi.js, как раз эффект "волны" получится)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
от 85 000 до 100 000 руб.
PeoplePass Москва
от 100 000 до 200 000 руб.
EducaGroup Санкт-Петербург
от 90 000 руб.
21 янв. 2020, в 13:30
6000 руб./за проект
21 янв. 2020, в 13:22
3000 руб./за проект
21 янв. 2020, в 13:05
700 руб./за проект