logo_compat.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 60 100">
<title>Haystack</title>
<style>
#needle {
	transform: rotate(8deg);
	transform-origin: 5.9px 64px;
	animation: 2s needle infinite alternate;
}

svg:not(:hover) #needle {
	animation-play-state: paused;
}

@keyframes needle {
	from, 30% {
		transform: rotate(8deg);
	}

	10% {
		transform: rotate(-1deg);
	}

	20% {
		transform: rotate(2deg);
	}
}
</style>

<!-- <rect width="100%" height="100%" fill="yellow" /> -->
<path id="needle" fill="#818c98" transform="rotate(8, 5.9, 64)"
      d="M 1.8 17 a 4.7 11.5 0 1 1 9 0 l -3 80 a 1 1 0 0 1 -2 0 z m 4.5 0 a 1 3 0 0 0 0 -10 a 1 3 0 0 0 0 10 z" />

<g id="magnet" fill="none" stroke-width="15" transform="translate(17, 83)">
	<path d="m 0 0 v -17 a 10 10 0 0 1 35 0 v 17" fill="none" stroke="#cc3333" />
	<line id="end" y1="2" y2="15" stroke="#9da6af" />
	<use xlink:href="#end" transform="translate(35, 0)" />
</g>

</svg>