gtchakama/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Shaking Particles</title>
    <style>
      .shape {
        position: absolute;
        width: 50px;
        height: 50px;
        transform: scale(0.8);
      }
      .cir {
        position: absolute;
        border-radius: 50%;
        z-index: 5;
      }
      .btn-contain {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 4px;
        background: #333;
        text-align: center;
        z-index: 10;
        transition: 0.2s;
        cursor: pointer;
        color: #fff;
        box-shadow: 0px 1px 5px 2px #bfceef;
      }
      .btn:active,
      .btn:hover,
      .btn:focus {
        outline: none !important;
        color: white;
      }
      .btn-particles {
        width: 100px;
        height: 100px;
        position: absolute;
        border-radius: 50%;
        color: #eee;
        font-family: monospace;
        z-index: 5;
        /* 	filter: url(#gooeyness); */
      }
      .btn:active {
        transform: scale(0.9) translate(-55%, -55%);
      }
    </style>
  </head>
  <body>
    <div class="btn-contain">
      <button class="btn">Click Me!</button>
      <div class="btn-particles"></div>
    </div>

    <script
      src="https://code.jquery.com/jquery-3.6.4.min.js"
      integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
      crossorigin="anonymous"
    ></script>

    <script>
      $.fn.boom = function (e) {
        var colors = [
          "#ffb3f6",
          "#7aa0ff",
          "#333",
          // '#FFD100',
          // '#FF9300',
          // '#FF7FA4'
        ];
        var shapes = [
          // Heart
          '<svg fill="#32ECD6" width="34px" height="34px" viewBox="-1.6 -1.6 35.20 35.20" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="#32ECD6"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>heart</title> <path d="M0.256 12.16q0.544 2.080 2.080 3.616l13.664 14.144 13.664-14.144q1.536-1.536 2.080-3.616t0-4.128-2.080-3.584-3.584-2.080-4.16 0-3.584 2.080l-2.336 2.816-2.336-2.816q-1.536-1.536-3.584-2.080t-4.128 0-3.616 2.080-2.080 3.584 0 4.128z"></path> </g></svg>',
          '<svg fill="#DA1B8F" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke="#DA1B8F"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M21,21H3L12,3Z"></path></g></svg>',
          // Circle
          '<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#32ECD6"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" fill="#32ECD6"></path> </g></svg>',
          '<!--?xml version="1.0" standalone="no"?-->              <svg id="sw-js-blob-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">                    <defs>                         <linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0">                            <stop id="stop1" stop-color="rgba(218, 27, 143, 1)" offset="0%"></stop>                            <stop id="stop2" stop-color="rgba(218, 27, 143, 1)" offset="100%"></stop>                        </linearGradient>                    </defs>                <path fill="url(#sw-gradient)" d="M1.6,-2.3C-0.8,5,-7.4,6.6,-8.4,0C-9.4,-6.5,-4.7,-21.2,-1.4,-22C2,-22.8,4,-9.7,1.6,-2.3Z" width="100%" height="100%" transform="translate(50 50)" stroke-width="0" style="transition: all 0.3s ease 0s;" stroke="url(#sw-gradient)"></path>              </svg>',
        ];

        var btn = $(this);
        var group = [];
        var num = Math.floor(Math.random() * 50) + 30;

        for (i = 0; i < num; i++) {
          var randBG = Math.floor(Math.random() * colors.length);
          var getShape = Math.floor(Math.random() * shapes.length);
          var c = Math.floor(Math.random() * 10) + 5;
          var scale = Math.floor(Math.random() * (8 - 4 + 1)) + 4;
          var x = Math.floor(Math.random() * (150 + 100)) - 100;
          var y = Math.floor(Math.random() * (150 + 100)) - 100;
          var sec = Math.floor(Math.random() * 1700) + 1000;
          var cir = $('<div class="cir"></div>');
          var shape = $('<svg class="shape">' + shapes[getShape] + "</svg>");

          shape.css({
            top: e.pageY - btn.offset().top + 20,
            left: e.pageX - btn.offset().left + 40,
            transform: "scale(0." + scale + ")",
            transition: sec + "ms",
            fill: colors[randBG],
          });

          btn.siblings(".btn-particles").append(shape);

          group.push({ shape: shape, x: x, y: y });
        }

        for (var a = 0; a < group.length; a++) {
          var shape = group[a].shape;
          var x = group[a].x,
            y = group[a].y;
          shape.css({
            left: x + 50,
            top: y + 15,
            transform: "scale(0)",
          });
        }

        setTimeout(function () {
          for (var b = 0; b < group.length; b++) {
            var shape = group[b].shape;
            shape.remove();
          }
          group = [];
        }, 2000);
      };

      $(function () {
        $(document).on("click", ".btn", function (e) {
          $(this).boom(e);
        });
      });
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Shaking Particles</title>
	<style>
	.shape {
	position: absolute;
	width: 50px;
	height: 50px;
	transform: scale(0.8);
	}
	.cir {
	position: absolute;
	border-radius: 50%;
	z-index: 5;
	}
	.btn-contain {
	width: 200px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}

	.btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 4px;
	background: #333;
	text-align: center;
	z-index: 10;
	transition: 0.2s;
	cursor: pointer;
	color: #fff;
	box-shadow: 0px 1px 5px 2px #bfceef;
	}
	.btn:active,
	.btn:hover,
	.btn:focus {
	outline: none !important;
	color: white;
	}
	.btn-particles {
	width: 100px;
	height: 100px;
	position: absolute;
	border-radius: 50%;
	color: #eee;
	font-family: monospace;
	z-index: 5;
	/* filter: url(#gooeyness); */
	}
	.btn:active {
	transform: scale(0.9) translate(-55%, -55%);
	}
	</style>
	</head>
	<body>
	<div class="btn-contain">
	<button class="btn">Click Me!</button>
	<div class="btn-particles"></div>
	</div>

	<script
	src="https://code.jquery.com/jquery-3.6.4.min.js"
	integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
	crossorigin="anonymous"
	></script>

	<script>
	$.fn.boom = function (e) {
	var colors = [
	"#ffb3f6",
	"#7aa0ff",
	"#333",
	// '#FFD100',
	// '#FF9300',
	// '#FF7FA4'
	];
	var shapes = [
	// Heart
	'<svg fill="#32ECD6" width="34px" height="34px" viewBox="-1.6 -1.6 35.20 35.20" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="#32ECD6"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>heart</title> <path d="M0.256 12.16q0.544 2.080 2.080 3.616l13.664 14.144 13.664-14.144q1.536-1.536 2.080-3.616t0-4.128-2.080-3.584-3.584-2.080-4.16 0-3.584 2.080l-2.336 2.816-2.336-2.816q-1.536-1.536-3.584-2.080t-4.128 0-3.616 2.080-2.080 3.584 0 4.128z"></path> </g></svg>',
	'<svg fill="#DA1B8F" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke="#DA1B8F"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M21,21H3L12,3Z"></path></g></svg>',
	// Circle
	'<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#32ECD6"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" fill="#32ECD6"></path> </g></svg>',
	'<!--?xml version="1.0" standalone="no"?--> <svg id="sw-js-blob-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="sw-gradient" x1="0" x2="1" y1="1" y2="0"> <stop id="stop1" stop-color="rgba(218, 27, 143, 1)" offset="0%"></stop> <stop id="stop2" stop-color="rgba(218, 27, 143, 1)" offset="100%"></stop> </linearGradient> </defs> <path fill="url(#sw-gradient)" d="M1.6,-2.3C-0.8,5,-7.4,6.6,-8.4,0C-9.4,-6.5,-4.7,-21.2,-1.4,-22C2,-22.8,4,-9.7,1.6,-2.3Z" width="100%" height="100%" transform="translate(50 50)" stroke-width="0" style="transition: all 0.3s ease 0s;" stroke="url(#sw-gradient)"></path> </svg>',
	];

	var btn = $(this);
	var group = [];
	var num = Math.floor(Math.random() * 50) + 30;

	for (i = 0; i < num; i++) {
	var randBG = Math.floor(Math.random() * colors.length);
	var getShape = Math.floor(Math.random() * shapes.length);
	var c = Math.floor(Math.random() * 10) + 5;
	var scale = Math.floor(Math.random() * (8 - 4 + 1)) + 4;
	var x = Math.floor(Math.random() * (150 + 100)) - 100;
	var y = Math.floor(Math.random() * (150 + 100)) - 100;
	var sec = Math.floor(Math.random() * 1700) + 1000;
	var cir = $('<div class="cir"></div>');
	var shape = $('<svg class="shape">' + shapes[getShape] + "</svg>");

	shape.css({
	top: e.pageY - btn.offset().top + 20,
	left: e.pageX - btn.offset().left + 40,
	transform: "scale(0." + scale + ")",
	transition: sec + "ms",
	fill: colors[randBG],
	});

	btn.siblings(".btn-particles").append(shape);

	group.push({ shape: shape, x: x, y: y });
	}

	for (var a = 0; a < group.length; a++) {
	var shape = group[a].shape;
	var x = group[a].x,
	y = group[a].y;
	shape.css({
	left: x + 50,
	top: y + 15,
	transform: "scale(0)",
	});
	}

	setTimeout(function () {
	for (var b = 0; b < group.length; b++) {
	var shape = group[b].shape;
	shape.remove();
	}
	group = [];
	}, 2000);
	};

	$(function () {
	$(document).on("click", ".btn", function (e) {
	$(this).boom(e);
	});
	});
	</script>
	</body>
	</html>