- var h = 2000, w = 2*h;
- var x = -.5*w, y = -.5*h;
- var r = .5*h;
- var nr = 4, ru = r/nr;
- var sw = .004*h, fs = Math.round(.075*h);
- var na = Math.round(.05*fs);
- var a = [];

svg(viewBox=[x, y, w, h].join(' ') 
		xmlns='http://www.w3.org/2000/svg' 
		xmlns:xlink='http://www.w3.org/1999/xlink')
	style
		| [x] {
		| 	fill: #333;
		| 	font: #{Math.round(.8275*fs)}px consolas, monaco, monospace
		| }
		| [d] {
		| 	fill: none;
		| 	stroke: #333;
		| 	stroke-width: #{sw}
		| }
		| #c { stroke-width: #{.5*ru} }
		| #c + [d], #m, #n { stroke: #f90; stroke-width: #{1.5*sw} }
		| #m { stroke: #b53 }
		| #n { stroke: #95a }
		| #n + * { font: #{Math.round(.8*fs)}px comic sans ms, cursive }
		| [x] + use { opacity: .1 }
		| tspan { fill: #f90 }
		| #a { fill: #b53 }
		| #b { fill: #95a }
		| #t, #t + * { fill: #ccc }
		| #t { transform:rotate(-90deg); mix-blend-mode: difference }
		| #t ~ [d] { stroke: #ccc }
	text(x=x + .2*fs y=.5*y + fs) repeating-radial-gradient(#000 <tspan>0%</tspan> <tspan id='a'>$p/2</tspan>, transparent <tspan>0%</tspan> <tspan id='b'>$p</tspan>)
	- ru += (4 - ru%4);
	- for(var i = 0; i < nr; i++) {
		- var rc = (.25 + i)*ru;
		- a.push(`M${rc} 0A${rc} ${rc} 0 0 1${-rc} 0`)
	- }
	text(x=(x + .2*fs) y=y + 3*fs) $p: 100%/$nr
	path#c(d=`${a.join('')}`)
	path(d=`M0${-fs}l${fs}${-1.3*fs}m${.2*fs}${-.7*fs}l${-.6*fs}${-2.5*fs}m${7.6*fs} 0l${2.3*fs} ${2.5*fs}`)
	path#m(d=`M${.5*ru}${-fs}l${1.9*fs}${-1.2*fs}m${.9*fs}${-.8*fs}l${.9*fs}${-1.5*fs}`)
	path#n(d=`M${ru}${-fs}l${.7*fs - x - 2*ru}${-1.1*fs}m0${-.9*fs}l${-.5*fs}${-1.5*fs}`)
	text(x=-2*fs y=y + fs)
		tspan ripple start
		tspan#a(dy=fs) ripple end
		tspan(dy=-fs) gap start
		tspan#b(dy=fs) gap end
	use(xlink:href='#c' transform='scale(1 -1)')
	path(d=`M0${-fs}V0M${.5*ru}${-fs}V0M${ru}${-fs}V0`)
	text#t(x=-2.7*fs y=1.5*ru + .2*fs) repeat
	text(x=(x + .2*fs) y=y + 2*fs) // $nr: number of ripples
	path(d=`M${2*ru} ${2*fs}V0M${3*ru} ${2*fs}V0`)
	use(xlink:href='#t' x=ru)

// minimal SVG
<svg viewBox='-2000 -1000 4000 2000' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><style>[x]{fill:#333;font:124px consolas,monaco,monospace}[d]{fill:none;stroke:#333;stroke-width:8}#c{stroke-width:125}#c+[d],#m,#n{stroke:#f90;stroke-width:12}#m{stroke:#b53}#n{stroke:#95a}#n+*{font:120px comic sans ms,cursive}[x]+use{opacity:.1}tspan{fill:#f90}#a{fill:#b53}#b{fill:#95a}#t,#t+*{fill:#ccc}#t{transform:rotate(-90deg);mix-blend-mode:difference}#t~[d]{stroke:#ccc}</style><text x='-1970' y='-350'>repeating-radial-gradient(#000 <tspan>0%</tspan> <tspan id='a'>$p/2</tspan>, transparent <tspan>0%</tspan> <tspan id='b'>$p</tspan>)</text><text x='-1970' y='-550'>$p: 100%/$nr</text><path id='c' d='M63 0A63 63 0 0 1-63 0M315 0A315 315 0 0 1-315 0M567 0A567 567 0 0 1-567 0M819 0A819 819 0 0 1-819 0'/><path d='M0-150l150-195m30-105l-90-375m1140 0l345 375'/><path id='m' d='M126-150l285-180m135-120l135-225'/><path id='n' d='M252-150l1601-165m0-135l-75-225'/><text x='-300' y='-850'><tspan>ripple start</tspan> <tspan id='a' dy='150'>ripple end</tspan> <tspan dy='-150'>gap start</tspan> <tspan id='b' dy='150'>gap end</tspan></text><use xlink:href='#c' transform='scale(1-1)'/><path d='M0-150V0M126-150V0M252-150V0'/><text id='t' x='-405' y='408'>repeat</text><text x='-1970' y='-700'>// $nr: number of ripples</text><path d='M504 300V0M756 300V0'/><use xlink:href='#t' x='252'/></svg>

body {
	display: flex;
	flex-direction: column;
	margin: 0;
	height: 100vh;
}