Здесь представлены различные примеры анимации на canvas. Вы сможете сделать с их помощью дождь, фейерверк, звезды или системы частиц.
Примеры анимации либо запускаются сами, либо требуют от вас некоторых действий - клика по canvas или проведения мышью. Пробуйте и изучайте вкладку JS
Дождь от Max Ruigewaard
See the Pen Rain on HTML5 Canvas by Elen (@ambassador) on CodePen.18892
Снег от Abhishek Sachan
See the Pen Clipped Text with Animation by Elen (@ambassador) on CodePen.0
Фейерверк от Luke Shimkus
Можно добавлять фейерверк кликом по странице или подождать, пока он запустится сам.
See the Pen HTML5 canvas and javascript fireworks tutorial by Elen (@ambassador) on CodePen.18892
Фейерверк от Triana Padilla Holguín
See the Pen #codevember - 5 - Light by Triana Padilla Holguín (@trianaph) on CodePen.18892
Анимированное появление логотипа Codepen от Chaz
See the Pen codepen star animate (canvas) by Elen (@ambassador) on CodePen.18892
Частицы, складывающиеся в слово Codepen от Lennart Hase
See the Pen CODEPEN in Particles (Html5 Canvas) by Elen (@ambassador) on CodePen.18892
Загрузчик для сайта от Lennart Hase
See the Pen html5 canvas loader by Elen (@ambassador) on CodePen.18892
Рисование текстом от Tim Holman
Кликните и рисуйте кривые текстом разного размера.
See the Pen Drawing with text by Elen (@ambassador) on CodePen.18892
Анимированные эффекты при прокрутке страницы от Ramsay Lanier
See the Pen Crazy Awesome Canvas Animation by Elen (@ambassador) on CodePen.18892
Система частиц от Vincent Garreau
Код основан на использовании библиотеки particles.js
See the Pen particles.js by Vincent Garreau (@VincentGarreau) on CodePen.18892
Вырастающие линии от Sean Free
See the Pen Growth II by Sean Free (@seanfree) on CodePen.18892
Анимация бегущих вниз стрелок от Faisal Jawed
See the Pen Arrowtrix (Matrix Arrows) by Faisal Jawed (@faisal-jawed) on CodePen.18892
Аквариум от Konstantin Balashev
Анимация букв "А", превращающихся то ли в стрелки, то ли в рыб, то ли в червяков.
See the Pen Canvas animetion by Elen (@ambassador) on CodePen.18892
Конфетти по клику от J Scott Smith
See the Pen Confetti Cannon by J Scott Smith (@jscottsmith) on CodePen.18892
Падающие конфетти от Linmiao Xu
Очень натурально падают. Праздничное настроение к Новому году обеспечено. Еще и на движения мыши реагируют.
See the Pen Falling Confetti by Elen (@ambassador) on CodePen.18892
Всплавающие частицы от Naoya
В отличие от конфетти, частицы в этом примере всплывают снизу вверх.
See the Pen particle by Naoya (@nxworld) on CodePen.18892
Деление клеток от Fabio Ottaviani
See the Pen Mitosys Canvas by Fabio Ottaviani (@supah) on CodePen.0
Сияние с паралакс-эффектом от Tibix
See the Pen 💎 Crystal Parallax 💎 by Tibix (@Tibixx)
on CodePen.0
Звездное небо от Giana
See the Pen Stars by Elen (@ambassador) on CodePen.18892
Анимация частиц на фоне звездного неба от Marco Guglielmelli
See the Pen Animated Background by Elen (@ambassador) on CodePen.18892
Заставка в виде звездного неба от Nodws
Можно ускорить полет звезд.
See the Pen Stars screensaver by Nodws (@nodws) on CodePen.18892
Анимированная сетка от Tom Miller
Сделано с помощью библиотеки GSAP 3.0
See the Pen GSAP 3.0 - Canvas Color Grid w/ stagger by Tom Miller (@creativeocean) on CodePen.18892
Эффект разлетающихся кругов и частиц при клике от Alex Zaworski
See the Pen Color Changin' by Elen (@ambassador) on CodePen.18892
Летающие частицы от Hiba Codes
Проведите мышкой - и получите хвост из летающих частиц. Чем-то напоминает рой пчел, не так ли?
See the Pen Practice | Gravity balls to mouse study by @FabioG by Hiba Codes (@hibacodes) on CodePen.18892
Интерактивные движущиеся круги от Y.ENDO
See the Pen ParticleVisual by Y.ENDO (@y_endo) on CodePen.18892
Облачная маска от Chris Neale
See the Pen Canvas Cloud by Chris Neale (@onion2k) on CodePen.0
Страница портфолио от Yahia Refaiea
Очень интересная анимация частиц, из которой появляется фото.
See the Pen Personal Website - Yahia Refaiea [Beta] by Yahia Refaiea (@YahiaRefaiea) on CodePen.18892
Коллекция pen-ов с анимацией в canvas от Dev Loop
Заполнение точками доступного пространства
Пожалуй, такой пример подойдет для медитации
See the Pen Circle Packing by Dev Loop (@dev_loop) on CodePen.18892
Текстовый дождь из SVG-тучки
See the Pen Matrix Rain by Dev Loop (@dev_loop) on CodePen.18892
Интерактивные точки
See the Pen Glowing Particles by Dev Loop (@dev_loop) on CodePen.18892
По морям, по волнам
Пример не закончен согласно комментарию автора. Но все равно работает.
See the Pen Canvas Waves by Dev Loop (@dev_loop) on CodePen.18892
Настраиваемые волны
Автор isladjan
See the Pen Waves animation in Canvas by isladjan (@isladjan) on CodePen.0
Еще один вариант волны от Mipete07
See the Pen Basic Wind Strip by Mipete07 (@mipete07) on CodePen.0
Вперед, к звездам
See the Pen Into The Stars by Dev Loop (@dev_loop) on CodePen.18892
Удаляющиеся шары
See the Pen Particles And Gravity by Dev Loop (@dev_loop) on CodePen.18892
Очень красиво, супер!!!