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>
	<mask id="mask">
		<rect x="-3" y="-5" width="6" height="8" fill="#FFF" />
		<path id="masked" 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" /-->
	</mask>
	<g transform="translate(4.6 4.6) rotate(-45)">
		<use xlink:href="#link" stroke="pink" />
		<use xlink:href="#link" stroke="#8426da" transform="translate(2 2) rotate(90)" />
		<use xlink:href="#link" stroke="#5EBDF4" mask="url(#mask)" />
	</g>
</svg>

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
	`);
	masked.setAttribute("d", `
		M-${radius + stroke},-${radius + stroke * 2}
		h${radius * 2 + stroke * 1.5}
		v${stroke * 3 + radius}
		h${stroke / 2}
		v${radius}
		h-${(radius + stroke)*2}
		Z
	`);
}

setPaths(.5);