// 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')
	// use units relative to input size
	// sRGB is what we normally want (but not default)
	filter#grain(color-interpolation-filters='sRGB' 
	             primitiveUnits='objectBoundingBox')
		// generate fine noise
		feTurbulence(type='fractalNoise' baseFrequency='1.73' numOctaves='3')
		// use noise as displacement map
		feDisplacementMap(in='SourceGraphic' scale='.25' xChannelSelector='R')
		// make alpha a bit more extreme, 
		// pushing some pixels to the ends of the [0, 1] interval
		feComponentTransfer(result='grain')
			feFuncA(type='table' tableValues='-.5 1.5')
		// slightly blur everything
		feGaussianBlur(stdDeviation='.1')
		feComposite(operator='arithmetic' k1='-8' k2='-8' k3='16')
		feComposite(in='grain' operator='in')
		feComposite(in='grain' operator='arithmetic' k1='1' k2='1' k3='-.875')
	radialGradient#rg
		stop(stop-color='#0000')
		stop(stop-color='#000c' offset='1')

// use SVG elements here to be able to use SVG radialGradient
svg(height='0')
	symbol#c(viewBox='-4 -4 8 8')
		circle(r='4')

// visual result
svg.sample
	// radialGradient allows specifying a focal point fx,fy
	radialGradient#g00(href='#rg' cx='.4' fx='.125')
	use(href='#c' fill='url(#g00)')
svg.sample
	radialGradient#g01(href='#rg' cy='.375' fy='.05')
	use(href='#c' fill='url(#g01)' transform='scale(1.2 1)')
svg.sample
	radialGradient#g02(href='#rg' cx='.575' cy='.425' fx='.75' fy='.25')
	use(href='#c' fill='url(#g02)')
svg.sample
	radialGradient#g03(href='#rg' cx='.425' cy='.425' fx='.25' fy='.25')
	use(href='#c' fill='url(#g03)')
svg.sample
	radialGradient#g04(href='#rg' cy='.375' fy='.05')
	use(href='#c' fill='url(#g04)' transform='scale(1 1.375)')
svg.sample
	radialGradient#g05(href='#rg' cx='.6' fx='.875')
	use(href='#c' fill='url(#g05)')

$max-w: 12.5em;

html, body { display: grid }

html { min-height: 100% }

body {
	place-self: center;
	place-content: center;
	grid-template-columns: 
		repeat(auto-fit, clamp(.6*#{$max-w}, 100%, #{$max-w}));
	width: min(100%, 3*#{$max-w})
}

/* out of document flow */
svg[height='0'] { position: fixed }

svg { overflow: visible }

.sample {
	aspect-ratio: 1;
	/* cut out tiny edge problems */
	clip-path: circle(40%);
	filter: url(#grain)
}

use { transform-origin: 50% 50% }