Handwritten SVG Practice


by Jeremy Caudle
notes

A few months back I found a copy of SVG Essentials at a used bookstore in Yokosuka. It came out in 2002, but I think I'll learn quite a bit by working my way through it.

cat Stick figure of a cat Cat

View the code:

HTML and JS 
<div class="codeblock">

<svg width="140" height="170" id="cat">
			<title>cat</title>
			<desc>Stick figure of a cat</desc>
			<!-- Drawing start -->
			
			<circle cx="70" cy="95" r="50" style="stroke: black; fill: none;" />
			<circle cx="55" cy="80" r="5" stroke="none" fill="black" />
			<circle cx="85" cy="80" r="5" stroke="none" fill="black" />
				<g id="whiskers">
					<line x1="75" y1="95" x2="135" y2="85" style="stroke: black;" />
					<line x1="75" y1="95" x2="135" y2="105" style="stroke: black;" />
				</g>	
			<use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)" />
				<!-- ears -->
			<polyline points="108 62, 90 10, 70 45, 50, 10, 32, 62" style="stroke: black; fill: none;" />
				<!-- mouth -->
			<polyline points="35 110, 45 120, 95 120, 105 ,110" style="stroke: black; fill: none;"/>	
				<!-- nose -->
			<path d="M 75 90 L 65 90 A 5 10 0  0 0 75 90" style="stroke: black; fill: #ffcccc;"/>
			<text x="56" y="165" id="cat-text">Cat</text>
			<!-- Drawing end-->
		</svg>
		
		</div>
CSS 
@keyframes grow {
		from {transform: rotate(0deg); background-color: #ffffff; color: transparent; box-shadow: 0 0 0;}	
		to {transform: rotate(15deg); background-color: #00ffff; color: #ffffff; box-shadow: 0 1rem 1rem rgba(0,0,0,0.2)}
		}
	
	.codeblock {
display: flex;
flex-flow: column;
justify-content: center;
align-content: center;
padding: 2rem;
}
	
	#cat {
		margin: 1rem auto;
		width: 140px;
		height: 170px;
		animation: grow 5s ease-in-out 0s infinite alternate;
		font-family: 'Helvetica', Arial, sans-serif;
	}
	
	#cat-text {
		text-transform: uppercase;
	}

Tags