[[[https://codepen.io/thebabydino/pen/zEbVPO]]]

- var f = .7, ay = f*ax;
- d *= f, ad *=f, sw *=f, pr /= f, pr1 /= f, pr2 *= f, ram *= f;
- fs = +(.8*f*fs).toFixed(e);

svg(viewBox=[-d, -(.63*d).toFixed(e), 2*d, 1.5*d].join(' ') 
		xmlns='http://www.w3.org/2000/svg' 
		color=llight fill='none' stroke-width=`${2*sw}`)
	style
		| svg { font: #{fs}px consolas, monaco, monospace }
		| [y], #e *, g [id][r] { fill: currentcolor }
		| [id=a] [y] { font: 1em times new roman, georgia, serif }
		| [id] [y] { font-style: italic }
		| #a [d], [r='#{hr}'], [r] + g { stroke: currentcolor }
		| #a { marker-end: url(#e) }
		| tspan { font-size: .5em }
		| g [id][r], #l { cursor: pointer }
		| .hl { fill-opacity: 1; stroke-opacity: 1; color: #{orange} }
		| [y].hl { color: #{darken} }
		| #l .hl { color: #{tomato} }
	marker#e(markerWidth=ad markerHeight=ad viewBox='0 -4 8 8' 
					 orient='auto' refX='7')
		path(d='M8 0 0-4V4')
	//-guides & axes
	g#a
		path(d=`M0 ${3*hrd} ${3*hrd} 0 ${2*hrd}${-hrd} ${hrd}${-2*hrd} 
						 0${-hrd}${-hrd}${-2*hrd}${-2*hrd} ${-hrd}${-3*hrd} 0z
						M${-(1.25*ax).toFixed(e)} 0H${(1.25*ax).toFixed(e)}`)
		text(x=(1.25*ax - .5*fs).toFixed(e) y=(-.5*fs).toFixed(e)) x
		path(d=`M0${-ay}V${(1.75*ay).toFixed(e)}`)
		text(x=.4*fs y=(1.75*ay - .2*fs).toFixed(e)) y
	//-coords
	g(fill-opacity=0)
		text#te0(x=(2*hrd - 1.2*fs).toFixed(e) y=(hrd + 2*fs).toFixed(e)) (2·RC,RC)
		text#te1(x=-(2*hrd + 4.4*fs).toFixed(e) y=(hrd + 2*fs).toFixed(e)) (-2·RC,RC)
		text#te2(x=-(2*hrd + 5*fs).toFixed(e) y=-(hrd + 1.4*fs).toFixed(e)) (-2·RC,-RC)
		text#te3(x=(-1.9*fs).toFixed(e) y=-(hrd + 1.4*fs)) (0,-RC)
		text#te4(x=(2*hrd - 1.2*fs).toFixed(e) y=-(hrd + 1.4*fs).toFixed(e)) (2·RC,-RC)
		text#ti0(x=.8*fs y=(3*hrd + .8*fs).toFixed(e)) (0,3·RC)
		text#ti1(x=(-(3*hrd + 3.8*fs)).toFixed(e) y=(1.9*fs).toFixed(e)) (-3·RC,0)
		text#ti2(x=(-(hrd + 3*fs)).toFixed(e) y=-(2*hrd + 1.2*fs).toFixed(e)) (-RC,-2·RC)
		text#ti3(x=(hrd - 3*fs).toFixed(e) y=-(2*hrd + 1.2*fs).toFixed(e)) (RC,-2·RC)
		text#ti4(x=(3*hrd - 1.2*fs).toFixed(e) y=(1.9*fs).toFixed(e)) (3·RC,0)
	//-helper circles
	circle(cx=-hrd r=hr)
	circle(cx=hrd r=hr)
	//-heart curves
	g(color=darken stroke-width=4*sw)
		path#c0(d=`M${2*hrd} ${hrd}C0 ${3*hrd} 0 ${3*hrd} ${-2*hrd} ${hrd}`)
		path#c1(d=`M${-2*hrd} ${hrd}A${hr} ${hr} 0 0 1${-2*hrd}${-hrd}`)
		path#c2(d=`M${-2*hrd}${-hrd}A${hr} ${hr} 0 0 1 0${-hrd}`)
		path#c3(d=`M0${-hrd}A${hr} ${hr} 0 0 1 ${2*hrd}${-hrd}`)
		path#c4(d=`M${2*hrd}${-hrd}A${hr} ${hr} 0 0 1 ${2*hrd} ${hrd}`)
	//-squares
	g(stroke=purple stroke-width=3*sw stroke-opacity=0)
		path#se04(d=`M${2*hrd} ${hrd} 0 ${hrd} 0${-hrd} ${2*hrd}${-hrd}z`)
		path#se12(d=`M${-2*hrd} ${hrd} 0 ${hrd} 0${-hrd}${-2*hrd}${-hrd}z`)
		path#se3(d=`M0${-hrd}${-hrd} 0 0 ${hrd} ${hrd} 0z`)
		path#si0(d=`M${2*hrd} ${hrd} 0 ${3*hrd}${-2*hrd} ${hrd} 0${-hrd}z`)
		path#si1(d=`M${-2*hrd} ${hrd}${-3*hrd} 0${-2*hrd}${-hrd}${-hrd} 0z`)
		path#si2(d=`M0${-hrd}${-hrd}${-2*hrd}${-2*hrd}${-hrd}${-hrd} 0z`)
		path#si3(d=`M0${-hrd} ${hrd}${-2*hrd} ${2*hrd}${-hrd} ${hrd} 0z`)
		path#si4(d=`M${2*hrd} ${hrd} ${3*hrd} 0 ${2*hrd}${-hrd} ${hrd} 0z`)
	//-points
	g(stroke=darken color=llight)
		circle(cx=-hrd r=+pr2.toFixed(e))
		circle(cx=hrd r=+pr2.toFixed(e))
		circle(cy=hrd r=+pr2.toFixed(e))
		circle#e0(cx=2*hrd cy=hrd r=+pr.toFixed(e))
		circle#e1(cx=-2*hrd cy=hrd r=+pr.toFixed(e))
		circle#e2(cx=-2*hrd cy=-hrd r=+pr.toFixed(e))
		circle#e3(cy=-hrd r=+pr.toFixed(e))
		circle#e4(cx=2*hrd cy=-hrd r=+pr.toFixed(e))
		circle#i0(cy=3*hrd r=+pr1.toFixed(e))
		circle#i1(cx=-3*hrd r=+pr1.toFixed(e))
		circle#i2(cx=-hrd cy=-2*hrd r=+pr1.toFixed(e))
		circle#i3(cx=hrd cy=-2*hrd r=+pr1.toFixed(e))
		circle#i4(cx=3*hrd r=+pr1.toFixed(e))
	//-point names
	g#l(color=darken)
		text#le0(x=(2*hrd - .2*fs).toFixed(e) y=(hrd + 1.2*fs).toFixed(e)) B<tspan>0</tspan>
		text#le1(x=(-(2*hrd + .6*fs)).toFixed(e) y=(hrd + 1.2*fs).toFixed(e)) B<tspan>1</tspan>
		text#le2(x=(-(2*hrd + .6*fs)).toFixed(e) y=-(hrd + .6*fs).toFixed(e)) A<tspan>1</tspan>
		text#le3(y=-(hrd + .5*fs).toFixed(e)) T
		text#le4(x=(2*hrd - .2*fs).toFixed(e) y=-(hrd + .6*fs).toFixed(e)) A<tspan>0</tspan>
		text#li0(x=.2*fs y=(3*hrd + .8*fs).toFixed(e)) C
		text#li1(x=(-(3*hrd + .4*fs)).toFixed(e) y=(1.1*fs).toFixed(e)) E<tspan>1</tspan>
		text#li2(x=(-(hrd + .4*fs)).toFixed(e) y=-(2*hrd + .4*fs).toFixed(e)) D<tspan>1</tspan>
		text#li3(x=(hrd - .4*fs).toFixed(e) y=-(2*hrd + .4*fs).toFixed(e)) D<tspan>0</tspan>
		text#li4(x=(3*hrd - .4*fs).toFixed(e) y=(1.1*fs).toFixed(e)) E<tspan>0</tspan>
View Compiled
body {
	display: flex;
	margin: 0;
	height: 100vh
}

svg {
	display: block;
	width: 100vw; height: 100vh
}
const ACTS = ['add', 'remove'], 
			_O = {
				coords: {
					e: document.querySelectorAll(`[id*='te']`), 
					i: document.querySelectorAll(`[id*='ti']`)
				}, 
				square: {
					e: document.querySelectorAll(`[id*='se']`), 
					i: document.querySelectorAll(`[id*='si']`)
				}, 
				points: {
					e: document.querySelectorAll(`circle[id*='e']`), 
					i: document.querySelectorAll(`circle[id*='i']`)
				}, 
				labels: {
					e: document.querySelectorAll(`[id*='le']`), 
					i: document.querySelectorAll(`[id*='li']`)
				}
			}, 
			_CURVES = document.querySelectorAll(`[id*='c']`);

let hl = null;

function highlight(new_hl, act_id = 1) {
	const ACT = ACTS[.5*(1 - act_id)], 
				SEI = (~~(.5*(new_hl.id + Math.ceil(.5*new_hl.id))))%3;
	
	for(let p in _O) {
		let aid = (p === 'square' && new_hl.typ === 'e') ? SEI : new_hl.id;
		
		_O[p][new_hl.typ][aid].classList[ACT]('hl')
	}
	
	_CURVES[(new_hl.id - (new_hl.typ === 'e') + 5)%5].classList[ACT]('hl');
	hl = act_id > 0 ? new_hl : null
};

addEventListener('click', e => {
	const _T = e.target;
	
	if(hl) highlight(hl, -1);
	
	if(_T.id !== '' && /l?e|i\d/.test(_T.id)) {
		_T.id = _T.id.replace('l', '');
		highlight({typ: _T.id.charAt(0), id: +_T.id.charAt(1)});
	}
}, false);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.