Clipping

Using animated-SVG clipping

HTML

				
				
<div class="container">
	<svg width="0" height="0" viewbox="0 0 400 400">
		<defs>
			<clipPath id="myClip">
			    <circle stroke="#000000" stroke-miterlimit="10" cx="50" cy="50" r="40">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="193.949" cy="235" r="74.576">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="426.576" cy="108.305" r="47.034">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="346.915" cy="255.763" r="43.644">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="255.39" cy="82.882" r="35.17">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="328.695" cy="157.034" r="25.424">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="594.797" cy="360.424" r="121.187">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="470.008" cy="223.771" r="31.992">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="299.525" cy="400.762" r="64.407">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="634.627" cy="183.305" r="92.373">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="136.746" cy="172.712" r="106.356">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="91.831" cy="416.779" r="36.017">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="125.305" cy="335" r="25.424">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="192.424" cy="421.271" r="20.509">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="184.847" cy="362.543" r="18.22">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="436.568" cy="385.602" r="72.635">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="345.644" cy="90.085" r="23.729">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="534.627" cy="85" r="42.373">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="426.305" cy="12.017" r="83.898">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="277.458" cy="314.694" r="22.068">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="413.229" cy="195.381" r="22.669">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="277.848" cy="185" r="16.949">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="493.102" cy="158.729" r="19.492">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="424.517" cy="290.873" r="24.517">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="71.067" cy="348.56" r="49.152">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="737.221" cy="62.915" r="50.898">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			    <circle stroke="#000000" stroke-miterlimit="10" cx="740" cy="430" r="50">
			    	<animate attributeName="r" attributeType="XML" from="0" to="250" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"></animate>
			    </circle>
			</clipPath>
		</defs>
		<image clip-path="url(#myClip)" width="800" height="450"  preserveAspectRatio="xMinYMid slice" xlink:href="/assets/images/clipping/tunisie-clips.jpg" ></image>
	</svg>
</div>

CSS

				
				
.container {
	text-align: center;
}
.tunisie-image {
	max-width: 100%;
	clip-path: url(#myClip);
}

Using CSS animation clipping (hover over the image to see the animation)

Africa Love

HTML

				
				
<div class="container">
	<img alt="Africa Love" class="africa-love" src="/assets/images/clipping/love-africa.jpg">
</div>

CSS

				
				
.container {
	text-align: center;
}
.africa-love {   
	max-width: 100%;
	shape-inside: polygon(50% 0, 64% 33%,100% 35%, 74% 60%, 90% 100%, 50% 80%, 10%100%, 27% 60%, 0 35%, 36% 33%);
	transition: all 1s ease; 
	-webkit-clip-path: polygon(50% 0, 64% 33%,100% 35%, 74% 60%, 90% 100%, 50% 80%, 10%100%, 27% 60%, 0 35%, 36% 33%);
	} 
.africa-love:hover{ 
	shape-inside: polygon(50% 0, 100% 0, 100% 35%, 100% 80%, 100% 100%, 50% 100%, 0 100%, 0 80%, 0 35%, 0 0);
	-webkit-clip-path: polygon(50% 0, 100% 0, 100% 35%, 100% 80%, 100% 100%, 50% 100%, 0 100%, 0 80%, 0 35%, 0 0);
}

Resources

➤ https://css-tricks.com/almanac/properties/c/clip/