<!-- 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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.