// contains nothing but filter => functionally same as a style elem
// zero its dimensions and hide it from screen readers
svg(width='0' height='0' aria-hidden='true')
	// extend filter region
	// sRGB is what we normally want (but not default)
	filter#shadow(color-interpolation-filters='sRGB' 
	              x='-.5' y='-.5' width='2' height='2')
		// flood entire filter area with orangered
		feFlood(flood-color='orangered')
		// restrict to rectangle of filter input (our image)
		feComposite(in2='SourceAlpha' operator='in')
		// blur this rectangle
		feGaussianBlur(stdDeviation='19')
		// offset this blurred rectangle
		feOffset(dx='17' dy='13' result='in')
		// create noise layer
		feTurbulence(type='fractalNoise' baseFrequency='.9713' numOctaves='4')
		// use it as a displacement map 
		// for blurred & offset rectangle to make it grainy
		feDisplacementMap(in='in' scale='32')
		// place filter input image on top
		feBlend(in='SourceGraphic')

// image that gets the filter applied
img(src='https://images.unsplash.com/photo-1477949775154-d739b82400b3?w=640' alt='leopard in a tree, looking down')

html, body { display: grid }

html { height: 100% }

body { /* highllight grainy shadow edge semitransparency */
	--u: 2px*sqrt(2);
	background: 
		repeating-linear-gradient(45deg, 
				#0000 0, 
				#212121 1px calc(var(--u)), 
				#0000 calc(var(--u) + 1px) calc(4*var(--u))) 
		#121212
}

/* take it out of document flow */
svg[height='0'][aria-hidden='true'] { position: absolute }

img {
	place-self: center;
	max-width: clamp(10em, 90%, 40em);
	max-height: 85vh;
	max-height: 85dvh;
	object-fit: cover;
	/* magic grainy shadow filter */
	filter: url(#shadow)
}