What you’ll learn
Draw and style multiline text on HTML canvas
Convert text into animated particle system
Apply physics and advanced animation techniques
Become a master of web animation.
From drawing a single letter to multiline animated particle text. In this HTML canvas crash course we will go from basics to advanced in a single class. We will cover everything you need to know about using fonts and drawing text on HTML canvas. Let’s explore what’s possible in modern front-end web development and turn text into complex animated particle systems.
Experiment with code
Learn how to create the base version of the effect with me step by step. Apply constellations algorithm for a completely different visual effect. Learn how to use canvas gradients, custom web fonts and how to change particle shapes and physics to get different visuals and movement.
This technique will also work with company LOGOS, even if the logo is a combination of text, symbols and images.
Source code included
With the final lesson you can download the complete source code, as well as some of my experimental variations of the codebase.
From basics to advanced
The second part will cover more advanced algorithms. We will learn how to draw multiline centered text on HTML canvas, how to turn it into particles, how to make those particle systems interactive and much more.
Have fun! 🙂
Who this course is for:
- Creative coders curious about advanced web animation