domwashburn

<svg class="metronome" id="metronome"></svg>


<!-- 
 for finding the end point of the arcs:
 
 http://stackoverflow.com/questions/12342102/html5-get-coordinates-of-arcs-end
-->

domwashburn

<p class="title-1">Title 1</p>
<p class="title-2">Title 2</p>
<p class="title-3">Title 3</p>
<p class="title-4">Title 4</p>
<p class="title-5">Title 5</p>
<p class="title-6">Title 6</p>
<p class="body-copy">Use absolutely no pressure. Just like an angel's wing. Just beat the devil out of it. Put light against light - you have nothing. Put dark against dark - you have nothing. It's the contrast of light and dark that each give the other one meaning. Once you learn the technique, ohhh! Turn you loose on the world; you become a tiger. We have all at one time or another mixed some mud.</p>

domwashburn

<a class="btn--primary--sm">Test</a>
<a class="btn--primary--med">Test</a>
<a class="btn--primary--lrg">Test</a>

domwashburn

Visualizing Rhythm

Visualizing Rhythm

I stumbled upon this great TED Ed presenation about reimagining rhythm visualization and of course the wheels in my mind began to turn. I had never worked with canvas but I decided that this would be the perfect project to start learning with.

"I'm not a math major"

I'm willing to admit that walking into this I had no idea how to calculate the pieces of this circle. I just knew that I wanted to do it so ... I googled until I got it right.

I found helpful tips and formulae here:

domwashburn

<h2>Small Buttons</h2>

<a href="#" class="btn--default--sm">default</a>
<a href="#" class="btn--primary--sm">primary</a>
<a href="#" class="btn--success--sm">success</a>
<a href="#" class="btn--info--sm">info</a>
<a href="#" class="btn--warn--sm">warn</a>
<a href="#" class="btn--danger--sm">danger</a>

<h2>Medium Buttons</h2>

domwashburn

<a href="#" class="btn--primary--sm">I'm a button</a>
<a href="#" class="btn--primary--med">I'm a button</a>
<a href="#" class="btn--primary--lrg">I'm a button</a>

<a href="#" class="btn--secondary--sm">I'm a button</a>
<a href="#" class="btn--secondary--med">I'm a button</a>
<a href="#" class="btn--secondary--lrg">I'm a button</a>

<a href="#" class="btn--square--sm">I'm a button</a>
<a href="#" class="btn--square--med">I'm a button</a>

domwashburn

<a class="btn--primary--sm">Test</a>
<a class="btn--primary--med">Test</a>
<a class="btn--primary--lrg">Test</a>

domwashburn

<a class="btn--primary--sm">Test</a>
<a class="btn--secondary--lrg">Test</a>