BCR logo svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
	id="bcr-logo" viewBox="-300 -300 600 600" width="1.5in" height="1.5in">
	<title>Boston Change Ringers</title>
	<style type="text/css">
		<![CDATA[
			* {
				stroke: black;
				fill: black;
				stroke-width: 3px;
			}

			#wheel-rim {
				stroke-width: 6px;
				fill: none;
			}

			.rope-wrap {
				stroke-linecap: round;
				stroke-width: 5px;
			}

			#bcr {
				font-family: Futura, sans;
				fill: black;
				stroke-width: 1px;
				font-size: 50px;
			}
		]]>
	</style>

	<!-- rotate the whole thing to a jaunty angle... -->
	<g transform="rotate(165)">

		<!-- this transform turns mathematical coordinates (positive-y goes up)
			 into svg coordinates (positive-y goes down). This just makes it easier
			 to think about things like sin and cosine. -->
		<g transform="matrix(1,0,0,-1,0,0)">

			<!-- create the bell and a clapper -->
			<g id="bell-and-clapper" transform="translate(0,-185)">
				<!-- this path was created based off of a bell space traced
					 in a graphical program. It's simpler, having only one control
					 point in the middle of the bell. -->
				<path id="bell" d="
					M 0,0
					L 120,0
					C 125,10 130,20 120,30
					C 130,20 100,50 90,60
					C 55,110 65,150 65,175
					C 65,190 30,200 0,200
					C -30,200 -65,190 -65,175
					C -65,150 -55,110 -90,60
					C -100,50 -130,20 -120,30
					C -130,20 -125,10 -120,0
					L 0,0
				" />

				<!-- create the clapper pointing down, then rotate it to be
					 near the edge of the bell -->
				<g id="clapper" transform="rotate(-20,0,180)">
					<circle id="clapper-ball" cx="0" cy="-3" r="20" />
					<polygon id="clapper-flight" points="0,-5 -10,-35 10,-35 0,-5" />
				</g>
			</g>

			<!-- create the wheel -->
			<g id="wheel">
				<circle id="wheel-rim" cx="0" cy="0" r="200" />
				<line id="cross-bar" x1="-200" y1="0" x2="200" y2="0" />
				<rect id="headstock" x="-15" y="0" width="30" height="50" />
				<line id="left-vertical" x1="-15" y1="0" x2="-15" y2="200" />
				<line id="right-vertical" x1="15" y1="0" x2="15" y2="200" />
				<!-- I think these are 55 degrees -->
				<line id="left-top-diagonal" x1="-15" y1="40" x2="-115" y2="164" />
				<line id="right-top-diagonal" x1="15" y1="40" x2="115" y2="164" />
				<!-- the bottom points end at 45deg -->
				<line id="left-bottom-diagonal" x1="-75" y1="0" x2="-141" y2="-141" />
				<line id="right-bottom-diagonal" x1="75" y1="0" x2="141" y2="-141" />
				<line id="left-support" x1="-200" y1="0" x2="-15" y2="25" />
				<line id="right-support" x1="200" y1="0" x2="15" y2="25" />
			</g>

			<!-- create the rope and the wrapping. -->
			<g id="rope" transform="translate(0,139)">
				<line class="rope-wrap" x1="-17" x2="17" y1="0" y2="0" />
				<line class="rope-wrap" x1="-17" x2="17" y1="5" y2="5" />
				<line class="rope-wrap" x1="-17" x2="17" y1="10" y2="10" />
				<line class="rope-wrap" x1="-17" x2="17" y1="15" y2="15" />
				<line class="rope-wrap" x1="-17" x2="17" y1="20" y2="20" />
				<line class="rope-wrap" x1="-17" x2="115" y1="25" y2="25" />
			</g>
		</g>

		<!-- in order to make the text-on-a-path work, we need to be in a different
			 transformation space. I think this one reflects across x=y, but why
			 this works I don't know. It just does. -->
		<g id="bcr-on-path" transform="matrix(-1,0,0,-1,0,0)">
			<defs>
				<!-- create a circle with radius 270: radius of wheel
					 (200) + font size (50) + spacing (20) -->
				<!-- these points correspond to 30deg -->
				<path id="text-circle" d="
					M -233,-135
					A 270,270 0 1,0 233,-135
				" />
			</defs>

			<text>
				<!-- textLength calculated as the arclength along the outer circle -->
				<textPath id="bcr" xlink:href="#text-circle" textLength="1135">BOSTON CHGANE RNIERGS</textPath>
			</text>
		</g>

	</g>

</svg>