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" />
		<clipPath id="clip">
			<rect id="clip_rect" d="M-3,-5h4v7h2v1h-6z" fill="#000" />
		</clipPath>
	</defs>
	<g transform="translate(4.6 4.6) rotate(-45)">
		<use xlink:href="#link" stroke="#8426da" />
		<use id="second_link" xlink:href="#link" stroke="#5EBDF4" transform="translate(2 2) rotate(90)" />
		<use xlink:href="#link" stroke="#8426da" 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 * 2} ${radius * 2}) rotate(90)`);
	clip_rect.setAttribute("x", `${radius}`);
	clip_rect.setAttribute("y", `-${radius + stroke * 2}`);
	clip_rect.setAttribute("width", `${radius + stroke * 2}`);
	clip_rect.setAttribute("height", `${stroke * 2 + radius * 3}`);
}

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();

var startTime = new Date();
var duration = 1000;

function animate () {
	var frame = (new Date() - startTime) % duration;
	setPaths(Math.cos((frame / duration) * Math.PI * 2) / 2 + .5, 2);
	requestAnimationFrame(animate);
}

animate();