98 lines
2.8 KiB
XML
Executable File
98 lines
2.8 KiB
XML
Executable File
{% import "macros.xml" as macros %}
|
|
<svg viewBox="0 0 65 65"
|
|
width="64"
|
|
height="64"
|
|
preserveAspectRatio="xMinYMin meet"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
|
|
<title>{{ title | safe }}</title>
|
|
<desc>{{ description | safe }}</desc>
|
|
|
|
{{ macros::metadata() }}
|
|
|
|
<defs>
|
|
<circle id="gear_hole" r="3" cx=" 12" cy="0" />
|
|
|
|
<mask id="gear_mask" transform="" >
|
|
<rect x="-64" y="-64" width="128" height="128" fill="white" />
|
|
<use xlink:href="#gear_hole" />
|
|
<use xlink:href="#gear_hole" transform="rotate(72 0,0)" />
|
|
<use xlink:href="#gear_hole" transform="rotate(144 0,0)" />
|
|
<use xlink:href="#gear_hole" transform="rotate(216 0,0)" />
|
|
<use xlink:href="#gear_hole" transform="rotate(288 0,0)" />
|
|
<circle r="4" />
|
|
</mask>
|
|
|
|
<polygon id="large_spoke" points="-1,-3 4,-2 4,2 -1,3" transform="translate(18 0)" />
|
|
|
|
<g id="large_gear_spokes">
|
|
<use xlink:href="#large_spoke" />
|
|
<use xlink:href="#large_spoke" transform="rotate(180 0 0)" />
|
|
</g>
|
|
|
|
<polygon id="small_spoke" points="-1,-3.5 6.5,-3 6.5,3 -1,3.5" transform="translate(18 0)" />
|
|
|
|
<g id="small_gear_spokes">
|
|
<use xlink:href="#small_spoke" />
|
|
<use xlink:href="#small_spoke" transform="rotate(180 0 0)" />
|
|
</g>
|
|
|
|
<g id="large_gear" mask="url(#gear_mask)">
|
|
<circle r="18" />
|
|
<use xlink:href="#large_gear_spokes" />
|
|
<use xlink:href="#large_gear_spokes" transform="rotate(72)" />
|
|
<use xlink:href="#large_gear_spokes" transform="rotate(144)" />
|
|
<use xlink:href="#large_gear_spokes" transform="rotate(216)" />
|
|
<use xlink:href="#large_gear_spokes" transform="rotate(288)" />
|
|
</g>
|
|
<g id="small_gear" mask="url(#gear_mask)">
|
|
<circle r="18" />
|
|
<use xlink:href="#small_gear_spokes" />
|
|
<use xlink:href="#small_gear_spokes" transform="rotate(72)" />
|
|
<use xlink:href="#small_gear_spokes" transform="rotate(144)" />
|
|
<use xlink:href="#small_gear_spokes" transform="rotate(216)" />
|
|
<use xlink:href="#small_gear_spokes" transform="rotate(288)" />
|
|
</g>
|
|
</defs>
|
|
|
|
|
|
<g transform="translate(24 40) rotate(-9)">
|
|
<g>
|
|
<use xlink:href="#large_gear" class="gear forward_gear" />
|
|
</g>
|
|
</g>
|
|
|
|
<g transform="translate(49 15) rotate(9) scale(0.65 0.65)">
|
|
<g>
|
|
<use xlink:href="#small_gear" class="gear reverse_gear" />
|
|
</g>
|
|
</g>
|
|
|
|
<style>
|
|
.gear {
|
|
animation-duration: 10s;
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: infinite;
|
|
animation-play-state: paused;
|
|
}
|
|
.forward_gear {
|
|
animation-name: rotate_gear_forward;
|
|
}
|
|
.reverse_gear {
|
|
animation-name: rotate_gear_reverse;
|
|
}
|
|
@keyframes rotate_gear_forward {
|
|
from {transform: none;}
|
|
to {transform: rotate(-720deg);}
|
|
}
|
|
@keyframes rotate_gear_reverse {
|
|
from {transform: none;}
|
|
to {transform: rotate(720deg);}
|
|
}
|
|
svg:hover .gear {
|
|
animation-play-state: running;
|
|
}
|
|
</style>
|
|
</svg>
|
