hyprlink logo iteration

by phloe

HTML

<svg viewBox="0 0 12 8" width="360" height="240">
	<defs>
		<path id="link" d="M-2,0v-2a2 2 0 0 1 4 0v2a2 2 0 0 1 -4 0" fill="transparent" stroke-width="2" />
	</defs>
	<clipPath id="clip">
		<rect id="clip_rect" d="M-3,-5h4v7h2v1h-6z" fill="#000" />
		<!--rect x="-3" y="-5" width="4" height="8" fill="#000" />
		<rect x="1" y="2" width="2" height="1" fill="#000" /-->
	</clipPath>
	<g transform="translate(4.6 4.6) rotate(-45)">
		<use xlink:href="#link" stroke="pink" />
		<use id="second_link" xlink:href="#link" stroke="#8426da" transform="translate(2 2) rotate(90)" />
		<use xlink:href="#link" stroke="#5EBDF4" clip-path="url(#clip)" />
	</g>
</svg>


<fieldset>
	<label id="radius-input">
		Radius: <span>1</span>
		<input type="range" value="1" min="0" max="2" step="0.001"/>
	</label>

	<label id="stroke-input">
		Stroke: <span>2</span>
		<input type="range" value="2" min="0.01" max="4" step="0.001"/>
	</label>
</fieldset>

CSS

fieldset {
	border: 0;
	background-color: rgba(0, 0, 0, .1);
	padding: 20px;
	position: fixed;
	right: 0;
	bottom: 0;
}
input {
	display: block;
}
fieldset label {
	display: block;
}
fieldset label + label {
	margin-top: 20px;
}

JavaScript

function setPaths (radius, stroke = 1) {
	var r = radius + (stroke / 2);
	link.setAttribute("d", `
		M-${r},0
		v-${stroke}
		a${r} ${r} 0 0 1 ${r * 2} 0
		v${stroke}
		a${r} ${r} 0 0 1 ${-r * 2} 0
	`);
	link.setAttribute("stroke-width", stroke);
	second_link.setAttribute("transform", `translate(${radius + stroke / 2} ${radius + stroke / 2}) rotate(90)`);
	clip_rect.setAttribute("x", `${stroke / 2}`);
	clip_rect.setAttribute("y", `-${radius + stroke * 2}`);
	clip_rect.setAttribute("width", `${radius + stroke * 1.5}`);
	clip_rect.setAttribute("height", `${stroke * 2.5 + radius * 2}`);
	/*
	mask_white.setAttribute("x", `-${radius + stroke}`);
	mask_white.setAttribute("y", `-${radius + stroke * 2}`);
	mask_white.setAttribute("width", `${(radius + stroke) * 2}`);
	mask_white.setAttribute("height", `${(radius + stroke) * 2 + stroke}`);
	mask_black.setAttribute("d", `
		M-${radius + stroke},-${radius + stroke * 2}
		h${radius + stroke * 1.5}
		v${stroke * 2.5 + radius * 2}
		h${stroke *1.5 + radius}
		v${stroke / 2}
		h-${(radius + stroke)*2}
		Z
	`);
	*/
}

var inputs = {
	radius: null,
	stroke: null
};

Object.keys(inputs).forEach(function (key) {
	var callback = inputs[key];
	var label = window[key + "-input"];
	var span = label.getElementsByTagName("span")[0];
	var input = label.getElementsByTagName("input")[0];

	input.oninput = updateInput;

	function updateInput (event) {
		var value = parseFloat(input.value, 10);
		if (inputs[key] !== value) {
			inputs[key] = value;
			span.textContent = value;
			if (event) {
				update();
			}
		}
	}

	updateInput();
});

function update () {
	setPaths(inputs.radius, inputs.stroke);
} 

update();