Communiqaid logo (C) 2020

by PhilQ

HTML

<div id="logo">
	<div class="case">
		<div class="handle"></div>
		<div class="strap left"></div>
		<div class="strap right"></div>
		<div class="icon">
			<div class="dot left"></div>
			<div class="dot mid"></div>
			<div class="dot right"></div>
			<div class="arrow"></div>
		</div>
	</div>
</div>

<h1><span>COMM</span><span>UNIQ</span><span>AID</span></h1>
<h3>Eerste hulp bij communicatie</h3>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Comfortaa:[email protected]&family=Jost:ital,wght@0,100..900;1,100..900&family=Outfit:[email protected]&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

*, *:before, *:after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

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

body {
	display: flex;
	flex-direction: column;
	gap: 0em;
	justify-content: center;
	align-items: center;
	font-family: "Outfit";
	background: radial-gradient(ellipse closest-side at center 90%, hsla(0deg, 0%, 85%, 1) 0%, hsla(0deg, 0%, 97%, 1) 100%);
}

:root {
	--emsize: 1em;
}

h1 {
	margin-top: calc(0.2 * var(--emsize));
	font-weight: 700;
	font-size: calc(3.2 * var(--emsize));
	color: hsla(225deg, 45%, 25%, 1);
	
	span:nth-child(2) {
		color: hsla(225deg, 35%, 35%, 1);
		color: hsla(220deg, 50%, 35%, 1);
	}
}

h3 {
	font-weight: 200;
	font-size: calc(1.25 * var(--emsize));
}

#logo {
	--red: hsla(350deg, 90%, 35%, 1);
	--grey: hsla(225deg, 0%, 85%, 1);
	--white: #fff;

	--case-color: var(--red);
	--case-width: calc(16 * var(--emsize));
	--case-height: calc((2/3) * var(--case-width));
	--case-radius: calc(1.6 * var(--emsize));
	
	--handle-color: #222; // var(--grey);
	--handle-width: calc(6 * var(--emsize));
	--handle-height: calc(1.2 * var(--emsize));
	--handle-radius: calc(1 * var(--emsize));
	--handle-thickness: calc(0.6 * var(--emsize));
	
	--strap-color: var(--white);
	--strap-thickness: calc(1 * var(--emsize));
	--strap-offset: calc(2 * var(--emsize));
	--strap-bump: calc(0.05 * var(--emsize));
	
	--icon-color: var(--white);
	--icon-width: calc(7 * var(--emsize));
	--icon-height: calc(4.5 * var(--emsize));
	--icon-radius: calc(0.5 * var(--icon-height));
	
	--dot-size: calc(1.1 * var(--emsize));
	--dot-offset: calc(1.2 * var(--emsize));
	
	--arrow-width: calc(1.6 * var(--emsize));
	--arrow-height: calc(1 * var(--emsize));

	.case {
		position: relative;
		width:...