<!-- 		The <feMorphology> SVG filter primitive is used to erode or dilate the input image. Enlarging or decreasing pixel spread 		
operator takes 2 values - either erode or dilate
the radius defines the pixel spread on the x and y axis 

once you've played with this filter, why not swop out a different filter primitive from the docs? -->

<svg class="Playground__svg" viewBox="0 0 400 500">
	<defs>
		<filter id="filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">

			<feMorphology operator="dilate" radius="10 0" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="morphology1"></feMorphology>
		</filter>
		<filter id="filter-2" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">

			<feMorphology operator="dilate" radius="10 2" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="morphology1"></feMorphology>
		</filter>
		<filter id="filter-3" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">

			<feMorphology operator="dilate" radius="15 0" x="0%" y="0%" width="100%" height="100%" in="SourceGraphic" result="morphology1"></feMorphology>
		</filter>
	</defs>

	<!-- 	go ahead and change the image and make it your own -->
	<image x="0%" y="0%" width="400" height="500" preserveAspectRatio="xMidYMid slice" xlink:href="https://images.unsplash.com/photo-1571977144562-3737f035296a?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" id="my-image"></image>
</svg>
body {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	background: #000;
}

svg {
	height: 100vh;
	width: 100vw;
}

@keyframes my-animation {
	0% {
		filter: none;
	}
	20% {
		filter: url(#filter);
	}
	50% {
		filter: url(#filter-2);
	}
	80% {
		filter: url(#filter-3);
	}
	94% {
		filter: none;
	}
}

#my-image {
	filter: url(#filter);
	animation: 0.8s my-animation alternate infinite;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.