MastodonLogo.tsx

import { component$ } from '@builder.io/qwik'

export const heightsMap = {
	small: '2.4rem',
	medium: '3.5rem',
	large: '6rem',
} as const

type Props = {
	size: keyof typeof heightsMap
}

export const WildebeestLogo = component$<Props>(({ size }) => {
	const linearGradientId = `wildebeest_linear_gradient_${Math.round(Math.random() * 9999)}`
	return (
		<svg
			style={{ width: 'auto', height: heightsMap[size] }}
			viewBox="80 110 480 210"
			fill="none"
			xmlns="http://www.w3.org/2000/svg"
		>
			<path
				fill-rule="evenodd"
				clip-rule="evenodd"
				d="M125.365 179.865C119.697 179.683 115.114 179.535 113.835 180.093C65.974 200.938 105.831 292.609 110.179 302.244C112.313 297.776 113.856 293.026 114.769 288.185C113.49 287.367 112.144 286.628 110.738 285.972C112.154 285.821 113.594 285.744 115.052 285.744C119.025 285.744 122.857 286.32 126.462 287.389C123.88 293.934 119.389 299.587 113.636 303.73C118.443 304.635 127.774 305.833 133.562 302.975C137.087 294.104 137.573 284.565 134.999 276.036C135.525 275.224 136.296 274.913 137.616 275.134C139.346 278.432 140.592 281.924 141.351 285.503L163.242 280.921C164.293 275.707 164.176 270.416 162.888 265.478C163.606 264.988 164.338 264.528 165.084 264.098C167.544 269.002 168.771 274.383 168.748 279.769L171.569 279.178C174.516 271.923 175.075 264.126 173.23 257.055C173.948 256.565 174.68 256.105 175.426 255.675C178.863 262.526 179.894 270.308 178.47 277.734L189.15 275.498C197.489 273.753 203.462 266.4 203.462 257.88V199.761C203.462 180.813 182.895 168.313 164.959 174.425C159.971 176.125 154.791 177.69 149.61 178.959C143.532 180.448 133.367 180.121 125.365 179.865ZM182.872 195.331C178.693 194.629 174.338 194.536 169.918 195.137C156.606 196.946 145.545 204.655 139.015 215.268C144.3 209.58 151.512 205.617 159.806 204.49C163.376 204.005 166.893 204.079 170.268 204.647C168.172 213.813 162.415 221.764 154.42 226.631C168.85 221.866 179.557 209.825 182.872 195.331Z"
				fill={`url(#${linearGradientId})`}
			/>
			<ellipse cx="124.82" cy="223.269" rx="7" ry="6.5" transform="rotate(90 124.82 223.269)" fill="white" />
			<path
				d="M169.462 135.282C169.462 139.602 172.748 142.795 176.923 142.795C181.186 142.795 184.561 139.508 184.561 135.282C184.561 130.962 181.186 127.769 176.923 127.769C172.748 127.769 169.462 130.962 169.462 135.282Z"
				fill="white"
			/>
			<path d="M191.901 197.36H203.625V128.802H191.901V197.36Z" fill="white" />
			<path
				d="M211.053 173.411C211.053 187.499 221.534 198.769 234.591 198.769C240.275 198.769 245.516 196.609 249.512 192.946V197.36H260.437V128.802H248.713V153.126C244.805 149.933 239.92 148.054 234.591 148.054C221.534 148.054 211.053 159.324 211.053 173.411ZM223.399 173.411C223.399 165.523 228.995 159.512 236.101 159.512C243.117 159.512 248.713 165.523 248.713 173.411C248.713 181.3 243.117 187.311 236.101 187.311C228.995 187.311 223.399 181.3 223.399 173.411Z"
				fill="white"
			/>
			<path
				d="M313.719 189.001L304.393 181.676C301.106 185.808 297.82 187.593 293.201 187.593C286.451 187.593 281.921 183.836 280.767 178.013H314.962C315.14 176.229 315.229 174.444 315.229 173.036C315.229 158.855 305.547 148.054 292.224 148.054C278.546 148.054 267.888 159.23 267.888 173.599C267.888 188.062 278.724 198.769 293.468 198.769C301.906 198.769 309.1 195.294 313.719 189.001ZM281.122 168.152C282.543 162.893 286.185 159.042 292.136 159.042C297.909 159.042 301.995 162.705 302.705 168.152H281.122Z"
				fill="white"
			/>
			<path
				d="M348.44 198.769C361.497 198.769 371.977 187.499 371.977 173.411C371.977 159.324 361.497 148.054 348.44 148.054C343.111 148.054 338.137 149.933 334.229 153.22V128.802H322.504V197.36H333.429V192.946C337.515 196.609 342.755 198.769 348.44 198.769ZM346.93 187.311C339.913 187.311 334.229 181.206 334.229 173.411C334.229 165.523 339.913 159.512 346.93 159.512C353.947 159.512 359.631 165.523 359.631 173.411C359.631 181.206 353.947 187.311 346.93 187.311Z"
				fill="white"
			/>
			<path
				d="M423.571 189.001L414.245 181.676C410.959 185.808 407.673 187.593 403.054 187.593C396.304 187.593 391.774 183.836 390.619 178.013H424.815C424.992 176.229 425.081 174.444 425.081 173.036C425.081 158.855 415.4 148.054 402.077 148.054C388.399 148.054 377.74 159.23 377.74 173.599C377.74 188.062 388.576 198.769 403.32 198.769C411.758 198.769 418.953 195.294 423.571 189.001ZM390.974 168.152C392.395 162.893 396.037 159.042 401.988 159.042C407.761 159.042 411.847 162.705 412.558 168.152H390.974Z"
				fill="white"
			/>
			<path
				d="M476.589 189.001L467.263 181.676C463.977 185.808 460.69 187.593 456.072 187.593C449.322 187.593 444.792 183.836 443.637 178.013H477.833C478.01 176.229 478.099 174.444 478.099 173.036C478.099 158.855 468.418 148.054 455.095 148.054C441.417 148.054 430.758 159.23 430.758 173.599C430.758 188.062 441.594 198.769 456.338 198.769C464.776 198.769 471.971 195.294 476.589 189.001ZM443.992 168.152C445.413 162.893 449.055 159.042 455.006 159.042C460.779 159.042 464.865 162.705 465.576 168.152H443.992Z"
				fill="white"
			/>
			<path
				d="M482.621 192.288C486.352 196.139 493.457 198.769 499.941 198.769C509.978 198.769 516.462 192.57 516.462 183.46C516.462 176.886 513.176 172.942 504.738 169.091L503.317 168.434C497.721 165.898 496.211 164.489 496.211 162.423C496.211 159.982 498.165 158.573 501.54 158.573C504.649 158.573 507.402 159.7 510.244 161.86L515.307 152.562C511.754 149.839 506.07 148.054 500.83 148.054C490.793 148.054 484.043 154.347 484.043 163.175C484.043 169.655 487.773 173.787 495.856 177.356L497.81 178.201C502.784 180.455 504.116 181.77 504.116 184.024C504.116 186.747 502.251 188.25 498.964 188.25C495.678 188.25 492.036 186.747 488.306 183.648L482.621 192.288Z"
				fill="white"
			/>
			<path
				d="M540.459 161.564H550.427L550.445 161.582H550.462V149.447H540.494V132.769L529.12 139.555V149.429H521.462V161.564H529.12V181.945C529.12 188.673 530.701 193.393 533.966 195.925C537.23 198.547 542.786 199.343 550.445 198.366V186.919C546.728 187.099 544.263 187.009 543.029 186.521C541.346 185.852 540.459 184.369 540.459 181.927V161.564Z"
				fill="white"
			/>
			<path
				d="M92.4619 143.769L92.4619 178.502L92.4797 178.502C92.4797 184.72 94.0304 189.612 97.1497 193.267C100.376 196.905 104.6 198.769 109.823 198.769C115.901 198.769 120.482 196.385 123.512 191.673L126.471 186.655L129.43 191.673C132.46 196.403 137.058 198.769 143.119 198.769C148.341 198.769 152.566 196.923 155.792 193.267C158.911 189.612 160.462 184.684 160.462 178.502L160.462 143.769L148.627 151.145L148.627 177.606C148.627 183.806 146.042 186.942 140.909 186.942C135.187 186.942 132.353 183.233 132.353 175.833L132.353 159.723L120.589 159.723L120.589 175.833C120.589 183.197 117.719 186.942 112.033 186.942C106.882 186.942 104.315 183.806 104.315 177.606L104.315 151.127L92.4619 143.769Z"
				fill="white"
			/>
			<path
				fill-rule="evenodd"
				clip-rule="evenodd"
				d="M182.874 195.331C179.081 194.73 175.146 194.631 171.149 195.096V149.463H182.874V195.331Z"
				fill="white"
			/>
			<defs>
				<linearGradient
					id={linearGradientId}
					x1="163.802"
					y1="275.616"
					x2="167.456"
					y2="175.129"
					gradientUnits="userSpaceOnUse"
				>
					<stop stop-color="#563ACC" />
					<stop offset="1" stop-color="#6364FF" />
				</linearGradient>
			</defs>
		</svg>
	)
})