Let’s create a Spider Clock Animation using HTML, CSS, and JavaScript. This unique project will feature a creative clock design inspired by a spider – where the clock hands move like spider legs, creating an eye-catching and animated effect.
We’ll use:
- HTML to structure the clock elements.
- CSS to style the spider web and animate the clock hands.
- JavaScript to update the time dynamically and control the movement of the spider legs (clock hands).
This project is perfect for practicing both animation and functionality while adding a creative twist to a traditional clock. Let’s get started and spin time with the Spider Clock Animation! 🕷️🕸️
HTML :
This HTML code creates an animated spider-shaped clock using SVG and GSAP. It has circular gears, hands for hours, minutes, and seconds, and a spider body in the center. The <filter> elements add soft shadow or glow effects, while the <path> and <use> tags define and reuse SVG shapes. The JavaScript animates the spider and clock hands in real time, making it look alive and constantly moving.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Spider Clock Animation | @coding.stella</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="vline"></div>
<div class="gsapWrapper">
<div id="wBody">
<div id="watch">
<svg id="watchSVG" overflow="visible" version="1.1" viewBox="0 0 300 300"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="matrix(0.97,0.02,-0.02,0.97,19.19,-6.07)">
<use class="cog cw t24" fill-opacity="0.4" href="#cog1" />
</g>
<use class="cog ccw t12" href="#cog2" fill-opacity="0.4" />
<g transform="matrix(0.93,0,0,0.93,9.460262,5.75)">
<use class="cog cw t24" fill-opacity="0.4" href="#cog1"
transform="rotate(-51.810031,132.27636,-30.515465)" />
</g>
<g transform="rotate(-3.7621103,160.78969,349.2265)">
<use class="cog cw t20" fill-opacity="0.4" href="#cog5" />
</g>
<g transform="rotate(-2.7463672,162.45282,88.573956)">
<use class="cog ccw t12" href="#cog2" fill-opacity="0.5"
transform="rotate(-117.25759,103.54258,173.50156)" />
</g>
<g transform="rotate(-10.176195,143.10035,73.854981)">
<use class="cog ccw t12" href="#cog2" fill-opacity="0.5"
transform="rotate(-34.224386,-107.18833,39.101999)" />
</g>
<use class="cog ccw t12" fill-opacity="0.08" href="#cog5" filter="url(#blur1)"
transform="matrix(1.756136,-0.11547602,0.11547602,1.756136,-258.10202,-151.7933)" />
<use class="cog cw t24" fill-opacity="0.05" href="#cog1" filter="url(#blur2)"
transform="matrix(2.2837863,0.04708838,-0.04708838,2.2837863,58.766756,-235.77904)" />
<use class="cog ccw t12" fill-opacity="0.03" href="#cog1" filter="url(#blur3)"
transform="matrix(4.1933711,0.08646126,-0.08646126,4.1933711,-272.22866,-548.76437)" />
<use id="clockFace" fill="#FFFFFF" fill-opacity="0.15" stroke="none" href="#arabic"
filter="url(#shadow)" />
<g id="spider" style="display:inline" transform="matrix(3.7795276,0,0,3.7795276,0,-3.2951691e-6)">
<path id="hands-small" fill="#FFFFFF" stroke="none" filter="url(#shadow)"
d="m 33.5,21.4 -3.7,8.4 c -0.1,0.3 -0.1,0.5 0,0.7 l 1.4,6.4 6,1.8 -6,1.9 -1.4,4.7 c -0.1,0.3 -0.1,0.5 0.1,0.8 l 3.6,5.7 0.5,-0.2 c -2.1,-3.6 -2.9,-5.2 -2.8,-5.9 0.8,-4.4 1.5,-3.3 8.5,-5.3 7,2 7.3,0.8 8.5,5.3 0.2,0.7 -0.3,1.8 -2.8,5.9 l 0.5,0.2 3.5,-5.7 c 0.1,-0.2 0.2,-0.4 0.1,-0.7 l -1.3,-4.8 -6,-1.9 6,-1.8 1.4,-6.4 c 0.1,-0.3 0.1,-0.4 0,-0.7 l -3.7,-8.4 -0.5,0.2 c 1.8,4.3 3,7.6 2.9,8.4 -0.4,6.2 -1.5,5.1 -8.6,7.1 -7.1,-2 -8.2,-0.9 -8.6,-7.1 -0.1,-0.7 1.1,-4.1 2.9,-8.4 z" />
<g id="hr">
<circle fill="#FFFFFF" fill-opacity="0" stroke="none" cx="39.75" cy="39.14" r="56.37" />
<path id="hand-hr" fill="#FFFFFF" stroke="none" filter="url(#shadow)" d="" />
</g>
<g id="min">
<circle fill="#FFFFFF" fill-opacity="0" stroke="none" cx="39.75" cy="39.14" r="56.37" />
<path id="hand-min" fill="#FFFFFF" stroke="none" filter="url(#shadow)" d="" />
</g>
<g id="sec">
<circle fill="#FFFFFF" fill-opacity="0" stroke="none" cx="39.75" cy="39.14" r="56.37" />
<path id="hand-sec" fill="#FFFFFF" stroke="none" filter="url(#shadow)" d="" />
</g>
<path id="body" fill="#FFFFFF" stroke="none" filter="url(#shadow2)"
d="m 38.3,32.5 c -0.8,0.4 -4.1,4.1 -1.3,8 -0.3,1.1 0,4.1 2.6,4.2 2.6,0.1 3.1,-3 2.6,-4.2 2.5,-3.5 0.1,-7.3 -0.9,-8 -1.2,-1 -1.7,-1.1 -3,0 z" />
<path id="face" fill="#FFFFFF" stroke="none" filter="url(#shadow2)" d="" />
<path id="hideShadow" fill="#FFFFFF" stroke="none"
d="m 42,43.2 c -0.2,0.5 -1.2,1.6 -2.4,1.6 -1.1,0 -2,-1.1 -2.3,-1.7 -0.3,-0.5 1.1,-1.2 2.3,-1.2 1.1,0 2.6,0.7 2.4,1.2 z" />
</g>
</svg>
</div>
</div>
</div>
<svg width="0" width="0" role="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id='shadow' x="-5%" y="-5%" width="110%" height="110%">
<feDropShadow dx="0" dy="0" flood-color="#a0a0a0" stdDeviation="1" />
</filter>
<filter id='shadow2' x="-25%" y="-25%" width="150%" height="150%">
<feDropShadow dx="0" dy="0" flood-color="#a0a0a0" stdDeviation="1.25" />
</filter>
<filter id='blur1'>
<feGaussianBlur stdDeviation='0.5' result='blur' />
</filter>
<filter id='blur2'>
<feGaussianBlur stdDeviation='0.625' result='blur' />
</filter>
<filter id='blur3'>
<feGaussianBlur stdDeviation='0.75' result='blur' />
</filter>
<path id="face01"
d="m 37.9,43.9 h 3.6 c 0.5,0.5 -0.3,2.2 -0.7,2.4 -0.2,0 -0.3,0.1 -0.5,0.1 -0.1,-0.5 0.6,-1.4 0.4,-1.6 -0.1,-0.1 -0.7,0.3 -1.2,0.3 -0.4,0 -0.6,-0.3 -0.9,-0.4 -0.4,0 0.1,1 0.2,1.7 0,0 -0.3,-0.1 -0.5,-0.1 -0.6,-0.7 -0.8,-1.7 -0.4,-2.4 z" />
<path id="face02"
d="m 37.9,43.9 h 3.6 c 0.5,0.5 -0.8,2.2 -1.2,2.4 -0.2,0 -0.3,0.1 -0.5,0.1 -0.1,-0.5 1.1,-1.4 0.9,-1.6 -0.1,-0.1 -0.7,0.3 -1.2,0.3 -0.4,0 -0.6,-0.3 -0.9,-0.4 -0.4,0 0.6,1 0.7,1.7 0,0 -0.3,-0.1 -0.5,-0.1 -0.6,-0.7 -1.3,-1.7 -0.9,-2.4 z" />
<path id="face01"
d="m 37.9,43.9 h 3.6 c 0.5,0.5 0.3,1.9 -0.1,2.4 -0.5,0.4 -0.6,0.1 -0.6,0.1 0.1,-0.5 0.1,-1.4 -0.1,-1.6 -0.1,-0.1 -0.7,0.3 -1.2,0.3 -0.4,0 -0.6,-0.3 -0.9,-0.4 -0.4,0 -0.4,1 -0.3,1.7 0,0 -0.1,0.3 -0.5,-0.1 -0.6,-0.7 -0.3,-1.7 0.1,-2.4 z" />
<path id="face02"
d="m 37.9,43.9 h 3.6 c 0.5,0.5 -0.8,2.2 -1.2,2.4 -0.5,0.3 -0.5,0.1 -0.5,0.1 -0.1,-0.5 1.1,-1.4 0.9,-1.6 -0.1,-0.1 -0.6,0.3 -1.1,0.3 C 39.2,45.1 38.9,44.8 38.6,44.7 c -0.4,0 0.6,1 0.7,1.7 0,0 -0.1,0.2 -0.5,-0.1 -0.6,-0.7 -1.3,-1.7 -0.9,-2.4 z" />
<path id="handSec01"
d="M 39.4,-15.1 40,-15 c -1.8,11.7 -5.3,33.8 -4.7,34.6 -0.8,9.4 1.6,11.6 5.9,18.6 0.6,2 -1.8,3 -2.8,1.4 L 34.7,31.8 33.9,19.6 Z" />
<path id="handSec02"
d="m 39.4,-16.9 0.7,0.1 c -0.9,12.2 -2.8,36 -2,36.7 -0.4,7.1 1.1,11.1 3.2,18.5 0.3,2.1 -2.2,2.6 -3,1 l -1.4,-8 -0.2,-11.6 z" />
<path id="handMin01"
d="m 39.2,-1.1 0.6,0.2 c -1.8,6.7 -4.8,19.5 -4.5,20.5 -0.8,9.4 1.6,11.6 5.9,18.6 0.6,2 -1.8,3 -2.8,1.4 L 34.7,31.8 33.9,19.6 Z" />
<path id="handMin02"
d="m 39.4,-3.6 0.7,0.1 c -0.8,7.8 -2.3,22.5 -2,23.4 -0.4,7.1 1.1,11.1 3.2,18.5 0.3,2.1 -2.2,2.6 -3,1 l -1.4,-8 -0.2,-11.6 z" />
<path id="handHr01"
d="m 39.4,7.6 0.5,0.2 C 37.8,13.3 35.5,16.5 35.3,19.6 c -0.8,9.4 1.6,11.6 5.9,18.6 0.6,2 -1.8,3 -2.8,1.4 L 34.7,31.8 33.9,19.6 Z" />
<path id="handHr02"
d="M 39.4,5.9 40,6 C 38.5,13.9 37.8,16.9 38.1,19.9 37.7,27 39.2,31 41.3,38.4 c 0.3,2.1 -2.2,2.6 -3,1 l -1.4,-8 -0.2,-11.6 z" />
<path id="cog1" fill="#FFFFFF" stroke="none"
d="m 64.7,71.08 -3.1,9.4 c -1.2,0 -2.6,0.1 -3.8,0.2 l -4.3,-8.9 c -1.6,0.1 -3.1,0.6 -4.7,1 l -0.5,9.9 c -1.2,0.4 -2.5,0.7 -3.6,1.2 l -6.4,-7.4 c -1.5,0.7 -3.1,1.4 -4.5,2.2 l 2.1,9.5 c -1.09,0.7 -2.16,1.43 -3.2,2.2 l -8.2,-5.6 c -1.4,1.1 -2.6,2.1 -3.7,3.2 l 4.6,8.7 c -0.9,1 -1.6,1.9 -2.6,2.8 l -9.2,-3.1 c -0.9,1.3 -1.9,2.7 -2.7,4 l 6.7,7.3 c -0.6,1.1 -1.2,2.4 -1.6,3.3 l -9.9,-0.9 c -0.6,1.5 -1.1,3 -1.6,4.7 l 8.3,5.5 c -0.4,1.2 -0.5,2.6 -0.7,3.8 l -9.7,1.9 c -0.1,1.5 -0.4,3.3 -0.4,4.8 3.13,1.04 6.28,2.05 9.4,3.11 0.01,-0.03 -0.05,0.8 0.2,3.79 l -8.9,4.3 c 0.1,1.6 0.6,3.1 1,4.7 l 9.9,0.5 c 0.4,1.2 0.7,2.5 1.2,3.6 l -7.4,6.3 c 0.7,1.5 1.4,3.1 2.2,4.5 l 9.5,-2.1 c 0.7,1.09 1.43,2.16 2.2,3.2 l -5.7,8.2 c 1.1,1.4 2.1,2.6 3.2,3.7 l 8.7,-4.6 c 1,0.9 1.9,1.6 2.8,2.6 l -3.3,9.2 c 1.4,0.9 2.7,1.9 4.1,2.7 l 7.3,-6.7 c 1.1,0.6 2.4,1.2 3.3,1.6 l -0.7,9.9 c 1.5,0.6 3,1.1 4.7,1.6 l 5.5,-8.3 c 1.2,0.4 2.6,0.5 3.8,0.7 l 1.9,9.7 c 1.5,0.1 3.3,0.4 4.8,0.4 l 3.1,-9.4 c 1.2,0 2.6,-0.1 3.8,-0.2 l 4.3,8.9 c 1.6,-0.1 3.1,-0.6 4.7,-1 l 0.5,-9.9 c 1.2,-0.4 2.5,-0.7 3.6,-1.2 l 6.3,7.6 c 1.5,-0.7 3.1,-1.4 4.5,-2.2 l -2.1,-9.5 c 1.09,-0.7 2.16,-1.43 3.2,-2.2 l 8.2,5.6 c 1.4,-1.1 2.6,-2.1 3.7,-3.2 l -4.55,-8.6 c 0,-0.31 1.9,-2.31 2.55,-2.9 l 9.2,3.3 c 0.9,-1.4 1.9,-2.7 2.7,-4.1 l -6.7,-7.3 c 0.6,-1.1 1.2,-2.4 1.6,-3.3 l 9.9,0.7 c 0.6,-1.5 1.1,-3 1.6,-4.7 l -8.3,-5.5 c 0.4,-1.2 0.5,-2.6 0.7,-3.8 l 9.7,-1.9 c 0.1,-1.5 0.4,-3.3 0.4,-4.8 l -9.4,-3.1 c -0.1,-1.4 -0.1,-2.5 -0.2,-3.6 3.06,-1.25 6.1,-2.85 9.1,-4.3 -0.1,-1.6 -0.6,-3.1 -1,-4.7 l -9.9,-0.5 c -0.38,-1.15 -0.68,-2.39 -1.14,-3.46 2.26,-2.37 5.01,-4.34 7.54,-6.44 -0.7,-1.5 -1.4,-3.1 -2.2,-4.5 l -9.5,2.1 c -0.7,-1.09 -1.43,-2.16 -2.2,-3.2 l 5.6,-8.2 c -1.1,-1.4 -2.1,-2.6 -3.2,-3.7 l -8.66,4.58 H 99.08 C 98.09,93.87 97.19,93.17 96.3,92.18 l 3.3,-9.2 c -1.5,-0.9 -2.9,-1.9 -4.2,-2.8 l -7.3,6.7 c -1.2,-0.6 -2.4,-1.2 -3.4,-1.6 l 0.7,-9.9 c -1.5,-0.6 -3,-1.1 -4.7,-1.6 l -5.5,8.1 c -1.2,-0.4 -2.6,-0.5 -3.8,-0.7 l -1.9,-9.7 c -1.5,-0.1 -3.3,-0.4 -4.8,-0.4 z m 3.69,2.1 2.43,9.71 c 1.1,0.18 3.06,0.35 4.16,0.72 l 5.82,-7.46 c 1.79,-0.64 1.66,0 2.93,1.07 0.08,5.73 -2.76,11.05 -5.34,16.22 -5.64,1.75 -9.5,-4.17 -14.35,-7.12 h -0.05 c -1.17,-6.6 -1.16,-7.51 1.47,-13.35 1.03,-0.52 1.91,-0.12 2.93,0.21 z m -15.5,0.67 5.01,8.68 c 1.01,-0.08 4.68,1.21 4.73,3.82 -4.52,4.14 -9,9.41 -14.88,7.63 -1.46,-2.51 0.44,-10.15 1.53,-10.51 l 0.9,-9.21 c 0.92,-0.77 1.62,-0.61 2.71,-0.41 z m -15.06,5.41 c 5.42,2.54 6.65,10.18 8.69,15.24 -1.61,6.26 -11.36,7.83 -16.78,8.75 -2.95,-5.16 -3.89,-8.26 -5.94,-14.15 1.01,-1.01 1.08,-1.33 3.83,-0.47 l 5.64,3.47 c 0.96,-0.71 3.32,-1.65 4.32,-2.29 l -1.8,-9.35 c 0.72,-0.42 1.26,-1.17 2.04,-1.2 z m 56.87,3.43 c 1.29,0.31 1.58,0.19 2.66,1.88 l -2.63,9.64 c 0.83,0.92 1.91,2.16 -0.24,3.8 -6.36,-0.97 -11.53,1.61 -14.84,-4.03 0.97,-2.67 6.02,-5.87 7.59,-4.93 z M 62.67,88.1 c 0.28,3.61 -2.77,9.92 -3.32,13.31 -2.92,2.8 -2.79,5.22 -6.62,3.92 l -4.28,-9.75 c 5.8,1.68 9.53,-4.48 14.21,-7.48 z m 1.35,-0.01 c 4.8,2.47 8.69,7.36 13.74,6.98 0,0 -3.37,11.01 -4.49,11.18 C 69.06,107.79 64.11,103.79 60.72,101.4 60.4,97.98 63.4,92.01 64.03,88.09 Z m 43.54,4.6 c 2.63,1.32 -2.57,8.23 -3.67,10.27 0.71,0.96 2.09,2.31 3.27,3.13 l 9.12,-1.39 c 0.74,1.28 0.63,1.24 1.28,2.62 -4.29,4.86 -10.33,5.94 -15.69,7.77 -6,-2.61 -4.88,-12.06 -6.41,-16.15 4,-4.45 5.94,-5.23 12.1,-6.25 z m -60.35,3.43 c 1.98,3.28 3.93,6.56 4.28,9.74 0.43,3.58 -20.69,-0.93 -20.05,-1.6 0.87,-0.93 11.82,-1.27 15.77,-8.14 z M 79,95.57 c 2.86,4.99 9.05,2.3 14.26,3.66 -2.26,3.05 -9.82,9.88 -12.48,11.92 -4.15,-1.08 -3.6,-1.03 -6.27,-4.4 z m -50.2,8.64 c -0.68,7.68 2.58,8.02 -3.84,12.36 -2.92,-1.04 -7.17,-2.93 -8.08,-3.84 0,0 1.95,-4.13 2.51,-5.16 l -4.25,-4.61 c -1.81,-2.09 -1.7,-3.36 -0.88,-4.55 0,0 12.6,3.72 14.54,5.8 z m 1.25,1.23 c 2.93,1.98 11.34,1.61 13.65,4.36 -1.7,4.9 -4.58,8.01 -7.18,11.28 -3.31,-0.92 -6.62,-2.19 -9.93,-3.87 6.6,-3.4 1.52,-6.17 3.46,-11.77 z m 64.19,-5.29 h 0.01 c 1.38,5.5 1.84,12.18 6.01,15.6 -13.15,4.75 -12.83,6.42 -18.51,-3.68 2.05,-2.48 9.68,-9.28 12.49,-11.91 z m -34.84,2.89 c 0.08,3.81 4,9.43 3.52,13.25 -1.01,2.32 -0.95,3.89 -2.97,2.93 0,0 -2.17,-2.47 -6.55,-12.41 3.2,0.32 3.45,-1.6 6,-3.77 z m 1.34,-0.03 c 2.87,2.57 8.43,5.36 11.94,4.75 -0.97,3.62 -0.19,5.17 -1.92,8.68 -2.21,1.47 -4.86,1.4 -6.5,-0.14 -0.78,-3.81 -4,-9.45 -3.52,-13.28 z m -8.59,4.32 c 1.94,3.33 5.88,8.24 6.4,12.25 0.3,2.3 -5.53,1.91 -7.82,1.09 -3.27,-2.49 -2.51,-7.95 -4.91,-10.71 3.53,-0.49 3.67,-0.9 6.33,-2.63 z m 21.78,0.91 c 4.41,4.11 3.82,2.11 5.38,4.88 -2.38,2.84 0.63,5.08 -2.52,7.7 -2.33,0.23 -3.44,-1.58 -4.78,-3.9 1.03,-3.84 0.25,-5.34 1.92,-8.68 z M 7.1,111.67 c 6.49,-0.46 11.91,3 17.37,6.15 3.35,6.61 -5.4,8.18 -9.38,13.55 -7.1,1.32 -12.11,-0.61 -11.84,-2.34 -0.25,-2.56 1.83,-2.32 10.46,-4.38 0.19,-1.1 -0.38,-3.75 -0.01,-4.85 L 9.26,116.19 C 6.14,114.47 6.55,113.05 7.1,111.67 Z m 37.76,-0.75 h 0.01 c 3.24,2.56 2.88,8.17 5.24,10.88 0.47,2.88 1.16,3.31 -1.4,4.01 -3.56,-0.9 -7.11,-1.99 -10.7,-4.15 3.31,-3.02 4.7,-7.64 6.85,-10.74 z m 35.77,2.3 h 0.01 c 3.3,6.46 3.79,5.64 5.96,8.16 -2.6,2.84 -3.57,1.82 -7.05,3.61 -2.57,-0.96 -2,-1 -1.78,-3.27 2.35,-3.11 -0.01,-6.02 2.86,-8.51 z m 28.68,0.08 c 0.78,1.16 1.61,3.36 2.17,5.03 l 9.39,1.07 c 0.37,1.47 0.99,1.51 -0.01,3.15 l -7.59,4.8 c -1.33,0.51 1.89,3.12 -4.64,3.46 -5.63,-6.58 -6.9,-6.54 -6.21,-14.51 1.88,-1.4 4.28,-2.3 6.89,-3 z m -83.23,5.15 c 3.5,0.77 6.9,1.82 9.92,3.86 -2.08,4.41 -0.46,4.4 -4.03,8.61 -3.72,0.71 -11.67,0.55 -15.16,0.4 4.95,-4.84 10.4,-6.85 9.25,-12.86 z m 36.86,-0.68 c 0.6,3.8 1.04,7.6 0.25,11.31 -2.03,-3.47 -1.38,-5.03 -2.66,-8.51 1.76,0.47 1.23,-1.29 2.41,-2.8 z m 1.34,-0.01 c 1.38,1.08 4.28,0.67 5.94,0.05 -0.91,3.93 -3.5,6.02 -5.18,9.21 -0.54,-3.82 -0.97,-5.53 -0.75,-9.25 z m 36.53,-0.79 c -1.68,7.44 -0.31,8.13 3.24,13.93 -3.55,0.24 -7.57,0.61 -11.12,0.24 -5.38,-8.04 -4.5,-9.07 -2.39,-10.17 3.41,-1.21 6.99,-2.76 10.28,-4 z m -41.53,4.09 0,0.01 c 2.07,3.54 -0.13,2.4 0.79,5.83 -3.28,-2.51 -5.54,-2.25 -7.94,-5.02 1.89,-0.25 6.11,0.65 7.15,-0.81 z m 12.18,-2.78 0.01,0.01 c 1.22,1.49 2.62,3.61 4.29,3.57 -2.21,3.1 -6.86,5.44 -9.98,7.66 0.73,-3.55 3.8,-7.79 5.68,-11.24 z M 37.5,122.89 h 0.01 c 3.55,0.89 7.11,2.52 10.67,4.15 1.58,2.76 -2.63,2.88 -4.93,4.71 -3.81,0.44 -5.82,-0.44 -9.66,-0.88 2.88,-3.44 1.57,-4.37 3.92,-7.98 z m 13.68,-0.08 c 3.13,2.18 7.45,4.56 9.84,7.78 -3.63,-1.07 -7.27,-2.55 -10.93,-4.25 2.24,-0.54 1.37,-1.3 1.09,-3.53 z m 35.95,-0.11 c 2.03,2.84 1.53,4.24 3.84,8.41 -3.81,0.47 -8.82,1.51 -12.66,1.09 -3.66,-1.16 -0.03,-3.5 0.8,-5.7 3.48,-1.87 4.52,-2.57 8.02,-3.8 z M 76.74,122.79 c 0.35,1.94 -0.94,1.96 0.43,3.09 -2.99,1.92 -4.39,1.8 -8.29,2.98 2.24,-2.85 5,-3.45 7.86,-6.06 z m -27.18,4.79 0.01,0.01 c 3.7,0.85 3.71,1.28 7.3,3.4 -3.96,0.5 -8.16,1.26 -12.14,0.75 2.13,-1.09 5.42,-2.27 4.82,-4.15 z m 28.19,-0.46 c -0.94,2.18 -3.26,3.57 -0.93,5.13 -3.9,0.69 -5.72,-0.22 -9.52,-0.54 3.15,-1.7 6.41,-3.35 10.45,-4.59 z m -17.19,6.08 c -3.68,1.97 -7.36,3.79 -11.06,4.87 1.68,-2.08 -2.85,-3.64 -4.78,-4.99 h 0.01 C 48.65,132.04 56.58,132.8 60.56,133.2 Z m -17.32,-0.08 c 3.04,1.41 6.42,3.03 4.9,5.55 -3.19,1.69 -6.56,3.3 -10.49,4.62 2.33,-4.52 -0.11,-7.99 -4.07,-11.05 h 0.01 c 3.43,-0.66 5.4,0.4 9.64,0.88 z M 31.99,132.27 c 5.52,3.21 7.33,5.83 4.19,11.67 -2.75,1.83 -7.52,6.68 -11.03,7.9 3.58,-5.67 -3.78,-15.1 -8.3,-19.17 3.55,-0.38 11.59,-0.91 15.14,-0.4 z m 59.84,0.25 c 0.69,4.76 5.12,8.54 4.81,12.54 -3.69,-1.02 -13.67,-5.19 -17.02,-7.22 -1.85,-2.35 -2.77,-2.35 -1.25,-4.27 l 0.01,-0.01 c 4.46,-1.08 8.89,-1.44 13.45,-1.04 z m 12.26,-0.27 c -3.94,5.29 -0.58,15.89 -3.79,14.42 -3.14,-5.88 -8.37,-11.31 -6.85,-14.18 3.51,-0.68 7.1,-0.41 10.64,-0.24 z m -27.19,1.34 c -1.61,1.58 0.68,1.75 1.34,3.71 -3.82,-1.02 -3.87,-1.85 -7.33,-3.64 4.42,-0.42 2.41,-0.3 5.98,-0.07 z m -53.34,18.97 c -3.21,1.32 -8.1,-3.29 -9.27,-6.89 l -8.89,0.3 C 5.03,144.5 3.99,142.66 7.61,141.2 l 6.04,-3.48 c -0.08,-1.01 -1.16,-4.19 1.92,-2.95 0,0 13.96,9.7 7.99,17.79 z m 82.28,-20.3 c 7.3,-0.84 12.04,-0.15 16,2.58 0.81,1.27 0.66,1.82 -0.54,3.03 l -9.23,2.23 c -0.19,1.1 0.15,2.28 -0.22,3.39 l 8.02,7.1 C 105,158.29 99.38,139.02 105.84,132.26 Z M 59,136.57 c -2.57,3.03 -6.53,5.24 -9.73,8.03 0.54,-2.3 2.75,-4.6 0.75,-5.28 3.71,-2.22 15.24,-6.62 8.98,-2.74 z m 7.84,-2.26 h 0.01 c 3.7,1.01 7.36,2.35 10.95,4.26 -2.64,0.51 -2.56,1.55 -2.36,3.97 -3.88,-2.38 -6.18,-5.32 -8.6,-8.23 z m -4.76,1.06 c -1.25,3.79 -2.45,7.59 -4.44,11.39 -0.91,-2.11 -5.22,-1.2 -7.41,-1.23 2.22,-3.29 8.61,-7.48 11.85,-10.16 z m 6.28,3.56 c 3.14,2.74 3.78,1.85 6.18,4.6 -2.39,-0.32 -2.94,0.8 -3.77,2.79 -2.12,-3.58 -1.03,-3.67 -2.41,-7.39 z m -5.33,1.51 c 0.34,4.06 2.45,6.34 2.15,10.42 C 63.53,149.23 60.92,146.68 58.9,147.25 c 0.8,-4.04 4.13,-6.81 4.13,-6.81 z m 1.64,-4.61 h 0.01 c 1.83,3.68 3.66,7.37 4.86,11.07 -1.94,-0.65 -1.77,2.27 -3.03,3.92 C 65.51,146.7 64.29,139.86 64.67,135.83 Z m 31.51,10.49 c -3.92,2.29 -10.85,0.81 -11.38,5.17 -3.35,-2.51 -6.2,-5.13 -8.29,-7.93 0.13,-6.73 4.56,-4.22 19.67,2.76 z m -47.52,-6.43 v 0.01 c 2.78,0.36 0.22,3 -0.44,5.76 -1.69,2.99 -1.45,4.27 -4.51,6.92 -2.7,-5.4 -3.13,-5.21 -5.54,-8.07 3.56,-2.29 7.03,-3.43 10.49,-4.62 z m 49.01,7 0.01,0.01 c 3.38,0.71 -0.39,9.44 -0.35,12.65 -3.31,-2.44 -9.33,-4.48 -11.39,-6.95 -0.55,-5.59 8.14,-2.74 11.73,-5.71 z m -22.08,-2.33 c 2.92,2.28 5.72,4.85 8.28,7.92 -2.9,3.21 -2.28,1.96 -5.37,4.34 -2.42,-3.47 -5.76,-5.65 -7.14,-9.15 0.35,-2.83 1.79,-3.34 4.23,-3.11 z m -38.9,0.62 c 2.79,3.29 4.32,3.45 5.9,8.59 -1.89,3 -7.35,8.6 -9.98,11.01 -0.27,-6.91 -1.73,-8.27 -6.93,-11.7 3.24,-1.81 7.76,-7.09 11.02,-7.9 z m 20.41,2.97 c -0.86,3.64 -2.86,10.8 -4.47,14.33 -2.54,-4.1 -7.47,-6.82 -7.95,-8.94 2.18,-3.13 1.56,-4.41 4.51,-6.93 l 0,-0.01 c 2.63,-0.35 7.25,-1.18 7.91,1.55 z m 13.04,0.1 c 1.92,3.49 6.1,5.64 7.15,9.15 -4.65,-1.38 -11.74,2.92 -15.26,5.76 -0.67,-3.81 4.19,-7.03 4.51,-10.87 0.85,-2.04 1.37,-4.5 3.6,-4.04 z m -4.94,4.08 c 0.48,3.81 -4.22,7.04 -4.51,10.86 -3.66,-3.27 -2.48,-1.52 -6.81,-0.24 0.88,-3.61 2.45,-10.83 4.47,-14.33 2.17,-1.35 5.23,1.97 6.85,3.7 z M 102.92,148.37 c 0.79,0.83 2.58,2.33 4.86,3.99 0.59,1.88 0.37,2.38 -0.56,3.94 l 5.7,7.63 c -0.73,1.28 0.75,2.02 -1.23,2.71 l -8.86,-3.1 c -0.64,0.58 -0.68,1.4 -2.79,1.67 -1.28,-5.24 -0.35,-12.61 2.88,-16.84 z m -78.84,5.42 c 6.88,2.93 5.84,5.5 6.71,12.71 -3.43,3.63 -4.06,2.36 -8.4,4.65 -3.38,1.88 -6.08,0.33 -4.2,-2.46 l 4.91,-6.63 c -0.7,-0.96 -2.51,-2.2 -3.15,-3.2 l -8.87,0.83 c -2.93,-1.85 -1.83,-2.01 -0.86,-3.25 3.88,-4.48 8.36,-1.2 13.85,-2.65 z m 60.97,-0.2 -0.01,0.01 c 2.9,2.1 9.11,4.19 11.39,6.94 -5.6,1.3 -13.72,8.43 -16.66,13.3 -1.79,-3.3 0.27,-12.31 0.04,-15.4 3.14,-3.44 1.45,-1.93 5.24,-4.85 z m -41.48,1.11 c 3.1,1.81 5.66,5.26 8.47,9.28 -1.12,3.5 -2.88,6.16 -4.51,9.06 -2.34,-6.69 -8.25,-5.91 -13.94,-7.32 2.39,-3.14 7.43,-9.5 9.98,-11.02 z m 17.16,10.13 c 0.6,3.84 3.72,5.06 3.42,8.41 -4.51,-5.41 -9.65,-0.91 -15.38,0.28 0.89,-3.34 2.5,-5.82 4.52,-9.06 l 0.01,0.02 c 4.85,-3.1 3.41,-2.49 7.43,0.35 z m 17.21,-5.94 c 1.63,3.24 -0.52,12.25 0.6,15.51 -5.99,-2.93 -8.39,-4.32 -13.05,-1.19 -0.16,-3.54 -4.28,-4.84 -3.42,-8.42 3.77,-4.49 10.85,-6.64 15.87,-5.9 z m 19.77,2.9 c 1.4,5.31 3.45,8.78 5.47,14.31 -1.01,1.01 -0.41,1.23 -2.43,1.3 l -7,-3.97 c -1.88,0.36 -4.85,1.19 -4.98,2.16 l 1.7,8.88 c -1.26,-0.12 -1.55,-0.17 -2.67,1.37 -4.84,-4.2 -6.2,-4.35 -7.31,-10.37 2.41,-6.37 11.28,-12.09 17.22,-13.69 z m -65.33,5.2 c 9.05,-0.04 8.94,0.98 13.58,7.92 -1.72,3.97 -5.41,2.47 -8.74,1.3 l -5.56,6.22 c -1.29,-0.73 -3.85,-0.17 -2.57,-3.34 l 2.98,-7.62 c -0.5,-0.55 -1.81,-2.71 0.32,-4.48 z m 31.81,8.02 c 1.24,6.2 -0.8,10.56 -3.51,16.06 -1.22,0.76 -2.62,-1.38 -3.27,-3.02 l -1.42,-7.11 c -1.11,-0.18 -4.56,0.68 -5.67,0.31 l -5.11,6.97 c -1.56,-0.46 -1.58,0.64 -2.96,0.09 -0.95,-5.9 2.78,-9.12 5.89,-13.13 8.03,-3.86 9.37,-4.22 16.05,-0.17 z m 15.07,1.01 c 1.43,2.32 -1.48,4.39 -2.55,4.75 l -0.69,9.34 c -1.47,0.37 -2.63,-0.37 -3.91,-2.33 l -3.69,-6.95 c -0.71,0.06 -1.61,0.56 -2.45,0.91 -0.61,-2.35 -0.64,-4.58 -0.44,-6.76 4.76,-5.4 7.29,-0.98 13.73,1.04 z" />
<path id="cog2" fill="#FFFFFF" stroke="none"
d="m 82.66,177.76 c -1.93,0.22 -4.87,-0.51 -4.58,2.24 -0.42,2.23 -0.84,4.46 -1.26,6.69 -2.95,2.27 -4.98,-0.57 -7.18,-2.43 -1.58,-2.07 -3.34,-2.36 -5.14,-0.36 -1.59,0.65 0.04,2.29 0.17,3.46 0.63,1.81 1.27,3.62 1.9,5.43 -1.23,1.29 -2,3.19 -4.02,2.19 -2.26,-0.39 -4.52,-0.79 -6.78,-1.18 -0.86,1.73 -2.87,3.95 -0.38,5.08 1.73,1.51 3.46,3.02 5.19,4.52 -0.31,1.74 -0.27,3.68 -2.42,3.86 -2.12,0.8 -4.23,1.6 -6.35,2.4 0.21,1.93 -0.51,4.87 2.24,4.59 2.2,0.42 4.39,0.84 6.59,1.26 0.54,1.58 1.72,3.24 -0.08,4.39 -1.49,1.76 -2.97,3.53 -4.46,5.29 1.11,1.58 1.98,4.44 4.21,2.83 2.01,-0.7 4.01,-1.41 6.02,-2.11 1.78,0.55 3.56,1.91 2.61,3.88 -0.39,2.29 -0.79,4.58 -1.18,6.88 1.73,0.86 3.95,2.87 5.08,0.38 1.51,-1.73 3.02,-3.46 4.52,-5.19 1.74,0.31 3.68,0.27 3.86,2.42 0.8,2.12 1.6,4.23 2.4,6.35 1.93,-0.22 4.87,0.51 4.58,-2.24 0.42,-2.23 0.84,-4.46 1.26,-6.69 1.65,-0.65 3.31,-1.6 4.52,0.18 1.75,1.45 3.5,2.91 5.25,4.36 1.58,-1.11 4.44,-1.98 2.83,-4.21 -0.75,-2.14 -1.5,-4.29 -2.25,-6.43 1.23,-1.29 2,-3.18 4.02,-2.21 2.26,0.37 4.51,0.74 6.77,1.1 0.86,-1.73 2.87,-3.95 0.38,-5.08 -1.73,-1.51 -3.46,-3.02 -5.19,-4.52 0.31,-1.74 0.27,-3.68 2.42,-3.86 2.12,-0.8 4.23,-1.6 6.35,-2.4 -0.11,-1.41 -0.21,-2.81 -0.32,-4.22 -2.84,-0.54 -5.67,-1.08 -8.51,-1.62 -0.36,-1.01 -0.71,-2.01 -1.07,-3.02 1.84,-2.22 3.67,-4.44 5.51,-6.65 -1.11,-1.58 -1.98,-4.44 -4.21,-2.83 -2.14,0.75 -4.29,1.5 -6.43,2.25 -1.29,-1.23 -3.19,-2 -2.19,-4.02 0.39,-2.29 0.79,-4.58 1.18,-6.88 -1.73,-0.86 -3.95,-2.87 -5.07,-0.37 -1.51,1.76 -3.02,3.52 -4.53,5.28 -1.74,-0.31 -3.68,-0.27 -3.86,-2.42 -0.8,-2.12 -1.6,-4.23 -2.4,-6.35 z m 1.8,8.45 c -0.4,3.38 -3.86,5.68 -7.11,4.39 -1.45,-0.03 -3.35,-2.53 -0.9,-2.78 1.82,-0.28 1.56,-1.94 1.77,-3.36 0.18,-1.45 0.36,-2.9 0.53,-4.36 3.17,-3.65 5.92,2.26 5.8,5.12 l -0.02,0.51 z m 10.24,-5.18 c 2.03,0.28 3.16,2.14 2.38,4 -0.32,2.01 -0.65,4.03 -0.97,6.04 1.37,1.19 3.39,2.24 0.99,3.49 -2.17,3.68 -5.45,-2.31 -4.99,-4.83 -0.05,-2.99 0.33,-6.5 2.59,-8.69 z M 67.48,183.59 c 3.23,1.65 5.05,5.01 8.11,6.89 -1.75,1.66 -4.25,5.48 -6.42,4.84 -2.51,-2.79 -3.29,-6.57 -4.41,-10.04 0.84,-0.67 1.82,-1.12 2.73,-1.68 z m 23.73,1.49 c -1.34,2.16 2.26,6.55 -1.13,6.77 -1.7,0.08 -7.18,0.31 -6.41,-2.01 0.57,-1.04 1.13,-2.08 1.7,-3.12 1.87,0.31 3.98,1.56 4.99,-0.66 0.28,-0.33 0.57,-0.66 0.85,-0.99 z m 15.85,6.08 c 3.3,1.66 0.48,4.32 -1.24,5.92 -1.96,1.25 -3.06,4.73 -3.74,5.53 -2.02,-1.51 -7.02,-4.91 -4.44,-7.35 2.59,-2.37 6.09,-3.36 9.41,-4.1 z m -24.43,0.26 c 0.07,2.73 1.05,6.88 -2.84,6.94 -1.11,-2.47 -2.22,-4.93 -3.33,-7.4 1.98,0.66 4.14,1.01 6.17,0.46 z m 0.61,0 c 2.19,1.67 6.09,0.74 7.91,0.98 -2.42,1.8 -5.02,3.72 -7.48,5.12 -1.12,-1.33 -0.54,-4.32 -0.43,-6.1 z m -7.37,-0.22 c 0.83,2.41 4.3,5.89 2.49,7.89 -2.88,1.2 -6.64,0.93 -6.77,-2.94 0.28,-2.36 3.2,-3.09 4.29,-4.95 z m 16.01,1.31 c 0.28,2.08 3.11,3.52 3.32,4.5 -0.2,3.18 -3.03,3.36 -5.01,1.33 -1.54,-1.07 -3.98,-2.83 -1.23,-3.79 0.97,-0.68 1.94,-1.37 2.91,-2.05 z m -22.62,3.78 c 0.03,3.43 -3.11,5.71 -6.35,5.62 -1.68,0.62 -2.9,-0.31 -4.06,-1.4 -1.2,-0.96 -2.41,-1.93 -3.61,-2.89 0.59,-1.7 1.3,-3.55 3.35,-2.63 2.09,0.28 4.18,0.57 6.26,0.85 0.82,-2.93 3.39,-1.25 4.41,0.44 z m 0.55,0.56 c 1.81,0.96 5.51,5.09 1.25,4.87 -1.28,0.72 -6.91,1.4 -3.37,-0.51 1.28,-1.1 1.6,-2.85 2.12,-4.35 z m 26.14,0.08 c 1.27,2.2 5.55,4.92 5.23,6.5 -2.27,0.55 -8.29,3.84 -7.08,-0.93 -0.1,-2.19 0.97,-3.56 1.85,-5.56 z m -13.39,1.01 c 0.12,1.2 0.62,6.64 -1.19,4.76 -0.43,-1.23 -0.86,-2.45 -1.29,-3.68 0.8,-0.45 1.81,-0.46 2.49,-1.09 z m 0.61,0 c 1.45,0.93 3.87,-3.72 2.96,-0.55 -0.61,1.61 -3.4,7.02 -3.15,2.67 -0.01,-0.71 0.07,-1.43 0.19,-2.12 z m -3.68,1.31 c 1.44,1.77 2.42,6.16 -1.34,4.83 -1.46,-0.83 -5.95,-4.43 -1.92,-3.99 1.11,-0.12 2.34,-0.18 3.25,-0.83 z m 7.58,-2.91 c 1.43,1.93 4.84,2.95 5.89,4.31 -1.97,1.2 -4.4,6.33 -6.51,3.2 -1.62,-2.29 -0.48,-5.29 0.62,-7.51 z m -13.33,4.44 c 1.68,1.16 5.92,5.16 1.29,4.62 -1.45,0.13 -4.64,-2.55 -3.85,-3.12 0.98,-0.32 2.28,-0.24 2.56,-1.5 z m 30.36,-0.45 c 0.56,1.14 0.31,3 1.84,3.31 2.25,1.61 7.91,-0.5 7.53,3.35 -1.38,2.68 -5.29,3.48 -8.12,3.18 -3.7,0.27 -5.45,-3.08 -2.81,-5.72 0.93,-1.28 0.36,-2.96 1.56,-4.12 z m -10.48,0.5 c -0.72,1.67 0.63,4.19 0.04,4.98 -1.77,0.75 -6.28,1.01 -3.61,-1.81 1.05,-1.2 2.35,-2.2 3.57,-3.17 z m -28.48,1.66 c 1.8,1.95 -0.26,8.08 -2.65,5.73 -2.94,-0.24 -1.91,-3.95 -0.54,-5.12 1.06,-0.2 2.12,-0.41 3.18,-0.61 z m 0.73,0.3 c 3,-1.24 5.3,0.99 4.56,4.11 0.27,3.21 -5.35,2.87 -5.54,1.86 1.63,-1.63 1.55,-3.91 0.97,-5.97 z m 16.75,5.19 c -0.93,-1.12 -0.86,-6.4 0.3,-3.09 0.06,1.04 -0.07,2.08 -0.3,3.09 z m 0.61,-5.12 c 1.23,0.01 1.32,-3.21 0.99,-0.36 0.01,1.3 -0.79,6.28 -1,2.81 -0.08,-0.82 -0.05,-1.64 0.01,-2.45 z m 18.84,0.85 c -1.11,1.68 -1.46,4.7 -1.44,5.52 -2.08,-0.51 -4.87,-1.2 -5.98,-2.63 1.61,-2.1 5.12,-1.82 7.42,-2.89 z m -20.85,0.33 c 0.59,1.27 0.35,3.7 -1.16,1.84 -2.19,-1.06 -1.5,-1.64 0.62,-1.5 l 0.31,-0.13 z m 6.26,1.64 c -1.08,1.2 -4.68,3.91 -3.39,0.69 0.2,-1.84 0.87,-6.46 2.16,-2.43 0.37,0.61 0.76,1.2 1.23,1.73 z m -17.16,-2.58 c 1.92,1.35 5.94,3.44 4.98,6.11 -1.87,-0.12 -6.49,1.24 -4.35,-1.67 0.22,-1.51 -0.26,-3 -0.63,-4.44 z m 7.59,1.83 c 1.37,0.85 5.58,5.01 1.83,2.97 -1.51,-0.84 -6.74,-2.57 -2.39,-2.34 0.3,-0.04 0.61,-0.3 0.56,-0.63 z m 16.46,1.14 c -1.44,2.03 5.16,2.23 1.65,2.73 -2.25,-0.18 -6.28,1.5 -7.54,-0.26 1.34,-2.22 3.61,-2.04 5.89,-2.47 z m -5.35,0.61 c -1.12,0.88 -4.77,2.17 -2.12,0.09 0.56,-0.56 1.55,-0.77 2.12,-0.09 z m -14.08,-0.41 c 1.42,0.57 6.66,3.08 2.85,3.01 -2.42,0.64 -1.32,-1.57 -2.85,-3.01 z m 14.31,0.96 c -1.18,2.05 -2.27,2.54 -4.78,1.98 1.53,-0.79 3.13,-1.54 4.78,-1.98 z m -29.79,0.36 c 2.65,1.26 6.61,2.49 6.59,6.06 -0.03,1.94 -1.13,3.46 -3.1,3.52 -1.65,0.05 -1.09,-2.93 -3.27,-2.54 -2.14,-0.54 -4.28,-1.08 -6.42,-1.61 -0.89,-2.15 0.36,-3.8 2.46,-4.08 1.25,-0.45 2.5,-0.9 3.75,-1.34 z m 21.93,2.23 c -1.59,0.71 -4.99,1.36 -5.59,1.07 1.24,-0.7 -0.49,-1.44 1.51,-1.28 1.37,-0.11 2.73,0.05 4.09,0.21 z m -6.09,0.02 c 1.61,1.2 -2.59,2.75 -2.71,4.51 -0.82,1.46 -2.8,2.85 -1.41,0.3 1.64,-2.13 -2.82,-5.59 0.8,-5.01 1.11,-0.02 2.24,0.03 3.32,0.19 z m -5.45,6.77 c -1.05,0.4 -4.07,-0.31 -3.82,-0.76 1.95,-2.08 -1.03,-5.2 -1.03,-6.09 3.13,-0.98 7.07,1.58 5.57,5.08 -0.18,0.61 -0.43,1.21 -0.72,1.77 z m 27.24,-7.4 c -1.83,1.53 0.93,5.43 -2.46,3.96 -2.1,-0.13 -6.17,-0.67 -5.84,-3.34 2.73,-0.3 5.55,-0.57 8.3,-0.63 z m 4.09,0.63 c -2.6,2.01 -0.38,7.37 -1.22,8.27 -1.12,-2.65 -4.54,-5.24 -2.41,-8.24 0.41,-1.75 2.58,0.12 3.62,-0.03 z m -13.07,-0 c -0.19,1.07 2.49,2.81 -0.12,1.35 -1.54,-1.12 -1.16,-0.87 0.12,-1.35 z m 13.85,0.02 c 1.73,0.98 4.99,0.16 3.32,2.88 -0.63,1.78 0.14,3.24 1.59,4.23 1.61,1.24 -3.47,-0.18 -4.34,1.24 -3.1,1.16 -2.3,-4.92 -1.47,-6.85 0.22,-0.54 0.5,-1.08 0.9,-1.5 z m -21.82,1.46 c -1.11,1.16 -2.32,4.4 -2.99,1.46 -3.52,-1.77 1.73,-1.27 2.99,-1.46 z m 9.03,1.12 c 3.19,3.13 -3.59,-0.51 -3.54,-1.39 1.25,0.25 2.41,0.82 3.54,1.39 z m -7.11,-1.6 c -0.73,1.83 -0.33,6.11 -1.56,6.44 -0.54,-1.93 -3.71,-2.5 -1.04,-4.12 0.8,-0.84 1.7,-1.58 2.6,-2.31 z m 1.74,-0 c 1.44,1.39 5.67,2.58 5.51,3.62 -2.16,-0.7 -4.74,1.95 -4.88,-1.42 -0.22,-0.73 -0.41,-1.47 -0.63,-2.2 z m -1.18,0.23 c -0.12,2.32 1.01,5.41 -1.36,6.85 0.5,-2.27 0.4,-4.7 1.36,-6.85 z m 0.91,2.15 c 1.83,0.66 0.93,4.09 -0.1,1.74 -0.04,-0.58 0.03,-1.16 0.1,-1.74 z m 6.26,-0.51 c 1.83,0.75 5.62,0.49 6.23,1.59 -2.03,0.35 -3.4,3.78 -4.25,3.66 -0.8,-1.69 -0.69,-3.74 -1.98,-5.24 z m -14.66,-0.66 c 3.8,1.72 0.88,4.84 -1.27,6.45 -0.92,1.84 -3.55,-1.84 -2.47,-2.08 1.42,-1.29 2.59,-2.83 3.73,-4.36 z m 21.9,2.33 c 1.47,0.95 2.69,4.02 2.76,4.89 -2.4,0.8 -2.18,4.67 -2.9,5.52 -1.38,-2.31 -5.12,-4.94 -3.59,-7.76 0.96,-1.22 2.46,-1.81 3.73,-2.64 z m -6.75,0.61 c 1.16,1.02 -0.19,3.14 1.51,3.84 -2.21,-0.61 -4.22,1.22 -5.07,-1.73 -3.29,-2.7 2.06,-2.26 3.56,-2.11 z m -20.21,2.19 c 0.81,0.85 1.62,1.7 2.44,2.56 -1.22,1.24 -4.78,6.01 -4.31,1.98 0.58,-1.79 -2.3,-4.69 -1.58,-4.8 1.15,0.07 2.3,0.16 3.45,0.26 z m 10.37,1.12 c -1.05,1.21 -3.51,3.14 -4.74,2.92 -0.66,-0.78 -3.18,-1.3 -1.64,-2.44 1.55,-2.01 4.74,-5.52 6.11,-1.33 l 0.16,0.46 z m 5.38,-1.74 c 1.59,1.14 2.38,2.36 0.52,3.16 -0.54,1.63 -1.91,6.82 -2.33,2.54 -0.13,-1.86 -1.97,-4.8 0.38,-5.83 0.64,-0.65 0.85,-0.49 1.44,0.13 z m -1.98,7.76 c -2.31,-0.82 -4.63,-1.64 -6.94,-2.45 1.31,-1.58 4.53,-4.03 5.82,-3.74 0.47,2.03 1.11,4.11 1.12,6.19 z m 17.18,-5.05 c 2.98,-1.25 6.71,-1.13 9.5,0.55 2.09,2.16 -1.14,4.49 -3.26,3.33 -1.88,-0.35 -3.76,-0.69 -5.64,-1.04 -1.28,0.61 -2.44,4.37 -3.85,3.01 -0.12,-2.51 0.64,-4.99 3.25,-5.85 z M 65.23,217.21 c 2.82,1.45 4.45,7.12 0.58,8.19 -2.32,0.38 -5.65,2.48 -7.45,1.38 -2.54,-2.85 2.11,-5.68 3.86,-7.71 0.93,-0.73 1.94,-1.34 3,-1.86 z m 26.89,1.91 c 1.09,2.04 4.32,4.98 4.14,6.42 -2.02,-0.14 -5.02,-0.39 -6.13,0.64 -0.41,-2.25 -3.46,-7.21 0.47,-7.16 0.51,-0.03 1.03,-0.03 1.52,0.1 z m -19.19,1.06 c 3.65,0.52 2.75,4.49 1,6.61 0.15,-3.51 -7.11,-1.24 -3.92,-4.01 0.89,-0.95 1.83,-1.93 2.92,-2.61 z m 10.9,4.9 c -0.17,1.7 -1.3,3.88 -2.92,2.01 -1.75,-1.5 -5.64,0.38 -6.25,-0.63 0.26,-3.43 3.41,-5.14 6.08,-2.64 0.98,0.53 2,1.05 3.09,1.26 z m 4.13,-5.33 c 0.58,2.03 1.92,5.82 1.25,6.84 -2.01,-1.22 -5.2,1.42 -5.94,0.95 1.73,-2.29 1.94,-5.46 3.65,-7.74 0.31,-0.18 0.71,-0.16 1.04,-0.05 z m 9.35,6.29 c 2.83,1.15 3.33,4.59 4.18,7.18 -3.26,3.29 -6.35,-1.53 -8.81,-3.47 -2.34,-1.22 -2.48,-4.55 0.68,-3.95 1.31,0.16 2.63,0.53 3.95,0.24 z M 68.23,224.78 c 3.8,-1.1 5.66,2.73 6.89,5.6 0.58,2.68 -1.95,6.4 -4.51,6.82 -2.09,-0.81 -1.87,-3.06 -1.5,-4.82 0.24,-1.85 0.49,-3.71 0.73,-5.56 -0.7,-0.47 -1.58,-1.1 -1.6,-2.04 z m 14.39,4.1 c -1.03,3.55 -5.47,3.6 -7.25,0.58 -3.16,-3.07 4.14,-3.02 5.82,-1.44 0.49,0.26 0.98,0.58 1.43,0.87 z m 7.4,-1.4 c 0.61,1.61 2.33,2.81 -0.38,3.3 -1.2,0.44 -0.77,2.27 -1.23,3.35 -0.34,1.7 -0.68,3.41 -1.02,5.11 -4.05,1.11 -5.77,-3.59 -5.71,-6.8 0.36,-3.36 3.77,-6.72 7.28,-5.3 0.38,-0.02 0.69,0.35 1.06,0.34 z" />
<path id="cog5" fill="#FFFFFF" stroke="none"
d="m 178.46,199.57 -2.2,6.1 c -1.4,0 -2.9,0.1 -4.2,0.3 l -3,-5.8 c -1.7,0.3 -3.4,0.7 -5.1,1.1 0.51,0.45 -1.08,9.19 -4.2,8.1 l -4.6,-4.6 c -1.5,0.9 -3.1,1.7 -4.5,2.7 l 1.8,6.2 -3.3,2.7 -5.8,-3 c -1.2,1.2 -2.4,2.6 -3.4,3.9 l 3.7,5.4 c -0.9,1.1 -1.6,2.4 -2.3,3.6 l -6.5,-1 c -0.8,1.5 -1.4,3.2 -2.1,4.9 l 5.2,4 c -0.5,1.3 -0.8,2.8 -1.1,4.1 l -6.5,1.1 c -0.3,1.7 -0.5,3.4 -0.5,5.3 l 6.1,2.2 c 0,1.4 0.1,2.9 0.3,4.2 l -5.8,3 c 0.3,1.7 0.7,3.4 1.1,5.1 l 6.6,0.2 c 0.5,1.3 1.1,2.7 1.5,4 l -4.7,4.6 c 0.9,1.5 1.7,3.1 2.8,4.5 l 6.3,-1.8 2.7,3.3 -3,5.8 c 1.2,1.2 2.6,2.4 4,3.4 l 5.5,-3.7 c 1.1,0.9 2.4,1.6 3.6,2.3 l -1.1,6.5 c 1.5,0.8 3.2,1.4 4.9,2 l 4,-5.2 c 1.3,0.5 2.8,0.8 4.1,1.1 l 1.1,6.4 c 1.7,0.3 3.5,0.5 5.3,0.5 l 2.2,-6.1 c 1.4,0 2.9,-0.1 4.2,-0.3 l 3,5.8 c 1.7,-0.3 3.4,-0.7 5.1,-1.1 l 0.2,-6.5 c 1.3,-0.5 2.7,-1.1 4,-1.6 l 4.6,4.6 c 1.5,-0.9 3.1,-1.7 4.5,-2.7 l -1.8,-6.2 3.3,-2.7 5.8,3 c 1.2,-1.2 2.4,-2.6 3.4,-3.9 l -3.6,-5.5 c 0.9,-1.1 1.6,-2.4 2.3,-3.6 l 6.3,1 c 0.8,-1.5 1.4,-3.2 2.1,-4.9 l -5.2,-4 c 0.5,-1.3 0.8,-2.8 1.1,-4.1 l 6.5,-1.1 c 0.3,-1.7 0.5,-3.4 0.5,-5.3 l -6.1,-2.2 c 0,-1.4 -0.1,-2.9 -0.3,-4.2 l 5.8,-3 c -0.3,-1.7 -0.7,-3.4 -1.1,-5.1 l -6.6,-0.2 c -0.5,-1.3 -1.1,-2.7 -1.5,-4 l 4.7,-4.6 c -0.9,-1.5 -1.7,-3.1 -2.8,-4.5 l -6.3,1.8 -2.7,-3.3 1.44,-2.79 0.05,-0.09 v -0.01 l 1.51,-2.91 c -1.2,-1.2 -2.6,-2.4 -4,-3.4 l -5.4,3.8 c -1.1,-0.9 -2.4,-1.6 -3.6,-2.3 l 1.1,-6.5 c -1.5,-0.8 -3.2,-1.4 -4.9,-2 l -4,5.2 c -1.3,-0.5 -2.8,-0.8 -4.1,-1.1 l -1.1,-6.4 c -2.03,-0.36 -3.77,-0.5 -5.3,-0.5 z m 0.78,1.28 h 0.02 c 0.36,0.14 1.39,0.38 3.68,0.78 l 1.56,6.24 c 1.23,0.28 3.66,0.3 4.9,0.78 l 3.89,-4.46 c 1.61,0.57 2.06,0.8 3.48,1.56 l -0.16,1.53 c -1.22,3.45 -5.25,3.28 -7.64,5.25 -4.7,1.01 -4.54,5.22 -8.26,2.48 h -0.04 c -2.21,-7.44 -3.15,-10.16 -1.44,-14.15 z m -11.51,1.01 c 2.56,0.47 3.16,3.5 4.22,5.58 1.23,-0.19 4.81,-0.85 4.81,-0.85 l 2.81,8.34 c -4.06,3.57 -12.14,-0.36 -17.06,-2.35 -1.24,-3.04 2.49,-4.27 2.24,-6.81 v 0 l 0.29,-3.53 c 1.01,-0.24 1.81,-0.49 2.69,-0.37 z m -11.45,5.05 4.46,3.91 c 2.14,4.11 -3.88,4.12 -6.42,8.27 C 147.95,216.93 153.63,214.82 153.63,214.82 l -1.61,-5.35 c 0.73,-2.43 2.05,-2.87 4.26,-2.56 z m 49.03,4.62 c 1.36,0.43 2.39,2.21 2.39,2.21 -1.77,3.27 -2.3,5.16 -3.03,8.78 -5.08,-1.13 -12.46,-4.73 -14.71,-9.48 L 196.14,211.72 c 0,0 1.8,1.89 2.84,2.74 z m -25.83,4.8 c -0.03,2.95 0.95,6.88 0.26,9.58 -2.57,2.05 -9.47,-2.11 -12.48,-3.43 L 162.97,213.91 c 4.58,1.77 12.5,4.52 16.51,2.42 z m 1.1,0.08 c 3.29,2.85 3.65,-2.66 7.77,-2.64 0,0 -0.48,10.84 -1.4,10.9 -3.51,0.96 -3.54,3.51 -6.11,1.33 -0.02,-2.79 -1.05,-6.45 -0.26,-9.59 z M 161.92,214.26 c 1.37,2.8 4.22,5.96 4.28,8.56 0.08,2.94 -5.18,4.81 -5.66,5.2 -11.07,-11.26 1.23,-8.96 1.38,-13.76 z m 27.39,0.01 c 1.96,4.22 10.13,7.72 14.27,9.15 -2.05,2.31 -5.7,1.99 -8,3.45 -3.78,-1.56 -5.75,1.22 -7.67,-1.7 z M 145.08,215.06 c 2.74,1.69 5.57,3.21 8.4,4.74 -0.85,5.96 -2.44,7.82 -7.06,10.79 -1.8,-1.17 -3.11,-2.31 -3.99,-3.41 l 0.1,0.01 c 1.08,-1.11 2.27,-2.7 2.34,-3.8 l -3.03,-5.42 c 0.49,-1.26 1.38,-2.87 3.24,-2.91 z m 63.11,7.69 7,-1.24 c 1.04,1.33 1.47,1.84 1.46,3.4 l -4.17,4.91 c 0.31,1.01 1.21,2.56 1.78,3.76 l -11.53,3.7 c -4.52,-2.67 4.22,-9.42 2.65,-13.94 z m -53.79,-1.88 c 1.86,2.24 3.62,5.46 5.3,7.86 0.31,3.71 0.58,3.39 1.37,6.26 -2.61,-0.97 -10.81,-2.18 -13.38,-3.78 4.9,-2.03 4.93,-5.84 6.71,-10.35 z m 49.9,3.37 h 0.01 c 0.74,4.56 -6.07,10.4 -2.92,13.46 -2.68,1.14 0.78,-0.16 -2.06,0.35 -4.36,-1.57 -1.61,-7.16 -3.02,-10.37 3.59,-0.17 7.99,-3.44 7.99,-3.44 z m -24.66,3.01 c -0.2,3.09 -1.76,2.75 -2.42,5.81 -0.98,1.81 -3.93,-0.52 -5.5,-1.43 v 0 l -4.04,-7.87 c 2.58,0.49 9.74,5.09 11.97,3.51 z m 1.09,0.07 c 2.15,2.29 2.73,-1.21 5.62,-1.45 -1.04,2.87 0.74,3.74 -0.91,6.47 -1.87,1 -5.95,2.24 -7.13,0.82 -0.36,-3.14 1.76,-2.75 2.42,-5.83 z m -14.1,-3.24 c 1.34,2.84 3.79,4.45 3.93,7.74 0.08,1.88 -0.5,4.68 -2.31,3.84 -2.48,-2.25 -5.09,-4.24 -6.84,-6.64 2.89,-0.15 2.94,-3.74 5.22,-4.94 z M 187.33,226.34 c 1.83,3.29 4.07,-1.15 7.27,1.39 -2.14,2.13 -5.44,7.54 -8.17,9.43 -1.95,0.04 0.87,-2.45 -0.01,-4.35 1.1,-3.04 -0.68,-3.87 0.91,-6.47 z m -51.05,0.22 c 4.41,-0.24 6.44,2.31 9.65,5 2.26,5.59 -2.99,4.05 -6.6,8.11 -3.65,1.85 -4.02,6.86 -7.73,4.38 0,-1.8 -0.27,-3.45 1.15,-4.33 l 5.12,-1.11 c 0.28,-1.23 1.04,-2.89 1.52,-4.12 l -4.93,-4.85 c 0.66,-1.61 1.06,-1.65 1.82,-3.08 z m 24.29,3.16 0.01,0 c 2.44,2.31 5.37,4.45 7.08,6.81 0.17,2.37 -0.5,2.84 -2.63,3.24 -2.82,-0.99 -0.02,-2.19 -2.78,-4.19 -0.84,-2.92 -0.85,-3.2 -1.68,-5.86 z m 34.74,-1.17 h 0.01 c -0.53,3.94 0.84,7.37 2.76,9.93 -2.93,1.42 -9.16,3.51 -12.12,4 -1.92,-0.95 1.56,-2.59 1.19,-4.5 2.13,-2.35 5.66,-7.62 8.16,-9.43 z M 220.56,234.22 c 0.38,1.61 1.09,2.26 1.37,3.87 l -6,3.34 c 0.18,1.16 0.56,1.53 0.62,2.85 L 210.97,247.96 c -3.88,-4.66 -8.8,-4.19 -7.85,-9.66 3.56,-1.57 13.63,-4.03 17.45,-4.09 z m -73.35,-2.03 c 2.79,0.87 11.06,1.9 13.37,3.77 1.66,3.77 0.06,5.19 -3.03,7.66 -3.06,0.31 -13.98,-3.5 -16.8,-3.87 4.27,-4.8 7.16,-3 6.46,-7.56 z m 29.94,2.07 c 0.21,3.12 0.3,6.23 -0.6,9.19 -1.39,-2.95 -3.65,-7.77 -4.44,-10.69 1.41,0.53 3.95,2.6 5.04,1.5 z m 1.09,0.09 c 1.05,1 5.28,-0.62 6.68,-0.94 -1.02,3.12 -5.1,5.82 -6.69,8.28 -0.16,-3.14 -0.43,-4.33 0.02,-7.33 z m 23.53,4.38 c -1.8,5.06 5.42,4.77 7.78,9.1 -2.89,-0.06 -3.33,4.19 -6.18,3.64 -2.37,-5.73 -4.53,-8.96 -3.65,-12.39 2.69,-1.19 -0.71,0.42 2.05,-0.35 z m -30.7,-5.66 v 0.01 c 1.42,3.01 2.69,5.78 3.19,8.62 -2.48,-2.26 -3.19,-2.55 -4.94,-4.97 1.55,-0.06 0.8,-2.55 1.75,-3.66 z m 14.83,0.8 0.01,0.01 c 0.95,1.41 -1.65,3.97 -0.37,4.06 -2.01,2.35 -4.22,4.47 -6.91,6.05 0.85,-2.83 5.51,-7.45 7.27,-10.12 z m -24.13,2.67 h 0.01 c 2.81,0.97 -0.01,2.61 2.76,4.19 1.09,2.3 0.79,2.78 -1.21,4.05 -3.13,0.09 -1.37,-0.45 -4.45,-1.08 3.08,-2.45 3.5,-3.66 2.9,-7.16 z M 168.47,237.42 c 2.39,1.99 4.5,4.31 6.22,7.09 -2.87,-1.13 -5.72,-2.58 -8.56,-4.23 1.87,-0.28 2.39,-1.04 2.34,-2.86 z m 29.99,2.07 c -1.14,3.32 1.63,9.11 3.59,11.88 -3.13,0.11 -8.71,-4.21 -11.79,-4.82 -2.15,-1.05 -4.75,-1.31 -3.91,-3.06 2.96,-1.27 9.19,-3.25 12.12,-4 z m -12.2,-0.74 c 0.19,1.57 -1.74,2.81 -1.43,4.09 -2.86,0.47 -0.32,0.13 -3.56,0.82 2.02,-2.16 2.48,-2.98 4.99,-4.9 z m -20.66,2.5 0.01,0.01 c 2.94,0.95 3.72,1.59 6.49,3.57 -3.24,0.12 -4.39,0.72 -7.58,0.02 1.81,-0.73 1.43,-2.05 1.09,-3.61 z m 19.6,2.63 c -0.92,1.69 2.46,1.37 3.86,2.6 -3.21,0.28 -6.3,-0.09 -9.36,-0.62 2.67,-1.16 2.14,-1.27 5.5,-1.99 z M 217.83,246.56 l 4.36,2.2 c 0,1.8 0.11,1.79 -0.17,3.4 l -6.67,1.73 c -0.28,1.23 -0.58,2.79 -1.05,4.02 l 4.53,4.95 c -0.66,1.61 -0.54,1.62 -1.29,3.05 l -3.4,-0.17 c 0,0 -1.36,-5.14 -2.98,-6.71 -2.57,-6.49 -1.13,-8.32 -0.29,-9.43 0.02,-0.18 4.39,-2.69 6.97,-3.05 z m -43.71,0.04 c -3.12,1.33 -8.56,3.09 -11.64,3.71 1.51,-1.57 3.4,-3.12 1.92,-4.35 l 0.01,0 c 3.2,-0.55 6.15,-0.06 9.71,0.64 z m -10.91,-0.72 c 2.36,1.36 -0.46,2.89 -1.87,4.82 -2.7,1.14 -2.25,-0.17 -5.54,0.63 2.22,-3.5 5.95,-3.76 2.96,-6.53 3.13,-0.35 1.38,0.51 4.45,1.08 z m -5.77,-1.15 c 4.24,2.99 -0.39,3.04 -2.9,7.03 -2.36,1.29 -9.9,4.36 -12.83,5.1 3.31,-4.34 -5.85,-17.28 -1.06,-16.01 7.68,2.04 10.47,3.13 16.79,3.88 z m 44.51,8.08 c -3.01,2.37 -3.9,0.06 -4.35,3.05 -2.92,-1.09 -5.81,-2.25 -8.38,-4.13 -1.33,-2.04 -0.4,-2.6 0.97,-4.05 3.13,-0.11 8.76,4.17 11.76,5.13 z M 209.46,248.93 c -2.83,4.88 0.24,3.69 0.39,9.45 -2.82,-0.94 -8.57,-0.53 -11.06,-1.95 1.03,-2.69 3.09,-0.27 4.48,-3.53 2.91,-0.54 3.3,-4.37 6.19,-3.97 z M 189,247.58 c -1.4,1.17 -1.26,1.97 -0.85,3.6 -3.03,-1.1 -2.67,-1.62 -5.35,-3.32 3.06,0 2.73,-0.81 6.2,-0.28 z m -48.62,9.75 c -2.05,1.17 -0.65,1.07 -2.93,1.17 v 0 l -5.11,-0.42 c -0.4,-1.61 -0.99,-2.69 0.51,-4.41 l 4.96,-2.68 c -0.19,-1.23 -0.41,-2.73 -0.41,-4.06 -2,-2.08 -1.41,-1.4 0.82,-5.54 0,0 4.63,10.65 2.16,15.93 z m 28,-3.45 c 0.6,-1.83 -3.99,-1.85 -5.57,-2.53 3.08,-1.49 5.43,-1.04 8.56,-1.81 0,0 -0.2,2.31 -2.99,4.34 z M 179.11,247.95 h 0.01 c 2.93,1.09 5.8,2.43 8.58,4.24 -2.17,0.2 -2.18,1.1 -2.2,3.05 -2.97,-2.2 -4.63,-4.75 -6.39,-7.29 z m -3.93,0.52 c -1.28,2.98 -2.52,5.98 -4.41,8.93 -0.59,-1.78 0.09,-2.51 -1.69,-2.69 2.03,-2.51 3.28,-4.29 6.1,-6.24 z m 9.51,7.5 c -1.91,-0.44 -2.45,0.45 -3.26,2 -1.46,-3.06 -1.06,-3.5 -1.91,-6.62 -3.83,-5.84 4.23,3.32 5.17,4.62 z m -9.38,-3.62 c -0.02,3.32 0.48,6.01 -0.05,9.29 -1.22,-1.44 -1.83,-4.08 -3.51,-3.76 0.94,-3.22 3.56,-5.53 3.56,-5.53 z M 177.24,249.03 h 0.01 c 1.23,3.12 2.44,6.23 3.16,9.32 -1.53,-0.66 -2.92,2.1 -4.07,3.35 -0.52,-3.41 0.31,-9.43 0.9,-12.67 z m 11.53,3.68 v 0.01 c 3.16,1.28 5.83,2.68 8.36,4.13 -3.34,1.58 -3.94,2.82 -4.68,6.31 -2.53,-2.27 -4.67,-4.61 -6.15,-7.02 -0.32,-2.66 0.12,-2.86 2.48,-3.43 z m -27.13,-0.97 v 0.01 c 2.28,0.49 6.44,0.74 5.79,2.94 -1.59,2.3 -7.45,4.41 -10.12,6.34 0.85,-4.25 1.79,-6.62 -1.2,-8.65 3.05,-1.61 2.64,0.08 5.53,-0.63 z M 198.29,257.42 l 0.01,0.01 c 2.69,0.81 8.52,0.43 11.06,1.94 -7.38,3.67 -8.37,12.65 -9.96,14.12 -2.51,-2.21 -4.59,-7.19 -6.09,-9.34 -0.01,-4.45 1.78,-4.73 5,-6.73 z m -12.81,-0.53 c 2.21,2.06 4.29,4.35 6.15,7.01 -3.76,0.09 -2.54,6.69 -4.78,9.26 -1.72,-2.99 -4.15,-11.1 -5.03,-14.04 0.48,-2.25 1.7,-2.59 3.66,-2.23 z m -30.61,-4.08 c 4.46,2.04 1.63,4.3 1.45,9.09 -1.75,2.3 -2.48,4.05 -4.78,5.82 0.27,-5.62 -5.52,-6.66 -9.49,-9.81 2.76,-1.24 10.12,-4.68 12.82,-5.1 z M 170.23,258.49 c -0.96,2.89 -2.57,5.62 -4.13,8.37 -1.44,-3.62 -4.43,-4.43 -8.07,-4.99 1.99,-2.38 7.55,-4.51 10.12,-6.34 l 0,-0.01 c 2.24,-0.11 1.74,0.78 2.08,2.98 z m 10.57,1.01 c 1.31,2.96 4.44,11.11 5.03,14.03 -3.67,-1.44 -4.39,-7.75 -7.44,-5.7 -0.28,-3.14 -2.66,-1.83 -2.12,-4.92 1.2,-1.98 2.81,-4.09 4.53,-3.41 z m -5.63,3.35 c 0.11,3.12 2.62,1.83 2.12,4.91 -2.73,-2.92 -6.6,-1.14 -10.2,-0.43 3.57,-6.03 3.63,-12.48 8.08,-4.48 z m 35.48,-2.81 0.82,5.61 c -0.66,1.14 -1.42,2.82 -2.28,3.87 l 2.6,5.62 c -0.95,1.23 -0.77,1.53 -2.28,2.44 -3.08,-3.44 -5.8,-2.25 -9.18,-2.98 3.62,-7.13 6.49,-12.36 10.31,-14.56 z m -69.94,-1.66 c 5.3,2.86 9.68,4.38 9.77,10.3 l -3.59,3.52 -1.98,-2.17 -6.19,1.04 c -1.04,-1.33 -1.78,-2.25 -1.61,-4.2 l 3.69,-3.76 c -0.32,-1.05 -1.13,-2.67 -1.66,-3.88 z M 192.51,264.89 192.5,264.9 c 2.2,1.91 4.43,6.94 6.08,9.33 -4.62,0.64 -9.81,2.2 -12.54,5.91 0.17,-2.91 1.21,-3.22 1.24,-5.74 2.11,-3.91 1.08,-9.1 5.22,-9.51 z m -35.46,-2.16 c 4.55,-0.14 6.55,1.84 8.47,5.31 -1.16,2.76 -2.32,8.82 -3.85,11.06 -1.48,-5.44 -4.79,-9.18 -9.4,-10.54 2.16,-2.37 2.6,-4.77 4.77,-5.82 z m 20.16,6.37 c 0.21,3.16 -0.83,4.67 -1.31,7.36 -3.28,-4.71 -8.51,2.55 -13.25,3.11 0.96,-2.65 1.99,-8.58 3.85,-11.07 1.36,-0.35 8.39,-2.57 10.71,0.59 z m 9.04,5.69 c 1.09,2.75 -1.92,3.01 -1.24,5.73 -4.66,-2.79 -4.02,-6.2 -8.02,-3.99 0.12,-2.89 0.36,-4.53 1.31,-7.37 3.3,-3.43 3.99,4.68 7.95,5.63 z m 13.28,0.55 2.09,1.47 -1.17,1.18 1,6.56 c -1.33,0.95 -1.55,1 -2.94,1.46 l -4.51,-4.18 c -1,0.38 -3.1,0.89 -4.52,1.32 l -2.97,-1.64 c 2.41,-4.99 8.11,-5.31 13.03,-6.19 z M 151.2,269.5 c 6.34,0.23 6.88,5.02 9.54,10.31 -1.55,2.6 -6.06,-0.91 -6.85,-1.55 l -5.81,3.54 c -1.33,-0.95 -2.44,-2.34 -2.64,-3.74 1.66,-3.01 2.82,-6.54 5.76,-8.55 z m 24.6,8.4 c 1.82,4.32 0.36,9.8 -1.04,13.99 -1.71,0 -2.46,-0.65 -4.08,-0.94 l -1.49,-6.3 c -1.23,-0.28 -2.93,-0.39 -4.17,-0.86 l -4.39,4.96 c -1.61,-0.57 -3.28,-1.27 -3.81,-2.63 l 0.75,-3.84 4.44,-1.4 c 6.21,-2.45 10.6,-6.35 13.79,-2.98 z m 9.67,3.98 c 1.26,3.48 3.17,4.43 3.2,8.08 -1.61,0.38 -2.9,0.78 -4.51,0.14 l -2.37,-4.68 c -1.23,0.19 -1.8,-0.36 -3.12,-0.36 0,0 -1.29,-5.61 -1.77,-7.09 4.22,-4.03 3.68,1.22 8.56,3.92 z" />
<path id="arabic"
d="m 136.7,-59.7 c -8.6,0.3 -8,14.6 -0.3,4.1 -3.4,8.5 3.2,42.3 3.3,17.6 -1.3,-6.8 5.3,-17.8 -3,-21.7 z m 21.9,0 c -16.3,3.1 -0.1,5.9 4.7,6.2 5.8,11.7 -29,31.8 -1.9,28.3 22.8,-2.5 -19.7,-2.6 -1.3,-10 8.7,-6.8 15.9,-23.5 -1.5,-24.5 z M 43.9,-33.1 c -8.6,0.5 -8,14.7 -0.3,4.1 -3.5,8.5 3.3,42 3.3,17.3 -1.4,-6.6 5.6,-18 -3,-21.5 z m 20.1,0 c -8.6,0.5 -8,14.7 -0.3,4.1 -3.5,8.5 3.3,42 3.3,17.3 -1.4,-6.6 5.6,-18 -3,-21.5 z m 182.8,2.2 c -8.6,0.3 -8,14.6 -0.3,4.1 -3.4,8.5 3.2,42.3 3.3,17.6 -1.3,-6.8 5.4,-17.8 -3,-21.7 z m -277.1,68 c -8.6,0.5 -8,14.7 -0.3,4.1 -3.4,8.5 3.2,42.3 3.3,17.6 -1.3,-6.8 5.4,-17.8 -3,-21.7 z m 21.9,0 c -31.7,4.5 5.1,58.6 12,20.6 1.1,-8.3 -1.8,-20.2 -12,-20.6 z m 0,3.3 c 23,4.4 -6.6,44.4 -7.5,15.1 -0.1,-5.4 -0.2,-15.3 7.6,-15.1 z M 319,41.2 c -16.3,3.1 -0.1,5.9 4.7,6.2 5.8,11.7 -29,31.8 -1.9,28.3 22.4,-2.3 -18.7,-2.4 -1.1,-10.1 9,-7.2 16.5,-23.5 -1.7,-24.4 z m -368.6,94.6 c -27.5,3.8 9.3,28.8 5.4,26.4 -10.1,4.8 -15,10.7 -0.8,6.3 10.5,-7.4 11.4,-31.7 -4.7,-32.7 z m 395.4,0.6 c -22.5,5.7 18.5,2.3 2.4,13.1 -19.9,5.5 19.4,8.7 -1.8,16.3 -26.9,6.6 18.1,9.6 9.7,-9.2 -14.5,-3.2 9.5,-10.2 -3.7,-19.6 l -3,-1.2 z m -395.4,2.8 c 27,11.5 -27,21.6 0,0 z m 28.1,96.8 c -15.5,-0.2 -5.5,23.9 -9.9,30.7 9.4,11.9 31.2,-5.9 16.3,-15.2 6.3,-6.3 4.6,-17.5 -6.3,-15.6 z m 345.1,0.1 c -9,7.2 -24.5,33.5 -0.5,26.9 2,15.9 13,-7.9 3.7,-11.2 -0.3,-4.4 5.5,-16.8 -3.2,-15.7 z m -345,3 c 26.2,14.3 -23.6,11 0,0 z m 345.5,1.1 c 6.6,8.7 -8,28.8 -10.4,14.7 3.5,-4.9 7.9,-9.2 10.4,-14.7 z M -22,254.4 c 22.2,4 -7.6,21.7 -6.2,6.4 1.6,-2.5 3.9,-4.5 6.2,-6.4 z m 59.4,51.8 c 8.7,5 26.3,4 12,17.4 -7.4,9.9 -4.8,23.3 1.8,6.2 12.6,-19.1 12.2,-27.4 -13.9,-23.6 z m 201.7,1.1 c -13.9,18.5 30,18.4 8.9,30 -24.9,6.7 19.4,8.1 7.8,-9.6 -5.1,-9.1 -25.6,-12.8 -4.4,-17.5 11.8,-1.6 -11.2,-3.6 -12.3,-2.9 z m -85.7,26.3 c -33.3,-3.2 -5.7,58.7 7.3,23.1 1.4,-14.8 -33.9,-3.6 -15.1,-16.8 1.1,-1.7 17.1,-3.6 7.8,-6.3 z m -4,16.4 c 22.9,13.9 -25.7,15.3 -0.5,0.1 z" />
</defs>
</svg>
<script src='https://unpkg.com/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/MorphSVGPlugin.min.js'></script>
<script src="./script.js"></script>
</body>
</html>
CSS :
This CSS centers the clock on the screen and gives it a dark, minimal gradient background. The body uses flexbox to align everything perfectly in the middle, while .vline adds a faint vertical guide line (currently hidden). The .gsapWrapper and its inner elements (#wBody and #watch) keep the clock’s SVG properly scaled and responsive, adjusting size based on screen orientation for a clean, centered look.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0px;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #cadfe8;
background: -webkit-linear-gradient(135deg, #232526 0%, #414345 100%);
background: linear-gradient(135deg, #232526 0%, #414345 100%);
background-repeat: no-repeat;
color: #FFF;
}
.vline
{
position:fixed;
top: 0;
left: 50%;
height: 50vh;
width: 2px;
background-color: #FFF;
z-index: -1;
opacity: 0.5;
visibility: hidden;
}
.gsapWrapper {
visibility: hidden;
#wBody {
position: relative;
aspect-ratio: 1/1;
@media (orientation: landscape) {
width: 65vh;
}
@media (orientation: portrait) {
height: 65vw;
}
#watch {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
aspect-ratio: 1/1;
overflow: visible;
svg {
overflow: visible;
width: 100%;
height: 100%;
}
}
}
}
JavaScript :
This JavaScript controls the entire spider clock animation using GSAP. It first selects all SVG parts (face, hands, etc.) and stores their shapes. Then it sets the initial clock positions and starts animations when the page loads. The startAnimation() function continuously rotates the second, minute, and hour hands in real time based on the system clock, while also making parts like the spider’s face and legs morph slightly for a lifelike effect. Timelines (tg0, tg1, etc.) keep repeating the motions smoothly, giving the spider clock an endless, realistic ticking animation.
let select = e => document.querySelector(e);
let selectAll = e => document.querySelectorAll(e);
const face01 = select("#face01").getAttribute("d"),
face02 = select("#face01").getAttribute("d"),
handSec01 = select("#handSec01").getAttribute("d"),
handSec02 = select("#handSec02").getAttribute("d"),
sec = select("#sec"),
handMin01 = select("#handMin01").getAttribute("d"),
handMin02 = select("#handMin02").getAttribute("d"),
min = select("#min"),
handHr01 = select("#handHr01").getAttribute("d"),
handHr02 = select("#handHr02").getAttribute("d"),
hr = select("#hr");
gsap.set("#face", { attr: { d: face01 } });
gsap.set("#hand-sec", { attr: { d: handSec01 } });
gsap.set("#hand-min", { attr: { d: handMin01 } });
gsap.set("#hand-hr", { attr: { d: handHr01 } });
window.onload = function () { startAnimation(); };
function startAnimation() {
setTimeSec();
setTimeMinHr();
gsap.set([".gsapWrapper", ".vline"], { autoAlpha: 1, });
gsap.to(".cw.t24", 1, { rotation: "-=15", transformOrigin: "50% 50%", ease: "bounce", onComplete: function () { this.invalidate().delay(1).restart(true); } });
gsap.to(".cw.t20", 1, { rotation: "-=18", transformOrigin: "50% 50%", ease: "bounce", onComplete: function () { this.invalidate().delay(1).restart(true); } });
gsap.to(".ccw.t12", 1, { rotation: "+=30", transformOrigin: "50% 50%", ease: "bounce", onComplete: function () { this.invalidate().delay(1).restart(true); } });
gsap.to(min, 0.5, {
rotation: getMinRotation, transformOrigin: "50% 50%", ease: "none", onComplete: function () {
if (gsap.getProperty(min, "rotation") >= 360)
gsap.set(min, { rotation: 0, transformOrigin: "50% 50%" });
this.invalidate().delay(5).restart(true);
}
});
gsap.to(hr, 0.5, {
rotation: getHrRotation, transformOrigin: "50% 50%", ease: "none", onComplete: function () {
if (gsap.getProperty(hr, "rotation") >= 360)
gsap.set(hr, { rotation: 0, transformOrigin: "50% 50%" });
this.invalidate().delay(5).restart(true);
}
});
gsap.to(sec, 0.5, {
rotation: geSecRotation, transformOrigin: "50% 50%", ease: "bounce", onComplete: function () {
setTimeSec();
if (gsap.getProperty(sec, "rotation") >= 360)
gsap.set(sec, { rotation: 0, transformOrigin: "50% 50%" });
this.invalidate().delay(0.).restart(true);
}
});
let tg0 = gsap.timeline({ repeat: -1, repeatDelay: 5, defaults: { duration: 0.5, ease: "power1.out" } })
.to("#face", {
morphSVG: "#face02",
repeat: 4,
yoyo: true,
onComplete() {
tg0.repeatDelay(gsap.utils.random(4, 8, 0.25));
}
});
let tg1 = gsap.timeline({ repeat: -1, repeatDelay: 5, defaults: { duration: 1.5, ease: "bounce" } })
.delay(1)
.call(() => {
let rotation = parseFloat(gsap.getProperty(sec, "rotation").toFixed(1));
if ((rotation > 30 && rotation < 150) || (rotation > 210 && rotation < 330)) {
gsap.timeline({ repeat: 0, defaults: { duration: 0.25, ease: "bounce.in" } })
.to("#hand-sec", { morphSVG: "#handSec02" })
.to("#hand-sec", { morphSVG: "#handSec01" });
}
})
.set(sec, {
onComplete() {
tg1.repeatDelay(gsap.utils.random(6, 10, 0.25));
tg1.delay(0);
}
});
let tg2 = gsap.timeline({ repeat: -1, repeatDelay: 5, defaults: { duration: 1.5, ease: "bounce" } })
.delay(5)
.call(() => {
let rotation = parseFloat(gsap.getProperty(min, "rotation").toFixed(1));
if ((rotation > 5 && rotation < 175) || (rotation > 185 && rotation < 355)) {
gsap.timeline({ repeat: 0, defaults: { duration: 0.25, ease: "bounce.in" } })
.to("#hand-min", { morphSVG: "#handMin02" })
.to("#hand-min", { morphSVG: "#handMin01" });
}
})
.set(min, {
onComplete() {
tg2.repeatDelay(gsap.utils.random(6, 10, 0.25));
tg2.delay(0);
}
});
let tg3 = gsap.timeline({ repeat: -1, repeatDelay: 5, defaults: { duration: 1.5, ease: "bounce" } })
.delay(7)
.call(() => {
let rotation = parseFloat(gsap.getProperty(hr, "rotation").toFixed(1));
if ((rotation > 2 && rotation < 178) || (rotation > 182 && rotation < 358)) {
changingHr = true;
gsap.timeline({ repeat: 0, defaults: { duration: 0.25, ease: "bounce.in" } })
.to("#hand-hr", { morphSVG: "#handHr02" })
.to("#hand-hr", { morphSVG: "#handHr01" });
}
})
.set(hr, {
onComplete() {
tg3.repeatDelay(gsap.utils.random(6, 10, 0.25));
tg3.delay(0);
}
});
function setTimeSec() {
gsap.set(sec, { rotation: geSecRotation, transformOrigin: "50% 50%" });
};
function setTimeMinHr() {
gsap.set(min, { rotation: getMinRotation, transformOrigin: "50% 50%" });
gsap.set(hr, { rotation: getHrRotation, transformOrigin: "50% 50%" });
};
function geSecRotation() {
let seconds = new Date().getSeconds();
let rotation = seconds * 6;
let scaleXSec = gsap.getProperty(sec, "scaleX");
let difference = Math.abs(gsap.getProperty(sec, "rotation") - rotation);
if (difference >= 12)
gsap.set(sec, { rotation: rotation, transformOrigin: "50% 50%" });
if ((rotation >= 180 && rotation < 360) && (scaleXSec == 1))
gsap.to(sec, { scaleX: -1, duration: 0.25 });
else if ((rotation < 180 || rotation >= 360) && (scaleXSec == -1))
gsap.to(sec, { scaleX: 1, duration: 0.25 });
return rotation;
};
function getMinRotation() {
let newDateTime = new Date();
let rotation = newDateTime.getMinutes() * 6 + newDateTime.getSeconds() * 6 / 59;
let scaleXMin = gsap.getProperty(min, "scaleX");
let difference = Math.abs(gsap.getProperty(min, "rotation") - rotation);
if (difference >= 5)
gsap.set(min, { rotation: rotation, transformOrigin: "50% 50%" });
if ((rotation >= 180 && rotation < 360) && (scaleXMin == 1))
gsap.to(min, { scaleX: -1, duration: 0.25 });
else if ((rotation < 180 || rotation >= 360) && (scaleXMin == -1))
gsap.to(min, { scaleX: 1, duration: 0.25 });
return rotation;
};
function getHrRotation() {
let newDateTime = new Date();
let rotation = (newDateTime.getHours() % 12) * 30 + newDateTime.getMinutes() * 0.5;
let scaleHr = gsap.getProperty(hr, "scaleX");
let difference = Math.abs(gsap.getProperty(hr, "rotation") - rotation);
if (difference >= 5)
gsap.set(hr, { rotation: rotation, transformOrigin: "50% 50%" });
if ((rotation >= 180 && rotation < 360) && (scaleHr == 1))
gsap.to(hr, { scaleX: -1, duration: 0.25 });
else if ((rotation < 180 || rotation >= 360) && (scaleHr == -1))
gsap.to(hr, { scaleX: 1, duration: 0.25 });
return rotation;
};
}
In conclusion, creating a Spider Clock Animation using HTML, CSS, and JavaScript has been a fun and imaginative project. By blending creative design with real-time functionality, we’ve built a clock that not only tells time but also captivates attention with its spider-inspired motion ⏰✨
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
