- let d = .1;

// 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, use units relative to input size
	// sRGB is what we normally want (but not default)
	filter#shadow(x='-1' y='-1' width='3' height='3'
	              color-interpolation-filters='sRGB'
								primitiveUnits='objectBoundingBox')
		//- blur image
		feGaussianBlur(stdDeviation=d)
		//- then offset it and save it as 'in'
		feOffset(dx=d dy=d result='in')
		//- generate noise
		feTurbulence(type='fractalNoise' baseFrequency='.9713')
		//- use noise as displacement map to scramble a bit the blurred & offset image
		feDisplacementMap(in='in' scale=2*d yChannelSelector='R')
		//- decrease alpha a little bit
		feComponentTransfer
			feFuncA(type='linear' slope='.9')
		//- add original image on top
		feBlend(in='SourceGraphic')

img(src='https://images.unsplash.com/photo-1570514865285-2de0d16e3efc?w=400' alt='"Screw it, let\'s do it" neon signage. This neon sign can be found in the Eighteen30 bar, downtown Toronto.')
img(src='https://images.unsplash.com/photo-1604604994333-f1b0e9471186?w=400' alt='cars on road near high rise buildings in Tokyo during night time')
img(src='https://images.unsplash.com/photo-1562447574-797880741dd1?w=400' alt='arrow neon signages')
img(src='https://images.unsplash.com/photo-1534541913055-d4064a68b214?w=400' alt='woman wearing sunglasses with black frames under red neon lights')
img(src='https://images.unsplash.com/photo-1597837651803-e7b5f0018cb1?w=400' alt='white neon-lighted metal frame on black metal fence')
img(src='https://images.unsplash.com/photo-1615828055135-18004ed15196?w=400' alt='cars on a road under Vegas neon lights during night time')

html {
	display: grid;
	min-height: 100%
}

body {
	place-self: center;
	background: #212121;
	text-align: center;
	text-wrap: balance
}

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

img {
	margin: 2.5em;
	width: clamp(8em, 16vw, 32em);
	aspect-ratio: 1;
	border-radius: .375em;
	box-shadow: 1px 1px #000c;
	/* the magic shadow */
	filter: url(#shadow)
}