Member-only story

Happy Holi 2024 Design Animation

On this Holi day, I thought of sprinkling some coding colors to celebrate the festival digitally. Because why just throw powdered colors when you can splash pixels with code? Let’s turn this festival of India into a coding fiesta!

Sukhpinder Singh | C# .Net
JavaScript in Plain English
14 min readMar 25, 2024

--

Introduction

I am designing the festival to a whole new level — a digital Holi Celebration filled with CSS and JS colors and virtual sparkles!

The below demo consist of the following features

  • Change color with mouse click
  • Sparkle color as you move the mouse

Visual Demonstration

A codepen to play with https://codepen.io/ssukhpinder/pen/ExJXggX?editors=0010

Complete Code

Please find below the complete or refer to the Github gist

Html code

<canvas></canvas>
<div>Happy Holi 2024</div>

CSS

html, body {
overflow: hidden;
padding:50px;
color:#fff;
}
canvas {
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:0.5

--

--

Published in JavaScript in Plain English

New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.

Written by Sukhpinder Singh | C# .Net

.Net developer 👨‍💻 who's 100% convinced my bugs are funnier than yours. 🐛💥 #BugLife Pubs: https://medium.com/c-sharp-programming

No responses yet

Write a response