SVG used on site

This is the code for the SVG images used on this site.

SVG fundamentals

Capital letters mean absolutely positioned (e.g. draw a line to the exact coordinate x)
Lower case letters mean relatively positioned
path = defines a path
style = sets a style for path
id = Id of path
width = width
height = height
x = x position (right/left)
y = y position (down/up)
d = path to be drawn
m = move to x right, y down (negative values are reversed left, up)

Top of Square
h = horizontal line to relative position x
a = elliptical arc curve
Right side of square
v = vertical line to
a = elliptical arc curve
Bottom of Square
h = horizontal line to relative position x
a = elliptical arc curve
Left side of square
v = vertical line to
a = elliptical arc curve
z = close path by drawing stright line back to start

The way to go is, define the object in defs and then reuse it.

<use href="#square00" transform="translate(50 100)"  />

IMPORTANT The <style> set in the <def> tag cannot be changed at the <use> tag level

X in a circle

The image and code for an X in a circle.
The line colour has been changed to black, so that it is visible against the background.

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="none" stroke="#fff" stroke-width="2" >
<g>
    <path d="M19 18 l26 26"/>
    <path d="M19 44 l26-26"/>
</g>
    <circle cx="32" cy="32" r="31"/>
</svg>

Mearns Learns with circles

The image and code for the image of XL that transforms to ML with animated circles.
The code includes comments.

<svg
	class="circ_mearns_learns"
	width="100%"
	height="100%"
	viewBox="0 0 105 55"
	version="1.1"
	id="svgML"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:svg="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink">

	<defs>
		<style type="text/css">
			.circ_mearns_learns {
			--FillColor: #000000;
			--FillOpacity: 1;
			--StrokeColor: #fbc02dff;
			--StrokeWidth: 1;
			}
		</style>
	</defs>

	<defs>
		<g id="circ00" class="unitcirc00">
			<circle id="circle00"
				r="4"
				fill="var(--FillColor)"
				fill-opacity="var(--FillOpacity)"
				stroke="var(--StrokeColor)"
				stroke-width="var(--StrokeWidth)"
			/>
			<circle id="circle01"
				r="2"
				fill="var(--FillColor)"
				fill-opacity="var(--FillOpacity)"
				stroke="var(--FillColor)"
				stroke-width="var(--StrokeWidth)"
			/>
		</g>
	</defs>

  <g fill="none" stroke="var(--StrokeColor)" stroke-width="8" stroke-linejoin="round" stroke-linecap="round">
    <!-- Left diagonal line of "X" -->
    <path id="leftDiagonal" d="M 10 10 L 50 50">
      <animate attributeName="d" 
               values="M 10 10 L 50 50; M 10 10 L 10 50" 
               keyTimes="0; 1"
				begin="3s"
               dur="5s" 
               fill="freeze" />
    </path>
    <!-- Right diagonal line of "X" -->
    <path id="rightDiagonal" d="M 50 10 L 10 50">
      <animate attributeName="d" 
               values="M 50 10 L 10 50; M 50 10 L 50 50" 
               keyTimes="0; 1"
               begin="3s"
               dur="5s" 
               fill="freeze" />
    </path>
    <!-- Top "v" portion of "X" -->
    <path id="topv" d="M 10 10 L 30 30 L 50 10" />

	<!-- L using polyline for variety-->
	<polyline points="70,10 70,50 100,50" fill="none" stroke="var(--StrokeColor)"	stroke-width="8" stroke-linejoin="round" stroke-linecap="round" /> 

<!-- Circles in the M -->
		<use href="#circle00" transform="translate(10 10)" />
		<use href="#circle00" transform="translate(10 50)" />
		<use href="#circle00" transform="translate(30 30)" />
		<use href="#circle00" transform="translate(50 10)" />
		<use href="#circle00" transform="translate(50 50)" />

<!-- Circles in the L -->
		<use href="#circle00" transform="translate(70 10)" />
		<use href="#circle00" transform="translate(70 50)" />
		<use href="#circle00" transform="translate(100 50)" />

<!-- M animated circles-->
		<!-- Forward journey -->
		<use href="#circle01" transform="translate(10 50)">
			<animateTransform
				id="M-start"
				attributeName="transform"
				type="translate"
				values="0 0;
				0 -40;
				20 -20;
				40 -40;
				40 0;"
				additive="sum"
				begin="9s"
				dur="10s"
				fill="freeze" />
		</use>

		<!-- Return journey -->
		<use href="#circle01" transform="translate(50 50)">
			<animateTransform
				id="M-start"
				attributeName="transform"
				type="translate"
				values="0 0;
				0 -40;
				-20 -20;
				-40 -40;
				-40 0;"
				additive="sum"
				begin="23s"
				dur="10s"
				fill="freeze" />
		</use>

<!-- L animated circles -->    
		<!-- Forward journey -->
		<use href="#circle01" transform="translate(70 50)">
			<animateTransform
				id="L-start"
				attributeName="transform"
				type="translate"
				values="0 0;
				0 -40;
                0 0;"
				additive="sum"
				begin="19s"
				dur="4s"
				fill="freeze" />
		</use>

		<!-- Return journey -->
		<use href="#circle01" transform="translate(70 50)">
			<animateTransform
				id="L-start"
				attributeName="transform"
				type="translate"
				values="0 0;
				30 0;
                0 0;"
				additive="sum"
				begin="19s"
				dur="4s"
				fill="freeze" />
		</use>
  </g>
</svg>