Apply image or gradient as border

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 445 445">
			<polygon>
				<animate
					attributeName="points" 
					dur="1s" 
					fill="freeze" 
					from="236.33 42.06 236.09 41.77 235.39 41.29 68.97 73.51 69.24 74.1 71.76 75.12 236.76 44.12 236.33 42.06" 
					to="236.33 42.06 236.09 41.77 226.42 32.19 59.4 64.28 69.24 74.1 71.76 75.12 236.76 44.12 236.33 42.06"/>
			</polygon>
			<polygon>
				<animate
					attributeName="points" 
					dur="1s" 
					fill="freeze" 
					from="229.73 93.71 229.27 93.68 80.83 226.7 81.15 227.42 230.76 96.12 229.73 93.71"
					to="229.73 93.71 220.02 83.98 71.32 217.63 81.15 227.42 230.76 96.12 229.73 93.71"/>
			</polygon>
		</svg>

CSS

svg {
	pointer-events: all;
	polygon {
		fill: #333;
	}
}