Create this amazing happy holi colors effects.
I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.
Demo
See the Pen Happy Holi by Rashmi Bansal (@rashmibansal) on CodePen.
HTML Code
Starter Template
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSS --> <link rel="stylesheet" href="style.css"> <title>Happy Holi Colors Effect using HTML CSS and JavaScript - Coding Torque</title> </head> <body> <!-- Further code here --> <script src="script.js"></script> </body> </html>
Paste the below code in your <body>
tag.
<html> <head> </head> <body> <h1>Happy Holi</h1> <svg xmlns="http://www.w3.org/2000/svg" id="splash" class="svg-box" viewBox="0 0 744.1 1052.4"> <path id="splash_path" stroke-width=".7" stroke="#000" d="M386.9 38.2c-2.1.1-4.2.4-6.4.8-14.6 8.3 19.5 75.5 17.1 106.4 11.9-36.8 12.1-56.6 8.4-82.1-3-20.7-10.2-25.3-19.1-25zm96.4 69.4c-2.3.1-4.6.8-6.9 2.4-10.6 7.7-1.7 23.8-1.7 23.8-2.8 6.6 20.3 4 20.3 4 12.6.2 3.3-22.6 3.3-22.6s-6.9-7.9-15-7.7zM467 148.4a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm-69.8 3.2c-5.8 14.6-16.3 46.1-43.2 53.5-26.9 7.4-3.8-44.7-37.6-30.8-25.4 10.5 8.5 27.6-14.1 44.2-22.7 16.6-58.9-2.1-58.9-2.1s40.8 33.9 26.1 58.2c-14.7 24.3-73.3-28.4-85.8-8.3-47.4 76.4 75.5 25.9 70.5 54.2-5 28.2-75.3 34.9-75.3 34.9s96.6-1.5 104.1 25.8-79.5 20-72.6 48.1c11.6 47.3 51.5-26.2 68.7-3.3 17.2 22.9.6 45.5.6 45.5s15.5-16.7 38.6-1.6c23.1 15.2-27 39.9-1.9 50.9s21.1-38.9 48.5-34c27.4 4.9 6.4 56.8 6.4 56.8s21.7-52.3 48.7-58c27-5.7 23.3 79.9 53.6 62.9 24-13.5-29.6-68.1-7.8-85.5 21.7-17.4 58.2 30.1 58.2 30.1s-47.3-61.6-32.2-85.4c15-23.8 73.6 33.1 83 5.8 9.3-27.3-58-20.2-54.7-48.6 1.2-10.6 9.7-15.1 19.9-16.6-21.8-3.6-45.1-10.9-48.1-25.7-5.6-28.5 98.7-36.9 86.8-62.6-11.8-25.7-66.8 20.6-83.5-2.6-12.8-17.8-1.6-26.3 4.3-29.4-7.1 2.7-25.4 7.6-43.5-4.7-23.1-15.8 32.1-29.6 6.2-38.9-26-9.2-25.4 20.7-52.9 17.1-27.5-3.7-12-50.1-12-50.1zm102.2 76.6c2-.8 3.2-1.4 3.2-1.4s-1.4.4-3.2 1.4zm40.4 120.2c20.1 3.3 38.7 3.5 38.7 3.5s-21.7-6-38.7-3.5zM178.5 153.1c-4.8.1-7.9 3.1-10.8 6.8-3.6 11.7 54.3 32.1 70.6 50.3-14.3-26.1-25.5-37.1-42.2-49.3-7.8-5.7-13.4-7.8-17.6-7.7zm367.9 18.6c-14.1.5-22.4 39.1-38.8 52.7 25.8-14.2 35.3-23.2 44.9-35.8 9.6-12.6 3.1-15.3-6.1-16.9zm115.2 27.7c-16.8 0-38.6 8.2-38.6 24.9 0 16.6 13.7 30.1 30.5 30.1s30.5-13.5 30.5-30.1-5.5-24.9-22.4-24.9zm-492.6 7a10 12 0 0 0-10 12 10 12 0 0 0 10 12 10 12 0 0 0 10-12 10 12 0 0 0-10-12zm-40.6 32.9c-2 .1-4.1.4-6.1 1.1-15 5.3-14.3 31.5-14.3 31.5s-.6 21.5 15.3 21.5 37.7-24.5 37.7-24.5c7.3-4.2-13-30.4-32.7-29.6zm477.6 6.1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zM137.6 356.5c-32.9.1-54.8 5.7-80.9 15.4-33.4 12.4-32.7 25.3-27.5 39.6 13.9 16 97.1-47.5 139-53.7-11.3-.9-21.4-1.3-30.6-1.2zm461.5.9c33.5 19.3 53 29 77.4 45.2 21.5 14.2 31.7 4 32-8.1-5.1-16-79.7-28.3-109.4-37.1zM274.5 474.9c-15 14.5-23 23.2-35 33.5-10.5 9.1-7.3 15.6-1.6 17.3 8.6-.5 27.3-36.8 36.6-50.8zM540 507.3c7.7 14.1 12.5 21.9 17.6 32.8 4.5 9.6 10.5 9.5 13.2 6.3 1.8-5.7-22.2-28.8-30.8-39.1zm-254.1 33.3c-2.9.1-6 1-9 3.2-13.7 10-2.2 30.8-2.2 30.8-3.7 8.5 26.4 5.2 26.4 5.2 16.3.3 4.2-29.2 4.2-29.2s-9-10.2-19.5-10zm85.1 11.1c-27.5 26.7-37.4 44.9-47.1 70.8-9.7 25.9-2.3 32.9 8.1 38.1 15.5 1.3 21.9-81.8 39-108.9zm-116 49.7a10 12 0 0 0-10 12 10 12 0 0 0 10 12 10 12 0 0 0 10-12 10 12 0 0 0-10-12z" /> </svg> <!-- <div id="blue"> <svg xmlns="http://www.w3.org/2000/svg" id="splash1" class="svg-box1" viewBox="0 0 744.1 1052.4"> <path id="splash_path1" stroke-width=".7" stroke="#000" d="M386.9 38.2c-2.1.1-4.2.4-6.4.8-14.6 8.3 19.5 75.5 17.1 106.4 11.9-36.8 12.1-56.6 8.4-82.1-3-20.7-10.2-25.3-19.1-25zm96.4 69.4c-2.3.1-4.6.8-6.9 2.4-10.6 7.7-1.7 23.8-1.7 23.8-2.8 6.6 20.3 4 20.3 4 12.6.2 3.3-22.6 3.3-22.6s-6.9-7.9-15-7.7zM467 148.4a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm-69.8 3.2c-5.8 14.6-16.3 46.1-43.2 53.5-26.9 7.4-3.8-44.7-37.6-30.8-25.4 10.5 8.5 27.6-14.1 44.2-22.7 16.6-58.9-2.1-58.9-2.1s40.8 33.9 26.1 58.2c-14.7 24.3-73.3-28.4-85.8-8.3-47.4 76.4 75.5 25.9 70.5 54.2-5 28.2-75.3 34.9-75.3 34.9s96.6-1.5 104.1 25.8-79.5 20-72.6 48.1c11.6 47.3 51.5-26.2 68.7-3.3 17.2 22.9.6 45.5.6 45.5s15.5-16.7 38.6-1.6c23.1 15.2-27 39.9-1.9 50.9s21.1-38.9 48.5-34c27.4 4.9 6.4 56.8 6.4 56.8s21.7-52.3 48.7-58c27-5.7 23.3 79.9 53.6 62.9 24-13.5-29.6-68.1-7.8-85.5 21.7-17.4 58.2 30.1 58.2 30.1s-47.3-61.6-32.2-85.4c15-23.8 73.6 33.1 83 5.8 9.3-27.3-58-20.2-54.7-48.6 1.2-10.6 9.7-15.1 19.9-16.6-21.8-3.6-45.1-10.9-48.1-25.7-5.6-28.5 98.7-36.9 86.8-62.6-11.8-25.7-66.8 20.6-83.5-2.6-12.8-17.8-1.6-26.3 4.3-29.4-7.1 2.7-25.4 7.6-43.5-4.7-23.1-15.8 32.1-29.6 6.2-38.9-26-9.2-25.4 20.7-52.9 17.1-27.5-3.7-12-50.1-12-50.1zm102.2 76.6c2-.8 3.2-1.4 3.2-1.4s-1.4.4-3.2 1.4zm40.4 120.2c20.1 3.3 38.7 3.5 38.7 3.5s-21.7-6-38.7-3.5zM178.5 153.1c-4.8.1-7.9 3.1-10.8 6.8-3.6 11.7 54.3 32.1 70.6 50.3-14.3-26.1-25.5-37.1-42.2-49.3-7.8-5.7-13.4-7.8-17.6-7.7zm367.9 18.6c-14.1.5-22.4 39.1-38.8 52.7 25.8-14.2 35.3-23.2 44.9-35.8 9.6-12.6 3.1-15.3-6.1-16.9zm115.2 27.7c-16.8 0-38.6 8.2-38.6 24.9 0 16.6 13.7 30.1 30.5 30.1s30.5-13.5 30.5-30.1-5.5-24.9-22.4-24.9zm-492.6 7a10 12 0 0 0-10 12 10 12 0 0 0 10 12 10 12 0 0 0 10-12 10 12 0 0 0-10-12zm-40.6 32.9c-2 .1-4.1.4-6.1 1.1-15 5.3-14.3 31.5-14.3 31.5s-.6 21.5 15.3 21.5 37.7-24.5 37.7-24.5c7.3-4.2-13-30.4-32.7-29.6zm477.6 6.1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zM137.6 356.5c-32.9.1-54.8 5.7-80.9 15.4-33.4 12.4-32.7 25.3-27.5 39.6 13.9 16 97.1-47.5 139-53.7-11.3-.9-21.4-1.3-30.6-1.2zm461.5.9c33.5 19.3 53 29 77.4 45.2 21.5 14.2 31.7 4 32-8.1-5.1-16-79.7-28.3-109.4-37.1zM274.5 474.9c-15 14.5-23 23.2-35 33.5-10.5 9.1-7.3 15.6-1.6 17.3 8.6-.5 27.3-36.8 36.6-50.8zM540 507.3c7.7 14.1 12.5 21.9 17.6 32.8 4.5 9.6 10.5 9.5 13.2 6.3 1.8-5.7-22.2-28.8-30.8-39.1zm-254.1 33.3c-2.9.1-6 1-9 3.2-13.7 10-2.2 30.8-2.2 30.8-3.7 8.5 26.4 5.2 26.4 5.2 16.3.3 4.2-29.2 4.2-29.2s-9-10.2-19.5-10zm85.1 11.1c-27.5 26.7-37.4 44.9-47.1 70.8-9.7 25.9-2.3 32.9 8.1 38.1 15.5 1.3 21.9-81.8 39-108.9zm-116 49.7a10 12 0 0 0-10 12 10 12 0 0 0 10 12 10 12 0 0 0 10-12 10 12 0 0 0-10-12z" /> </svg> </div>--> </body> </html>
CSS Code
Create a file style.css and paste the code below.
/*body{ width:100%; }*/ .svg-box { position:absolute; animation-name: rotateSplash; animation-duration:0.5s; animation-iteration-count:1; } h1{ width:100%; position:absolute; z-index:10; text-align:center; font-size:250px; color:white; } /* .container{ //background-color:pink; height:100%; width: 100%; margin:auto; position:relative; display:block; }*/ @keyframes rotateSplash { 0%{ transform:scale(0.3); } 100%{ transform:scale(1.0); } } #blue{ height:100px; width:100px; border:1px solid blue; background:blue; margin-left:500px; margin-top:50px; }
JavaScript Code
Create a file script.js and paste the code below.
window.onload = function() { $("#splash").hide(); }; $(window).mousemove(function( event ) { //console.log(event.originalEvent); createAndShowSplash(event.clientX, event.clientY); }); function createAndShowSplash (topgap, leftgap) { copy = $("#splash").clone(); copy[0].setAttribute("id", "copy_splash"); copy[0].setAttribute("fill", get_random_color()); let size = rand(50,300); copy[0].setAttribute("width", size+'px'); copy[0].setAttribute("height", size+'px'); copy.css('marginLeft', topgap-size/3+'px'); copy.css('margin-top', leftgap-size/3+'px'); //copy[0].setAttribute("margin-right", leftgap.toString() + 'px'); // $('#copy_splash')[0].setAttribute("margin-left", leftgap.toString() + 'px //document.getElementById("copy_splash").style.marginLeft = "500px"; //copy[0].setAttribute("object-fit", "fill"); copy.appendTo("body"); copy.show(); } function rand(min, max) { return parseInt(Math.random() * (max-min+1), 10) + min; } function get_random_color() { var h = rand(1, 360); // color hue between 1 and 360 var s = rand(30, 100); // saturation 30-100% var l = rand(30, 70); // lightness 30-70% return 'hsl(' + h + ',' + s + '%,' + l + '%)'; }
Final Output
![](https://codingtorque.com/wp-content/uploads/2024/03/image-13-1024x432.png)
Written by: Piyush Patil
Code Credits: https://codepen.io/rashmibansal/pen/ZeKwxZ
If you found any mistakes or have any doubts please feel free to Contact Us
Hope you find this post helpful💖