Junkyard Tornado.svg

<svg xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 900 600"
>
<rect style="width: 100%; height: 100%; fill: #FFF; opacity: 0.35" />
<style>
	text { font-size: 140%; /* dominant-baseline: hanging; */ text-anchor: middle;
	transform: translate( 0, 1.4ex );
/* "dominant-baseline" 's behavior is less reliable across browsers. */
	}
	g[stroke] text { stroke: none; }

	path[_] { stroke: gray; marker-end: url( #arrow0 ); }
	path[_1] { stroke: gray; marker-end: url( #arrow1 ); }
</style>

<defs>
	<marker id="arrow0" orient="auto"
	viewBox="0 0 10 10" refX="9" refY="5"
	markerWidth="15" markerHeight="11.25" preserveAspectRatio="none"
	><polygon points="0,0 10,5 0,10" /></marker>

<!-- "context-*" alike currently may not be well supported. -->
	<marker id="arrow1" orient="auto" fill="context-stroke"
	overflow="visible" refX="12" refY="12"
	><polygon points="0,0 24,12 0,24" /></marker>

	<circle id="circle" r="48" fill="none" />
</defs>

<!---->

	<text x="50%" y="5" style="font-size: 250%">Machine/Deep Learning Model</text>
<g transform="translate( 8, 54 )">
	<path stroke="#0FF" stroke-dasharray="1 2" d="
	M 48,145 L 234,75
	M 48,145 L 234,215
	M 48,145 L 234,355
	M 48,145 L 234,495
	M 48,285 L 234,75
	M 48,285 L 234,215
	M 48,285 L 234,355
	M 48,285 L 234,495
	M 48,425 L 234,75
	M 48,425 L 234,215
	M 48,425 L 234,355
	M 48,425 L 234,495

	M 234,75 L 420,215
	M 234,75 L 420,355
	M 234,215 L 420,215
	M 234,215 L 420,355
	M 234,355 L 420,215
	M 234,355 L 420,355
	M 234,495 L 420,215
	M 234,495 L 420,355
	" />

	<g fill="red" stroke="red" transform="translate( 48, 70 )">
	<text>Input</text>
	<use href="#circle" y="75" />
	<use href="#circle" y="215" />
	<use href="#circle" y="355" />
	</g>
<!--
	Legacy browsers may demand "xlink:href" used instead of "href".
	Also the presence of `xmlns:xlink="http://www.w3.org/1999/xlink"` verbiage in the "<svg>" header...
-->

	<path _="" d="M 96,127 L 186,93" />
	<path _="" d="M 96,163 L 186,197" />
	<path _="" d="M 82,183 L 200,317" />
	<path _="" d="M 72,190 L 210,450" />

	<path _="" d="M 82,247 L 200,113" />
	<path _="" d="M 96,267 L 186,233" />
	<path _="" d="M 96,303 L 186,337" />
	<path _="" d="M 82,323 L 200,457" />

	<path _="" d="M 72,380 L 210,120" />
	<path _="" d="M 82,387 L 200,253" />
	<path _="" d="M 96,407 L 186,373" />
	<path _="" d="M 96,443 L 186,477" />

	<g fill="blue" stroke="blue" transform="translate( 234 )">
	<text>Hidden</text>
	<use href="#circle" y="75" />
	<use href="#circle" y="215" />
	<use href="#circle" y="355" />
	<use href="#circle" y="495" />
	</g>

	<path _="" d="M 275,106 L 379,184" />
	<path _="" d="M 262,117 L 391,312" />

	<path _="" d="M 285,215 L 369,215" />
	<path _="" d="M 275,246 L 379,324" />

	<path _="" d="M 275,324 L 379,246" />
	<path _="" d="M 285,355 L 369,355" />

	<path _="" d="M 262,453 L 391,258" />
	<path _="" d="M 275,464 L 379,386" />

	<g fill="green" stroke="green" transform="translate( 420, 140 )">
	<text>Output</text>
	<use href="#circle" y="75" />
	<use href="#circle" y="215" />
	</g>

	<path _1="" d="M 468,285 L 508,285" />

	<g fill="gray" transform="translate( 520, 87 )">
<symbol id="_1" width="334" overflow="visible">
<symbol id="box" height="84">
	<rect width="100%" height="100%" rx="20" />
	<circle id="dot" cx="52" cy="50%" r="11" fill="white" />
	<use href="#dot" x="52" />
	<use href="#dot" x="104" />
</symbol>
<!--
	Specifying "width" "height" for each relevant "<use>" may be necessary for old browsers.
	(missing support for "width" "height" in "<symbol>")

	CSS support for "width" "height" is quirky.
-->
	<use href="#box" />
	<use href="#box" y="104" />
	<use href="#box" y="208" />
<!--
	Quirky support for "refX", "refY":
	https://stackoverflow.com/questions/63967987
	https://stackoverflow.com/questions/53159797
-->
<style>
/* https://caniuse.com/css-variables */
	:root {
	--1: 32px;
	--11: calc( 50% - var(--1) / 2 );
	--12: calc( 50% + var(--1) / 2 );
	--2: 42px;
	--21: 292px;
	--22: calc( var(--21) + var(--2) + var(--margin) );
	--margin: 22px; }
</style>
<!--
	Not writing unit may fail Firefox. (which asserted so...)

	"x", "y" may not be used as "style" in old browsers.
-->
	<rect style="width: var(--1); height: var(--2); x: var(--11); y: var(--21)" />
	<rect style="width: var(--1); height: var(--1); x: var(--11); y: var(--22)" />
	<rect width="159" style="height: var(--1); x: calc( var(--12) + var(--margin) ); y: var(--22)" />
	<rect style="--0: 153px; width: var(--0); height: var(--1); x: calc( var(--11) - var(--margin) - var(--0) ); y: var(--22)" />
</symbol>
<!--
	"<g>" doesn't support "width" "height".
-->
	<use href="#_1" />
	</g>
</g>
</svg>
<!--

	How living standard failed, on live...

	Deployment before careful consideration, leading to ill designs incorrigible:
	How to fix?

	See also:
	https://github.com/MasterInQuestion/Markup/issues/2
	https://github.com/MasterInQuestion/talk/discussions/15#discussioncomment-8264410

-->