hyprlink logo iteration

by phloe

HTML

<svg viewBox="0 0 9 7" 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="0" y="0" width="6" height="8" fill="#FFF" />
		<rect x="1" y="0" width="2" height="8" fill="#000" />
	</mask>
	<g transform="translate(4.5 4) rotate(-45)">
		<use xlink:href="#link" stroke="pink" transform="" />
		<use xlink:href="#link" stroke="#8426da" transform="translate(2 2) rotate(90)" />
		<use xlink:href="#link" stroke="#5EBDF4" transform="" mask="url(#mask)" />
	</g>
</svg>