JSFiddle - React, Tailwind, and code Playground

by Jared Meadows

HTML

<?xml version='1.0' standalone='no'?>
<svg width='400' height='400px' xmlns='http://www.w3.org/2000/svg' version='1.1' transform='rotate(0)' >
	<style>
		text {
			font: 45px arial;
		}
		.red {
			fill: red;
			font-weight: bold;
		}
		symbol, svg {
			overflow: visible;
		}
	</style>
	<title>intersection dot</title>
	<defs>
		<polygon id='triangle' points='-22,0 0,-9 0,9' fill='black' stroke-width='5' />
		<symbol id='thruArrow'>
			<use href='#triangle' transform='translate(62,-14)' stroke='black' />
			<polygon id='straightLeg' points='62.5,-18 90.5,-18 90.5,-10 62.5,-10' fill='black' stroke-width='5' stroke='black' />
		</symbol>
		<symbol id='leftArrow'>
			<use href='#triangle' transform='translate(68,30),rotate(270)' stroke='black' />
			<polygon id='turnLeg' points='64,30 64,10 90,10 90,18 72,18 72,30' fill='black' stroke-width='5'
			 stroke='black' />
		</symbol>
		<symbol id='rightArrow'>
			<use href='#leftArrow' transform='scale(1,-1),translate(0,28)' />
		</symbol>
		<symbol id='ebLanes'>
			<g transform='translate(-95,30)' text-anchor="end">
				<text y='-40' display='' class="red">undefined</text><!-- L -->
				<text y='0' display='' class="red">undefined</text><!-- T -->
				<text y='40' display='' class="red">undefined</text><!-- R -->
			</g>

						<use href='#leftArrow' transform='rotate(180)' display=''></use>
			<use href='#thruArrow' transform='rotate(180)' display=''></use>
			<use href='#rightArrow' transform='rotate(180)' display=''></use>
		</symbol>
		<symbol id='wbLanes'>
			<g transform='translate(95,0)' alignment-baseline='middle' text-anchor="start">
				<text y='40' display='' class="red">undefined</text><!-- L -->
				<text y='0' display='' class="red">undefined</text><!-- T -->
				<text y='-40' display='' class="red">undefined</text><!-- R -->
			</g>

			<use href='#leftArrow' display=''></use>
			<use href='#thruArrow' display=''></use>
			<use href='#rightArrow' display=''></use>
		</symbol>
		<symbol id='nbLanes'>
			<g...

CSS

html,body,svg { height: 100%; }