[Image SVG clip-path] Render an image from a specific path from a SVG file

image-house-shape.scss

//https://codepen.io/designcourse/pen/qBqdoYe
.image-house-shape{ 
	
	.avia-image-overlay-wrap{
		
		&::before{ //red shadow
			position: absolute;
			display: block;
			content: " ";
			width: 100%;
			height: auto;
			background-color: #E03A32;
			
			clip-path: path('M268.8,43.5L133.6,152.1c-15.3,12.3-24.1,30.8-24.1,50.3v194.5c0,35.7,28.9,64.6,64.6,64.6h281.8 c35.7,0,64.6-28.9,64.6-64.6V203.7c0-20.3-9.6-39.5-25.9-51.7L347.9,42.2C324.3,24.5,291.8,25.1,268.8,43.5z');
			aspect-ratio: 1 / 1;
			object-fit: cover;
			
			@media only screen and (max-width: 1200px){
				clip-path: path('M161.8,23L74.1,93.4c-9.9,7.9-15.7,20-15.7,32.7v126.2c0,23.1,18.8,41.9,41.9,41.9h182.8 c23.1,0,41.9-18.8,41.9-41.9V126.9c0-13.2-6.2-25.6-16.8-33.5l-95.1-71.3C197.8,10.6,176.7,11,161.8,23z')!important;
			}
		}
		
		&::after{ // small house
			position: absolute;
			top: 0 ;
			display: block;
			content: " ";
			width: 100%;
			height: auto;
			background-color: #474DA4;
			
			clip-path: path('M58.3,291.4L25.2,318c-3.7,3-5.9,7.5-5.9,12.3v47.6c0,8.7,7.1,15.8,15.8,15.8H104c8.7,0,15.8-7.1,15.8-15.8 v-47.3c0-5-2.3-9.7-6.3-12.6l-35.9-26.9C71.8,286.8,63.9,286.9,58.3,291.4z');
			aspect-ratio: 1 / 1;
			object-fit: cover;
			
			@media only screen and (max-width: 1200px){
				clip-path: path('M25.3,183.7L3.8,201c-2.4,1.9-3.8,4.9-3.8,8v30.9c0,5.7,4.6,10.2,10.2,10.2h44.7c5.7,0,10.2-4.6,10.2-10.2  v-30.6c0-3.2-1.5-6.3-4.1-8.2l-23.3-17.4C34.1,180.7,28.9,180.8,25.3,183.7z')!important;
			}
		}
	}
	
	img {
		clip-path: path('M247.6,22.3L112.4,130.9c-15.3,12.3-24.1,30.8-24.1,50.3v194.5c0,35.7,28.9,64.6,64.6,64.6h281.8 c35.7,0,64.6-28.9,64.6-64.6V182.6c0-20.3-9.6-39.5-25.9-51.7L326.7,21C303.1,3.3,270.6,3.9,247.6,22.3z');
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		object-fit: cover;
		
		@media only screen and (max-width: 1200px){
			clip-path: path('M148.1,9.2L60.4,79.6c-9.9,7.9-15.7,20-15.7,32.7v126.2c0,23.1,18.8,41.9,41.9,41.9h182.8 c23.1,0,41.9-18.8,41.9-41.9V113.2c0-13.2-6.2-25.6-16.8-33.5L199.4,8.4C184.1-3.1,163-2.7,148.1,9.2z')!important;
		}
	}
}