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