Two Factor Logo - SVG

two-factor-logo.svg

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0 0 512 512">
	<title>Two Factor Icon</title>
	<defs>
		<style type="text/css"><![CDATA[
			.skeleton-key,
			.plus-sign,
			.code {
				stroke:#3f3c3c;
			}
			.shaft,
			.plus-sign,
			.tip {
				stroke-width:20;
			}
			.stop {
				stroke-width:10;
			}
			.tip,
			.stop {
				stroke-linecap:round;
			}
			.wp-logo {
				fill:#3f3c3c;
				fill-opacity:1;
				fill-rule:nonzero;
				stroke:none
			}
			.base {
				stroke-width:14;
			}
			.p, .w, .code {
				fill:none;
				stroke-width:12;
			}
		]]></style>
	</defs>
	<!-- The skeleton key -->
	<g class="skeleton-key">
		<!-- The tip meets up to the shaft behind the stop -->
		<path class="tip" d="M105, 41
			V136" />
		<!-- The shaft goes from the head to the stop and needs to be behind the stop -->
		<path class="shaft" d="M105, 136
			v181" />
		<path class="stop" d="M93, 136
			h24" />
		<g class="bit">
			<path class="base" d="M122, 71
				v40" />
			<path class="w" d="M189, 86
				h-60
				v-40
				h60
				m0, 20
				h-60" />
			<path class="p" d="M129, 105
				h54
				v25
				h-25
				v-25" />
		</g>
		<g class="head">
			<!-- This is the WordPress logo, untampered with except to scale and position it...gotta keep it legit -->
			<g transform="translate(170,142)">
				<g transform="scale(.7)">
					<g transform="matrix(1.25,0,0,-1.25,0,315)"> <!-- No idea why, but this takes the logo which is upside down and rotates it how it ought to be -->
						<path class="wp-logo" d="m 0,0 c 6.632,-12.101 10.406,-25.988 10.406,-40.76 0,-31.345 -16.987,-58.711 -42.246,-73.438 l 25.95,75.03 c 4.847,12.121 6.461,21.813 6.461,30.431 C 0.571,-5.609 0.365,-2.706 0,0 m -62.846,-0.925 c 5.115,0.269 9.724,0.807 9.724,0.807 4.578,0.542 4.038,7.27 -0.542,7.002 0,0 -13.762,-1.08 -22.646,-1.08 -8.348,0 -22.376,1.08 -22.376,1.08 -4.582,0.268 -5.119,-6.731 -0.539,-7.002 0,0 4.334,-0.538 8.912,-0.807 l 13.236,-36.269 -18.596,-55.763 -30.938,92.032 c 5.119,0.269 9.723,0.807 9.723,0.807 4.575,0.542 4.035,7.27 -0.543,7.002 0,0 -13.759,-1.08 -22.644,-1.08 -1.594,0 -3.473,0.039 -5.468,0.103 15.192,23.064 41.304,38.295 70.988,38.295 22.118,0 42.258,-8.457 57.373,-22.307 -0.366,0.022 -0.723,0.068 -1.1,0.068 -8.346,0 -14.268,-7.27 -14.268,-15.079 0,-7.002 4.04,-12.926 8.346,-19.927 3.231,-5.659 7.005,-12.928 7.005,-23.432 0,-7.271 -2.797,-15.71 -6.465,-27.466 l -8.477,-28.315 -30.705,91.331 z m -11.709,-124.804 c -8.34,0 -16.389,1.223 -24.003,3.462 l 25.495,74.075 26.114,-71.549 c 0.172,-0.42 0.383,-0.807 0.608,-1.171 -8.831,-3.109 -18.32,-4.817 -28.214,-4.817 m -84.962,84.969 c 0,12.318 2.642,24.011 7.357,34.577 l 40.529,-111.042 c -28.345,13.77 -47.886,42.835 -47.886,76.465 m 84.962,94.497 c -52.107,0 -94.499,-42.391 -94.499,-94.497 0,-52.108 42.392,-94.504 94.499,-94.504 52.106,0 94.5,42.396 94.5,94.504 0,52.106 -42.394,94.497 -94.5,94.497" />
					</g>
				</g>
			</g>
		</g>
	</g>
	<!-- The plus sign -->
	<g class="plus-sign">
		<path class="plus-h" d="M 220, 256
			h92" />
		<path class="plus-v" d="M 266, 210
			v92" />
	</g>
	<!-- Code -->
	<g class="code">
		<!-- digits are 50 "wide" (they're sideways, so that's actually  a vertical measurement) and 100 high (horizontal), the weird numbers account for a stroke of 12 on the lines -->
		<!-- The spacing is 31 top and bottom and 30 between each digit -->
		<!-- This is a 4 -->
		<path class="digit1" d="M 472, 37
			h-50
			v38
			m-50,0
			h100" />
		<!-- This is a 2 -->
		<path class="digit2" d="M 466, 111
			v44
			h-44
			v-38
			h-44
			v44" />
		<!-- This is a 4 -->
		<path class="digit3" d="M 472, 197
			h-50
			v38
			m-50,0
			h100" />
		<!-- This is a 2 -->
		<path class="digit4" d="M 466, 271
			v44
			h-44
			v-38
			h-44
			v44" />
		<!-- This is a 4 -->
		<path class="digit5" d="M 472, 357
			h-50
			v38
			m-50,0
			h100" />
		<!-- This is a 2 -->
		<path class="digit6" d="M 466, 431
			v44
			h-44
			v-38
			h-44
			v44" />
	</g>
</svg>