JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24" width="360" height="240">
	<g transform="translate(18 18)">
		<g transform="rotate(-45)">
			<!--path id="logo__back_2" d="" class="logo__back"/-->
			<path id="logo__front" d="" class="logo__front"/>
			<path id="logo__back" d="" class="logo__back"/>
		</g>
	</g>
</svg>

CSS

.logo__front {
	fill: #333;
}
.logo__back {
	fill: #999;
}

JavaScript

const ar = (r, x = r, y = r, clockwise = 1) => `a${r} ${r} 0 0 ${clockwise} ${x} ${y}`;

const u = 6;
const s = u;
const ir = 2;
const or = ir + s;
const hu = u / 2;
const uh = 2 * u;
const lu = u - ir*2;

const yd = Math.sqrt(Math.pow(or, 2) - Math.pow(or - u, 2));
const xd = u;

const yd2 = ir;
const xd2 = or - Math.sqrt(Math.pow(or, 2) - Math.pow(ir, 2));

const d3 = `M0 ${hu}
			h${-lu/2}
			${ar(or, -or, -or)}
			v${-(lu + u)}
			${ar(or, or, -or)}
			h${lu}
			${ar(or, or, or)}
			v${lu + u}
			${ar(or, -xd, yd)}
			v${-(uh - ir + u)}
			${ar(ir, -ir, -ir, 0)}
			h${-lu}
			${ar(ir, -ir, ir, 0)}
			v${lu + u}
			${ar(ir, ir, ir, 0)}
			h${lu/2}`;

const d4 = `M${u/2} ${u/2-ir}
			${ar(ir, ir, ir, 0)}
			h${lu + u}
			${ar(ir, ir, -ir, 0)}
			v${-lu}
			${ar(ir, -ir, -ir, 0)}
			h${-(u - ir + xd2)}
			${ar(or, xd2, -yd2, 0)}
			v${-(u - ir)}
			h${u - ir}
			${ar(or, or, or)}
			v${lu}
			${ar(or, -or, or)}
			h${-(lu + u)}
			${ar(or, -or, -or)}
			v${-lu}
			${ar(or, xd, -yd)}
			`;

logo__front.setAttribute("d", d3);
logo__back.setAttribute("d", d4);