@ -0,0 +1,48 @@ | |||
defaultClass = 'mastodon-shape' | |||
pieces = [ | |||
'path#mastodon-tusk-front, path#mastodon-tusk-back', | |||
'path#mastodon-nose', | |||
'path#mastodon-cheek', | |||
'path#mastodon-forehead', | |||
'path#mastodon-backhead', | |||
'path#mastodon-ear', | |||
] | |||
pieceIndex = 0 | |||
firstPiece = pieces[0] | |||
currentTimer = null | |||
delay = 100 | |||
runs = 0 | |||
stop_at_run = 1 | |||
clearHighlights = -> | |||
$(".#{defaultClass}.highlight").attr('class', defaultClass) | |||
start = -> | |||
clearHighlights() | |||
pieceIndex = 0 | |||
runs = 0 | |||
pieces.reverse() unless pieces[0] == firstPiece | |||
clearInterval(currentTimer) if currentTimer | |||
currentTimer = setInterval(work, delay) | |||
stop = -> | |||
clearInterval(currentTimer) | |||
clearHighlights() | |||
work = -> | |||
clearHighlights() | |||
$(pieces[pieceIndex]).attr('class', "#{defaultClass} highlight") | |||
if pieceIndex == pieces.length - 1 | |||
pieceIndex = 0 | |||
pieces.reverse() | |||
runs++ | |||
else | |||
pieceIndex++ | |||
if runs == stop_at_run | |||
stop() | |||
$ -> | |||
setTimeout(start, 500) |
@ -0,0 +1,11 @@ | |||
<svg xmlns="http://www.w3.org/2000/svg" width="<%= dim %>" height="<%= dim %>" class="mastodon" viewBox="-100 0 1390 750"> | |||
<circle cx="600" cy="380" r="500" fill="#9baec8" class="mastodon-backdrop"/> | |||
<path fill="#282c37" d="M500 200l130-60h140l160 130-90 160-250 45-150-24-26 56 16 83h60l10 40-50 50-80-40-60-160 90-180" class="mastodon-shape" id="mastodon-head-backdrop"/> | |||
<path fill="#282c37" d="M442.1204 451.3337l-42.08-151.3737-.0425.0424-89.993 180.007 60.002 159.9848 80.003 40.0015 49.9913-49.9913-10.011-40.0015h-59.981l-16.0134-82.994 26.003-56.015 2.121.3393z" class="mastodon-shape" id="mastodon-nose"/> | |||
<path fill="#282c37" d="M498.2625 201.7378L400.0403 299.96l42.08 151.3737 147.8742 23.67.5515-.106-92.2835-273.16z" class="mastodon-shape" id="mastodon-cheek"/> | |||
<path fill="#282c37" d="M498.2625 201.7378l92.2835 273.16.7635-.1273L770.0862 140.06l-.0848-.0637H629.996l-129.9943 60.0023-1.7392 1.7392z" class="mastodon-shape" id="mastodon-forehead"/> | |||
<path fill="#282c37" d="M770.0862 140.06L591.3095 474.7705l248.684-44.7737 90.014-160.006L770.0862 140.06z" class="mastodon-shape" id="mastodon-backhead"/> | |||
<path fill="#fff" d="M440 450l-40 80-170-20L70 390-80 230 0 390l100 100 120 100 120 20h130l90-140" class="mastodon-shape" id="mastodon-tusk-front"/> | |||
<path fill="#d9e1e8" d="M268 516L120 360 80 260l70 90 110 90 59 22-8 18 15 41" class="mastodon-shape" id="mastodon-tusk-back"/> | |||
<path fill="#282c37" d="M780 190l110 80-80 140-40-80" class="mastodon-shape" id="mastodon-ear"/> | |||
</svg> |