Ink splatter on click

You may have noticed that when clicking on an interactive element such as a link, or a button, a splatter of ink appears. The splatter also appears when clicking anywhere on the home page, with additional splatter on drag functionality. Notice that I specify which elements are allowed to have a splatter effect, this was necessary because initially the splatter was inconsistent, as buttons, links and DIVs may have different classes and pointer events assigned to them. Also in the JS code I found no better way to check whether I am on the homepage, than to check for the presence of a specific link.

HTML:

JAVASCRIPT:

document.addEventListener('DOMContentLoaded', () => {
var radius = 30;
var maxRadius = Math.random() * 15 + radius;
var splatterCount = Math.random() * 20 + 10;
var duration = Math.random() * 2 + 3;
let isDragging = false;
let Drag = false;
function createSplatter(x, y) {
if (Drag == true) {
radius = 10;
} else {
radius = 30;
}
for (let i = 0; i < splatterCount; i++) {
const angle = Math.random() * 2 * Math.PI;
const radius = Math.random() * maxRadius;
const offsetX = radius * Math.cos(angle);
const offsetY = radius * Math.sin(angle);
createCircle(x + offsetX, y + offsetY, Math.random() * 5 + 2);
	}
}
function createCircle(x, y, radius) {
const circle = document.createElement('div');
circle.classList.add('splatter');
circle.style.width = `${radius * 2}px`;
circle.style.height = `${radius * 2}px`;
circle.style.left = `${x - radius}px`;
circle.style.top = `${y - radius}px`;
circle.style.backgroundColor = '#000000';
circle.style.position = 'absolute';
circle.style.zIndex = '1000';
// Randomize the fade duration
circle.style.animation = `splatterFade ${duration}s forwards`;
document.body.appendChild(circle);
// Remove the circle after the animation
setTimeout(() => {
if (circle.parentElement) {
circle.parentElement.removeChild(circle);
		}
	}, 5500);
}
const linkToCheck = 'https://www.polivantage.com/memberarea';
const linkExists = Array.from(document.querySelectorAll('a'))
.some(link => link.href === linkToCheck);
if (linkExists) {
isDragging = false;
Drag = false;
document.body.addEventListener('mousedown', (event) => {
isDragging = true;
Drag = false
createSplatter(event.pageX, event.pageY);
});
document.body.addEventListener('mousemove', (event) => {
if (isDragging) {
Drag = true
createSplatter(event.pageX, event.pageY);
}
});
document.body.addEventListener('mouseup', () => {
isDragging = false;
Drag = false
});
} else {
document.body.addEventListener('mousedown', (event) => {
const clickedElement = event.target;
//classes that provoke splatter
const clickableClasses = ['button', 'btn', 'link', 'icon', 'show-pigeon', 'dropdown-item', 'search-input', 'category-item', 'sqs-add-to-cart-button', 'variant-select-wrapper', 'ProductItem-gallery-thumbnails-item-image', 'sqs-block-button-container', 'auth', 'Cart-inner', 'header-title-logo', 'accordion-item__click-target', 'accordion-item__title', 'accordion-icon-container', 'play', 'pause', 'trackBullet', 'trail', 'cart-row-remove', 'sacredBadge']; 
//tags that provoke splatter
const isClickable = clickableClasses.some(cls => clickedElement.classList.contains(cls));
if (isClickable || clickedElement.tagName === 'A' || clickedElement.tagName === 'path' || clickedElement.tagName === 'SELECT' || clickedElement.tagName === 'TEXTAREA' || clickedElement.tagName === 'INPUT') {
isDragging = true;
Drag = false
splatterCount = Math.random() * 7 + 5;
duration = Math.random() * 2 + 1;
radius = 15;
maxRadius = Math.random() * 17 + radius;
createSplatter(event.pageX, event.pageY);
}
});
}
});

CSS:

.splatter {
position: absolute;
z-index: 9999;
border-radius: 50%;
//width: 100px;
//height: 100px;
display: block;
background-color: #000000;
filter: blur(0.1px);
pointer-events: none;
animation: splatterFade 5s forwards;
}

The animation for fading out I leave up to you.