Анимация пазлов, как сделать?

Question

[ch-aqwer]

Добрый день! Скажите пожалуйста, как лучше такое реализовать?

По сути простые пазлы, нужно, чтобы они по клику просто эффектно исчезли(разложились). Понимаю, что варианты svg или canvas, но знания по ним совсем начальние, возможно есть какие-то примеры, туториалы?
Буду очень благодарен за помощь!

Answer 1

[Максим Тимофеев]

варианты без svg или canvas будут сложнее первых. На изучение svg у Вас уйдет день от силы, но web завтра без svg не будет. Так что рано или поздно придется изучить, так почему бы не сегодня?
Ну и в любом случае понадобится javascript. Хоть с svg хоть без.

Comments

[ch-aqwer]

Спасибо за отзыв! Мне нужно сначала нужно сохранить каждый пазл в SVG, а затем спозиционировать их? или как это делаеться правильно? С javascript-ом проблем нет.

[Максим Тимофеев]

ch-aqwer: Вам нужно запрограммировать контур одного пазла в svg а потом размножить его поворачивая на 90 градусов каждый второй используя use и/или js и раскрасить разными цветами через css использую :nth-of-type например или с помощью того же js.

[Максим Тимофеев]

ch-aqwer: для работы в svg советую использовать incscape inkscape.paint-net.ru

[ch-aqwer]

Максим Тимофеев: Спасибо)