SVG goo intersection blur. СВГ скругление пересечений путей.

index.html

<div class="box">
	  <div class="test"></div>
	  <div class="test-2"></div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
	<defs>
		<filter id="goo">
			<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur" />
			<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
			<feComposite in="SourceGraphic" in2="goo" operator="atop" />
		</filter>
	</defs>
</svg>

<style>
.box {
	display: flex;
	align-items: center;
	filter:url("#goo");
}

.test {
	width: 180px;
	height: 50px;
	border-radius: 50px;
	background: red;
}

.test-2{
	width: 50px;
	height: 50px;
	background: red;
	border-radius: 50%;
}
</style>