Happy Holi Colors Effect using HTML CSS and JavaScript

Share your love

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

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💖

Share your love

Related Posts