How to Make an Animated 404 Page Step-by-Step | HTML CSS | SVG & Particles JS
This tutorial simply shows how to create a responsive animated 404 page and how to combine the tools (HTML, CSS, SVG, and Particles JS) to make this page more engaging and interactive. In brief, you can see step-by-step how to give ID to the SVG elements on Figma and animate them using CSS, and also add lively particles to the background using Particles JS.
🏞️ The image is designed by Freepik: https://www.freepik.com/
⭐Lists:
Swiper JS: • Swiper JS
GSAP: • GSAP
Slider with Vanilla Javascript & CSS: • Slider with Vanilla Javascript & CSS
Background Animation: • Background Animation
CSS Hover Effect: • CSS Hover Effect
👩💻 My Social Profiles:
X: https://x.com/ecemgo
Codepen: https://codepen.io/ecemgo
GitHub: https://github.com/ecemgo
TikTok: / ecemgo
🕔 Timestamps:
0:00 – Intro
0:25 – How to find and download SVG file
1:02 – How to rename SVG elements and export it
2:36 – HTML
3:05 – CSS
7:33 – Particles JS repository and adding source into HTML
8:09 – Javascript - adjusting particles
09:01 – Styling the particles for the background animation