<div class="circle"></div>

body{
	display: flex;
	align-items: center;
  justify-content: center;
	position: absolute;
	height: 100%;
	width: 100%;
	background: black;
	color: white;
	text-align: white;
	overflow: hidden;
}

.circle,
.circle::before,
.circle::after{
	cursor: pointer;
	flex: 0 0 300px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: rgba(255,0,0,75);
	display: block;
	transform: translate(0,-25%);
	mix-blend-mode: screen;
	z-index: 1;
	transition: .5s cubic-bezier(0.52,-0.43, 0.4, 1.32) all;
	filter: blur(6px);
}

.circle{
	&::before,
	&::after{
		content: '';
	}
	
	&::before{
		background: rgba(0,255,0,75);
		transform: translate(-33%,50%);
	}
	
	&::after{
		background: rgba(0,0,255,75);
		transform: translate(33%,-50%);
	}

	&.focus{
	
		transform: translate(0,0);
		//filter: blur(1px);
		
	&::before
	{
		//filter: blur(1px);
		transform: translate(3%,0);
	}
		
		&::after{
		//filter: blur(1px);
		transform: translate(0,-103%);
	}
	}

}

$('.circle').click(function(){
$(this).toggleClass('focus');
});