$base: #DADCE8;
$ease: cubic-bezier(0.165, 0.84, 0.44, 1);

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	width: 100%;
	height: 100%;
  font-size: 18px;
}

body {
  width: 100%;
  min-height: 100%;
  display: flex;
	// justify-content: center;
	// align-items: center;
	background: $base;
	overflow: hidden;
}

.drop {
	position: relative;
	position: absolute;
	transform-origin: 50% 50%;
	transform: translate(-50%, -50%);
	width: 50vmin;
	height: 50vmin;
	border-radius: 50%;
	// background: #000;
	filter: blur(1vmin);
	box-shadow: -5vmin -5vmin 5vmin lighten($base, 5%),
							5vmin 5vmin 5vmin darken($base, 10%),
							inset -5vmin -5vmin 5vmin lighten($base, 5%),
							inset 5vmin 5vmin 5vmin darken($base, 10%);
	border: 0 solid $base;
	animation: expand 4s $ease infinite;
	
	@keyframes expand {
		0% {
			width: 0;
			height: 0;
			box-shadow: -5vmin -5vmin 5vmin lighten($base, 5%),
							5vmin 5vmin 5vmin darken($base, 10%),
							inset -5vmin -5vmin 5vmin lighten($base, 5%),
							inset 5vmin 5vmin 5vmin darken($base, 10%);
			border: 0 solid transparentize($base, .5);
		}
		5% {
			box-shadow: -5vmin -5vmin 5vmin lighten($base, 5%),
							5vmin 5vmin 5vmin darken($base, 10%),
							inset -5vmin -5vmin 5vmin lighten($base, 5%),
							inset 5vmin 5vmin 5vmin darken($base, 10%);
			border: 2vmin solid transparentize($base, .5);
		}
		90% {
			box-shadow: none;
			border: 2vmin solid transparentize($base, .5);
		}
		100% {
			width: 100vmin;
			height: 100vmin;
			box-shadow: none;
			border: 0 solid transparentize($base, .5);
		}
	}
	
	&:before {
		content: '';
		position: absolute;
		margin: auto;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 0%;
		height: 0%;
		border-radius: 50%;
		animation: expand1 4s $ease infinite;
		box-shadow: -5vmin -5vmin 5vmin lighten($base, 5%),
							5vmin 5vmin 5vmin darken($base, 10%),
							inset -5vmin -5vmin 5vmin lighten($base, 5%),
							inset 5vmin 5vmin 5vmin darken($base, 10%);
		
		@keyframes expand1 {
			0% {
				width: 0%;
				height: 0%;
				// opacity: 1;
				box-shadow: -5vmin -5vmin 5vmin lighten($base, 5%),
							5vmin 5vmin 5vmin darken($base, 10%),
							inset -5vmin -5vmin 5vmin lighten($base, 5%),
							inset 5vmin 5vmin 5vmin darken($base, 10%);
				border: 0 solid $base;
			}
			20% {
				box-shadow: -5vmin -5vmin 5vmin lighten($base, 5%),
							5vmin 5vmin 5vmin darken($base, 10%),
							inset -5vmin -5vmin 5vmin lighten($base, 5%),
							inset 5vmin 5vmin 5vmin darken($base, 10%);
			}
			100% {
				width: 60%;
				height: 60%;
				// opacity: 0;
				box-shadow: none;
				border: 1vmin solid $base;
			}
		}
	}
}
// click to add more drops
console.clear();

class Drop {
	constructor(x, y) {
		console.log(x);
		this.x = x;
		this.y = y;
		this.create();
	}
	
	create() {
		let dropEl = document.createElement('div');
		dropEl.classList.add('drop');
		dropEl.style.left = `${this.x}px`;
		dropEl.style.top = `${this.y}px`;
		document.body.appendChild(dropEl);
	}
}

const createDrop = e => {
	let xPos = e.clientX,
			yPos = e.clientY;
	
	let drop = new Drop(xPos, yPos);
}

document.addEventListener('click', createDrop);
document.addEventListener('DOMContentLoaded', function() {
	new Drop(window.innerWidth/2, window.innerHeight/2);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.