Pure HTML+SVG gear-like spinner
I have stolen (I won’t say from where! :) and slightly modified this cool looking gear-like loader or spinner:
The wheels are also nicely spinning.
This effect is achieved using a quite simple .html file and three .svg files.
First wheel
Here is the code of center (the biggest) wheel — gear-max.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="121.07"
height="121.07"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0,-931.29218)"
id="layer1">
<g
transform="translate(60.5362,991.82598)"
id="g3786"
style="fill:#e5e5e5;fill-opacity:1">
<path
d="m 53.1649,-3.4068 1.4029,0.1259 1.4124,0.3123 1.4155,0.4425 1.415,0.5541 1.4111,0.6556 L 60.2362,0 60.2218,1.3164 58.8107,1.972 l -1.415,0.5541 -1.4155,0.4425 -1.4124,0.3123 -1.4029,0.1259 -0.1241,-0.008 -0.1471,1.8108 -0.209,1.8046 0.1233,0.0164 1.3514,0.3972 1.3243,0.5819 1.302,0.7101 1.2797,0.8195 1.2561,0.9183 -0.2427,1.2939 -0.2709,1.2883 -1.512,0.3677 -1.4958,0.2674 -1.4747,0.1578 -1.4462,0.0309 -1.4005,-0.1503 -0.1201,-0.032 -0.4976,1.7472 -0.557,1.7292 0.1177,0.0402 1.248,0.6531 1.1853,0.8291 1.1384,0.9505 1.0953,1.0534 1.0528,1.1457 -0.4905,1.2217 -0.517,1.2107 -1.5547,0.0657 -1.5192,-0.0296 -1.4772,-0.1329 -1.4244,-0.2519 -1.3443,-0.4206 -0.1115,-0.0549 -0.8289,1.6167 -0.8837,1.5873 0.1076,0.0623 1.0966,0.8841 1.0008,1.0444 0.9311,1.1543 0.8687,1.2468 0.8091,1.3291 -0.7194,1.1026 -0.7433,1.0865 -1.5376,-0.2388 -1.4843,-0.3255 -1.4228,-0.4185 -1.3479,-0.5249 -1.2364,-0.6749 -0.0988,-0.0755 -1.1283,1.4239 -1.1763,1.3844 0.0933,0.0821 0.9031,1.081 0.7778,1.2196 0.688,1.3138 0.6088,1.3923 0.5342,1.4615 -0.9207,0.9409 -0.9409,0.9207 -1.4615,-0.5342 -1.3923,-0.6088 -1.3138,-0.688 -1.2196,-0.7778 -1.081,-0.9031 -0.0821,-0.0933 -1.3844,1.1763 -1.4239,1.1283 0.0755,0.0988 0.6749,1.2364 0.5249,1.3479 0.4185,1.4228 0.3255,1.4843 0.2388,1.5376 -1.0865,0.7433 -1.1026,0.7194 -1.3291,-0.8091 -1.2468,-0.8687 -1.1543,-0.9311 -1.0444,-1.0008 -0.8841,-1.0966 -0.0623,-0.1076 -1.5873,0.8837 -1.6167,0.8289 0.0549,0.1115 0.4206,1.3443 0.2519,1.4244 0.1329,1.4772 0.0296,1.5192 -0.0657,1.5547 -1.2107,0.517 -1.2217,0.4905 -1.1457,-1.0528 -1.0534,-1.0953 -0.9505,-1.1384 -0.8291,-1.1853 -0.6531,-1.248 -0.0402,-0.1177 -1.7292,0.557 -1.7472,0.4976 0.032,0.1201 0.1503,1.4005 -0.0309,1.4462 -0.1578,1.4747 -0.2674,1.4958 -0.3677,1.512 -1.2883,0.2709 -1.2939,0.2427 L 9.5393,58.0654 8.7198,56.7857 8.0097,55.4837 7.4278,54.1594 7.0306,52.808 7.0142,52.6847 5.2096,52.8937 3.3988,53.0408 3.4068,53.1649 3.2809,54.5678 2.9686,55.9802 2.5261,57.3957 1.972,58.8107 1.3164,60.2218 0,60.2362 -1.3164,60.2218 -1.972,58.8107 l -0.5541,-1.415 -0.4425,-1.4155 -0.3123,-1.4124 -0.1259,-1.4029 0.008,-0.1241 -1.8108,-0.1471 -1.8046,-0.209 -0.0164,0.1233 -0.3972,1.3514 -0.5819,1.3243 -0.7101,1.302 -0.8195,1.2797 -0.9183,1.2561 -1.2939,-0.2427 -1.2883,-0.2709 -0.3677,-1.512 -0.2674,-1.4958 -0.1578,-1.4747 -0.0309,-1.4462 0.1503,-1.4005 0.032,-0.1201 -1.7472,-0.4976 -1.7292,-0.557 -0.0402,0.1177 -0.6531,1.248 -0.8291,1.1853 -0.9505,1.1384 -1.0534,1.0953 -1.1457,1.0528 -1.2217,-0.4905 -1.2107,-0.517 -0.0657,-1.5547 0.0296,-1.5192 0.1329,-1.4772 0.2519,-1.4244 0.4206,-1.3443 0.0549,-0.1115 -1.6167,-0.8289 -1.5873,-0.8837 -0.0623,0.1076 -0.8841,1.0966 -1.0444,1.0008 -1.1543,0.9311 -1.2468,0.8687 -1.3291,0.8091 -1.1026,-0.7194 -1.0865,-0.7433 0.2388,-1.5376 0.3255,-1.4843 0.4185,-1.4228 0.5249,-1.3479 0.6749,-1.2364 0.0755,-0.0988 -1.4239,-1.1283 -1.3844,-1.1763 -0.0821,0.0933 -1.081,0.9031 -1.2196,0.7778 -1.3138,0.688 -1.3923,0.6088 -1.4615,0.5342 -0.9409,-0.9207 -0.9207,-0.9409 0.5342,-1.4615 0.6088,-1.3923 0.688,-1.3138 0.7778,-1.2196 0.9031,-1.081 0.0933,-0.0821 -1.1763,-1.3844 -1.1283,-1.4239 -0.0988,0.0755 -1.2364,0.6749 -1.3479,0.5249 -1.4228,0.4185 -1.4843,0.3255 -1.5376,0.2388 -0.7433,-1.0865 -0.7194,-1.1026 0.8091,-1.3291 0.8687,-1.2468 0.9311,-1.1543 1.0008,-1.0444 1.0966,-0.8841 0.1076,-0.0623 -0.8837,-1.5873 -0.8289,-1.6167 -0.1115,0.0549 -1.3443,0.4206 -1.4244,0.2519 -1.4772,0.1329 -1.5192,0.0296 -1.5547,-0.0657 -0.517,-1.2107 -0.4905,-1.2217 1.0528,-1.1457 1.0953,-1.0534 1.1384,-0.9505 1.1853,-0.8291 1.248,-0.6531 0.1177,-0.0402 -0.557,-1.7292 -0.4976,-1.7472 -0.1201,0.032 -1.4005,0.1503 -1.4462,-0.0309 -1.4747,-0.1578 -1.4958,-0.2674 -1.512,-0.3677 -0.2709,-1.2883 -0.2427,-1.2939 1.2561,-0.9183 1.2797,-0.8195 1.302,-0.7101 1.3243,-0.5819 1.3514,-0.3972 0.1233,-0.0164 -0.209,-1.8046 -0.1471,-1.8108 -0.1241,0.008 L -54.5678,3.2809 -55.9802,2.9686 -57.3957,2.5261 -58.8107,1.972 -60.2218,1.3164 -60.2362,0 l 0.0144,-1.3164 1.4111,-0.6556 1.415,-0.5541 1.4155,-0.4425 1.4124,-0.3123 1.4029,-0.1259 0.1241,0.008 0.1471,-1.8108 0.209,-1.8046 -0.1233,-0.0164 -1.3514,-0.3972 -1.3243,-0.5819 -1.302,-0.7101 -1.2797,-0.8195 -1.2561,-0.9183 0.2427,-1.2939 0.2709,-1.2883 1.512,-0.3677 1.4958,-0.2674 1.4747,-0.1578 1.4462,-0.0309 1.4005,0.1503 0.1201,0.032 0.4976,-1.7472 0.557,-1.7292 -0.1177,-0.0402 -1.248,-0.6531 -1.1853,-0.8291 -1.1384,-0.9505 -1.0953,-1.0534 -1.0528,-1.1457 0.4905,-1.2217 0.517,-1.2107 1.5547,-0.0657 1.5192,0.0296 1.4772,0.1329 1.4244,0.2519 1.3443,0.4206 0.1115,0.0549 0.8289,-1.6167 0.8837,-1.5873 -0.1076,-0.0623 -1.0966,-0.8841 -1.0008,-1.0444 -0.9311,-1.1543 -0.8687,-1.2468 -0.8091,-1.3291 0.7194,-1.1026 0.7433,-1.0865 1.5376,0.2388 1.4843,0.3255 1.4228,0.4185 1.3479,0.5249 1.2364,0.6749 0.0988,0.0755 1.1283,-1.4239 1.1763,-1.3844 -0.0933,-0.0821 -0.9031,-1.081 -0.7778,-1.2196 -0.688,-1.3138 -0.6088,-1.3923 -0.5342,-1.4615 0.9207,-0.9409 0.9409,-0.9207 1.4615,0.5342 1.3923,0.6088 1.3138,0.688 1.2196,0.7778 1.081,0.9031 0.0821,0.0933 1.3844,-1.1763 1.4239,-1.1283 -0.0755,-0.0988 -0.6749,-1.2364 -0.5249,-1.3479 -0.4185,-1.4228 -0.3255,-1.4843 -0.2388,-1.5376 1.0865,-0.7433 1.1026,-0.7194 1.3291,0.8091 1.2468,0.8687 1.1543,0.9311 1.0444,1.0008 0.8841,1.0966 0.0623,0.1076 1.5873,-0.8837 1.6167,-0.8289 -0.0549,-0.1115 -0.4206,-1.3443 -0.2519,-1.4244 -0.1329,-1.4772 -0.0296,-1.5192 0.0657,-1.5547 1.2107,-0.517 1.2217,-0.4905 1.1457,1.0528 1.0534,1.0953 0.9505,1.1384 0.8291,1.1853 0.6531,1.248 0.0402,0.1177 1.7292,-0.557 1.7472,-0.4976 -0.032,-0.1201 -0.1503,-1.4005 0.0309,-1.4462 0.1578,-1.4747 0.2674,-1.4958 0.3677,-1.512 1.2883,-0.2709 1.2939,-0.2427 0.9183,1.2561 0.8195,1.2797 0.7101,1.302 0.5819,1.3243 0.3972,1.3514 0.0164,0.1233 1.8046,-0.209 1.8108,-0.1471 -0.008,-0.1241 0.1259,-1.4029 0.3123,-1.4124 0.4425,-1.4155 0.5541,-1.415 0.6556,-1.4111 1.3164,-0.0144 1.3164,0.0144 0.6556,1.4111 0.5541,1.415 0.4425,1.4155 0.3123,1.4124 0.1259,1.4029 -0.008,0.1241 1.8108,0.1471 1.8046,0.209 0.0164,-0.1233 0.3972,-1.3514 0.5819,-1.3243 0.7101,-1.302 0.8195,-1.2797 0.9183,-1.2561 1.2939,0.2427 1.2883,0.2709 0.3677,1.512 0.2674,1.4958 0.1578,1.4747 0.0309,1.4462 -0.1503,1.4005 -0.032,0.1201 1.7472,0.4976 1.7292,0.557 0.0402,-0.1177 0.6531,-1.248 0.8291,-1.1853 0.9505,-1.1384 1.0534,-1.0953 1.1457,-1.0528 1.2217,0.4905 1.2107,0.517 0.0657,1.5547 -0.0296,1.5192 -0.1329,1.4772 -0.2519,1.4244 -0.4206,1.3443 -0.0549,0.1115 1.6167,0.8289 1.5873,0.8837 0.0623,-0.1076 0.8841,-1.0966 1.0444,-1.0008 1.1543,-0.9311 1.2468,-0.8687 1.3291,-0.8091 1.1026,0.7194 1.0865,0.7433 -0.2388,1.5376 -0.3255,1.4843 -0.4185,1.4228 -0.5249,1.3479 -0.6749,1.2364 -0.0755,0.0988 1.4239,1.1283 1.3844,1.1763 0.0821,-0.0933 1.081,-0.9031 1.2196,-0.7778 1.3138,-0.688 1.3923,-0.6088 1.4615,-0.5342 0.9409,0.9207 0.9207,0.9409 -0.5342,1.4615 -0.6088,1.3923 -0.688,1.3138 -0.7778,1.2196 -0.9031,1.081 -0.0933,0.0821 1.1763,1.3844 1.1283,1.4239 0.0988,-0.0755 1.2364,-0.6749 1.3479,-0.5249 1.4228,-0.4185 1.4843,-0.3255 1.5376,-0.2388 0.7433,1.0865 0.7194,1.1026 -0.8091,1.3291 -0.8687,1.2468 -0.9311,1.1543 -1.0008,1.0444 -1.0966,0.8841 -0.1076,0.0623 0.8837,1.5873 0.8289,1.6167 0.1115,-0.0549 1.3443,-0.4206 1.4244,-0.2519 1.4772,-0.1329 1.5192,-0.0296 1.5547,0.0657 0.517,1.2107 0.4905,1.2217 -1.0528,1.1457 -1.0953,1.0534 -1.1384,0.9505 -1.1853,0.8291 -1.248,0.6531 -0.1177,0.0402 0.557,1.7292 0.4976,1.7472 0.1201,-0.032 1.4005,-0.1503 1.4462,0.0309 1.4747,0.1578 1.4958,0.2674 1.512,0.3677 0.2709,1.2883 0.2427,1.2939 -1.2561,0.9183 -1.2797,0.8195 -1.302,0.7101 -1.3243,0.5819 -1.3514,0.3972 -0.1233,0.0164 0.209,1.8046 0.1471,1.8108 z M 16.900498,5.314961 A 17.716535,17.716535 0 0 1 -3.847358,17.293741 L -16.490205,39.191794 A 42.519685,42.519685 0 0 0 42.186192,5.314961 z M -13.05314,11.97878 a 17.716535,17.716535 0 0 1 0,-23.95756 l -12.642847,-21.898054 a 42.519685,42.519685 0 0 0 0,67.753668 z m 9.205782,-29.272521 a 17.716535,17.716535 0 0 1 20.747856,11.97878 l 25.285694,0 A 42.519685,42.519685 0 0 0 -16.490205,-39.191794 z M 0,7.086614 A 7.086614,7.086614 0 0 0 0,-7.086614 7.086614,7.086614 0 0 0 0,7.086614"
id="path3788"
style="fill:#ddd;fill-opacity:1;stroke:#000;stroke-width:0.5" />
</g>
</g>
</svg>
Second wheel
Now, the left-sided one (medium spinner) — gear-med.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="92.72"
height="92.72"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0,-959.64218)"
id="layer1">
<g
transform="translate(46.363,1005.9992)"
id="g2990"
style="fill:#e5e5e5;fill-opacity:1">
<path
d="m 39.8265,-3.2071 0.5584,0.0174 0.5623,0.0701 0.5647,0.1057 0.5661,0.1356 0.5672,0.1623 0.5677,0.1868 0.5678,0.2099 0.5675,0.2319 0.5669,0.253 0.5659,0.2735 0.5645,0.2934 0.0131,0.6337 L 46.063,0 46.0586,0.6338 46.0455,1.2675 45.481,1.5609 44.9151,1.8344 44.3482,2.0874 43.7807,2.3193 43.2129,2.5292 42.6452,2.716 42.078,2.8783 41.5119,3.0139 40.9472,3.1196 40.3849,3.1897 39.8265,3.2071 38.8506,3.1285 38.7591,4.1093 38.6429,5.0874 38.502,6.0623 l -0.1655,0.971 0.963,0.1767 0.5349,0.1613 0.525,0.2133 0.518,0.2483 0.5118,0.2775 0.5058,0.3035 0.5,0.3274 0.4942,0.3497 0.4881,0.3709 0.4821,0.3911 0.4758,0.4106 0.4695,0.4295 -0.1514,0.6155 -0.1599,0.6134 -0.1682,0.6111 -0.1767,0.6087 -0.6212,0.1372 -0.6174,0.1177 -0.6131,0.0977 -0.6082,0.0771 -0.6028,0.0558 -0.5967,0.0335 -0.5898,0.01 -0.582,-0.0156 -0.5727,-0.044 -0.5613,-0.0778 -0.5439,-0.1277 -0.9223,-0.3285 -0.3422,0.9237 -0.3654,0.9147 -0.3884,0.9052 -0.4112,0.8951 0.8844,0.4199 0.4749,0.2943 0.452,0.3418 0.4361,0.3739 0.4225,0.4006 0.41,0.4241 0.3982,0.4456 0.3868,0.4657 0.3756,0.4846 0.3644,0.5025 0.3533,0.5198 0.3423,0.5363 -0.3055,0.5554 -0.3132,0.5511 -0.3207,0.5467 -0.3282,0.5423 -0.6356,-0.0282 -0.6268,-0.0462 -0.6174,-0.0643 -0.6075,-0.0829 -0.5966,-0.1021 -0.5851,-0.1221 -0.5723,-0.143 -0.5581,-0.1657 -0.5419,-0.1907 -0.522,-0.2205 -0.4923,-0.2641 -0.8059,-0.556 -0.5695,0.8036 -0.5898,0.789 -0.6094,0.7738 -0.6288,0.7582 0.7456,0.6345 0.3825,0.4072 0.3481,0.4472 0.3245,0.474 0.3044,0.4962 0.2863,0.5158 0.2693,0.5335 0.2531,0.5499 0.2373,0.5653 0.2219,0.5798 0.2068,0.5935 0.1918,0.6066 -0.4388,0.4574 -0.4451,0.4513 -0.4513,0.4451 -0.4574,0.4388 -0.6066,-0.1918 -0.5935,-0.2068 -0.5798,-0.2219 -0.5653,-0.2373 -0.5499,-0.2531 -0.5335,-0.2693 -0.5158,-0.2863 -0.4962,-0.3044 -0.474,-0.3245 -0.4472,-0.3481 -0.4072,-0.3825 -0.6345,-0.7456 -0.7582,0.6288 -0.7738,0.6094 -0.789,0.5898 -0.8036,0.5695 0.556,0.8059 0.2641,0.4923 0.2205,0.522 0.1907,0.5419 0.1657,0.5581 0.143,0.5723 0.1221,0.5851 0.1021,0.5966 0.0829,0.6075 0.0643,0.6174 0.0462,0.6268 0.0282,0.6356 -0.5423,0.3282 -0.5467,0.3207 -0.5511,0.3132 -0.5554,0.3055 -0.5363,-0.3423 -0.5198,-0.3533 -0.5025,-0.3644 -0.4846,-0.3756 -0.4657,-0.3868 -0.4456,-0.3982 -0.4241,-0.41 -0.4006,-0.4225 -0.3739,-0.4361 -0.3418,-0.452 -0.2943,-0.4749 -0.4199,-0.8844 -0.8951,0.4112 -0.9052,0.3884 -0.9147,0.3654 -0.9237,0.3422 0.3285,0.9223 0.1277,0.5439 0.0778,0.5613 0.044,0.5727 0.0156,0.582 -0.01,0.5898 -0.0335,0.5967 -0.0558,0.6028 -0.0771,0.6082 -0.0977,0.6131 -0.1177,0.6174 -0.1372,0.6212 -0.6087,0.1767 -0.6111,0.1682 -0.6134,0.1599 -0.6155,0.1514 L 10.2636,44.3352 9.853,43.8594 9.4619,43.3773 9.091,42.8892 8.7413,42.395 8.4139,41.895 8.1104,41.3892 7.8329,40.8774 7.5846,40.3594 7.3713,39.8344 7.21,39.2995 7.0333,38.3365 6.0623,38.502 5.0874,38.6429 4.1093,38.7591 3.1285,38.8506 3.2071,39.8265 3.1897,40.3849 3.1196,40.9472 3.0139,41.5119 2.8783,42.078 2.716,42.6452 2.5292,43.2129 2.3193,43.7807 2.0874,44.3482 1.8344,44.9151 1.5609,45.481 1.2675,46.0455 0.6338,46.0586 0,46.063 -0.6338,46.0586 -1.2675,46.0455 -1.5609,45.481 -1.8344,44.9151 -2.0874,44.3482 -2.3193,43.7807 -2.5292,43.2129 -2.716,42.6452 -2.8783,42.078 l -0.1356,-0.5661 -0.1057,-0.5647 -0.0701,-0.5623 -0.0174,-0.5584 0.0786,-0.9759 -0.9808,-0.0915 -0.9781,-0.1162 -0.9749,-0.1409 -0.971,-0.1655 -0.1767,0.963 -0.1613,0.5349 -0.2133,0.525 -0.2483,0.518 -0.2775,0.5118 -0.3035,0.5058 -0.3274,0.5 -0.3497,0.4942 -0.3709,0.4881 -0.3911,0.4821 -0.4106,0.4758 -0.4295,0.4695 -0.6155,-0.1514 -0.6134,-0.1599 -0.6111,-0.1682 -0.6087,-0.1767 -0.1372,-0.6212 -0.1177,-0.6174 -0.0977,-0.6131 -0.0771,-0.6082 -0.0558,-0.6028 -0.0335,-0.5967 -0.01,-0.5898 0.0156,-0.582 0.044,-0.5727 0.0778,-0.5613 0.1277,-0.5439 0.3285,-0.9223 -0.9237,-0.3422 -0.9147,-0.3654 -0.9052,-0.3884 -0.8951,-0.4112 -0.4199,0.8844 -0.2943,0.4749 -0.3418,0.452 -0.3739,0.4361 -0.4006,0.4225 -0.4241,0.41 -0.4456,0.3982 -0.4657,0.3868 -0.4846,0.3756 -0.5025,0.3644 -0.5198,0.3533 -0.5363,0.3423 -0.5554,-0.3055 -0.5511,-0.3132 -0.5467,-0.3207 -0.5423,-0.3282 0.0282,-0.6356 0.0462,-0.6268 0.0643,-0.6174 0.0829,-0.6075 0.1021,-0.5966 0.1221,-0.5851 0.143,-0.5723 0.1657,-0.5581 0.1907,-0.5419 0.2205,-0.522 0.2641,-0.4923 0.556,-0.8059 -0.8036,-0.5695 -0.789,-0.5898 -0.7738,-0.6094 -0.7582,-0.6288 -0.6345,0.7456 -0.4072,0.3825 -0.4472,0.3481 -0.474,0.3245 -0.4962,0.3044 -0.5158,0.2863 -0.5335,0.2693 -0.5499,0.2531 -0.5653,0.2373 -0.5798,0.2219 -0.5935,0.2068 -0.6066,0.1918 -0.4574,-0.4388 -0.4513,-0.4451 -0.4451,-0.4513 -0.4388,-0.4574 0.1918,-0.6066 0.2068,-0.5935 0.2219,-0.5798 0.2373,-0.5653 0.2531,-0.5499 0.2693,-0.5335 0.2863,-0.5158 0.3044,-0.4962 0.3245,-0.474 0.3481,-0.4472 0.3825,-0.4072 0.7456,-0.6345 -0.6288,-0.7582 -0.6094,-0.7738 -0.5898,-0.789 -0.5695,-0.8036 -0.8059,0.556 -0.4923,0.2641 -0.522,0.2205 -0.5419,0.1907 -0.5581,0.1657 -0.5723,0.143 -0.5851,0.1221 -0.5966,0.1021 -0.6075,0.0829 -0.6174,0.0643 -0.6268,0.0462 -0.6356,0.0282 -0.3282,-0.5423 -0.3207,-0.5467 -0.3132,-0.5511 -0.3055,-0.5554 0.3423,-0.5363 0.3533,-0.5198 0.3644,-0.5025 0.3756,-0.4846 0.3868,-0.4657 0.3982,-0.4456 0.41,-0.4241 0.4225,-0.4006 0.4361,-0.3739 0.452,-0.3418 0.4749,-0.2943 0.8844,-0.4199 -0.4112,-0.8951 -0.3884,-0.9052 -0.3654,-0.9147 -0.3422,-0.9237 -0.9223,0.3285 -0.5439,0.1277 -0.5613,0.0778 -0.5727,0.044 -0.582,0.0156 -0.5898,-0.01 -0.5967,-0.0335 -0.6028,-0.0558 -0.6082,-0.0771 -0.6131,-0.0977 -0.6174,-0.1177 -0.6212,-0.1372 -0.1767,-0.6087 -0.1682,-0.6111 -0.1599,-0.6134 -0.1514,-0.6155 0.4695,-0.4295 0.4758,-0.4106 0.4821,-0.3911 0.4881,-0.3709 0.4942,-0.3497 0.5,-0.3274 0.5058,-0.3035 0.5118,-0.2775 0.518,-0.2483 0.525,-0.2133 0.5349,-0.1613 0.963,-0.1767 -0.1655,-0.971 -0.1409,-0.9749 -0.1162,-0.9781 -0.0915,-0.9808 -0.9759,0.0786 L -40.3849,3.1897 -40.9472,3.1196 -41.5119,3.0139 -42.078,2.8783 -42.6452,2.716 -43.2129,2.5292 -43.7807,2.3193 -44.3482,2.0874 -44.9151,1.8344 -45.481,1.5609 -46.0455,1.2675 -46.0586,0.6338 -46.063,0 l 0.0044,-0.6338 0.0131,-0.6337 0.5645,-0.2934 0.5659,-0.2735 0.5669,-0.253 0.5675,-0.2319 0.5678,-0.2099 0.5677,-0.1868 0.5672,-0.1623 0.5661,-0.1356 0.5647,-0.1057 0.5623,-0.0701 0.5584,-0.0174 0.9759,0.0786 0.0915,-0.9808 0.1162,-0.9781 0.1409,-0.9749 0.1655,-0.971 -0.963,-0.1767 -0.5349,-0.1613 -0.525,-0.2133 -0.518,-0.2483 -0.5118,-0.2775 -0.5058,-0.3035 -0.5,-0.3274 -0.4942,-0.3497 -0.4881,-0.3709 -0.4821,-0.3911 -0.4758,-0.4106 -0.4695,-0.4295 0.1514,-0.6155 0.1599,-0.6134 0.1682,-0.6111 0.1767,-0.6087 0.6212,-0.1372 0.6174,-0.1177 0.6131,-0.0977 0.6082,-0.0771 0.6028,-0.0558 0.5967,-0.0335 0.5898,-0.01 0.582,0.0156 0.5727,0.044 0.5613,0.0778 0.5439,0.1277 0.9223,0.3285 0.3422,-0.9237 0.3654,-0.9147 0.3884,-0.9052 0.4112,-0.8951 -0.8844,-0.4199 -0.4749,-0.2943 -0.452,-0.3418 -0.4361,-0.3739 -0.4225,-0.4006 -0.41,-0.4241 -0.3982,-0.4456 -0.3868,-0.4657 -0.3756,-0.4846 -0.3644,-0.5025 -0.3533,-0.5198 -0.3423,-0.5363 0.3055,-0.5554 0.3132,-0.5511 0.3207,-0.5467 0.3282,-0.5423 0.6356,0.0282 0.6268,0.0462 0.6174,0.0643 0.6075,0.0829 0.5966,0.1021 0.5851,0.1221 0.5723,0.143 0.5581,0.1657 0.5419,0.1907 0.522,0.2205 0.4923,0.2641 0.8059,0.556 0.5695,-0.8036 0.5898,-0.789 0.6094,-0.7738 0.6288,-0.7582 -0.7456,-0.6345 -0.3825,-0.4072 -0.3481,-0.4472 -0.3245,-0.474 -0.3044,-0.4962 -0.2863,-0.5158 -0.2693,-0.5335 -0.2531,-0.5499 -0.2373,-0.5653 -0.2219,-0.5798 -0.2068,-0.5935 -0.1918,-0.6066 0.4388,-0.4574 0.4451,-0.4513 0.4513,-0.4451 0.4574,-0.4388 0.6066,0.1918 0.5935,0.2068 0.5798,0.2219 0.5653,0.2373 0.5499,0.2531 0.5335,0.2693 0.5158,0.2863 0.4962,0.3044 0.474,0.3245 0.4472,0.3481 0.4072,0.3825 0.6345,0.7456 0.7582,-0.6288 0.7738,-0.6094 0.789,-0.5898 0.8036,-0.5695 -0.556,-0.8059 -0.2641,-0.4923 -0.2205,-0.522 -0.1907,-0.5419 -0.1657,-0.5581 -0.143,-0.5723 -0.1221,-0.5851 -0.1021,-0.5966 -0.0829,-0.6075 -0.0643,-0.6174 -0.0462,-0.6268 -0.0282,-0.6356 0.5423,-0.3282 0.5467,-0.3207 0.5511,-0.3132 0.5554,-0.3055 0.5363,0.3423 0.5198,0.3533 0.5025,0.3644 0.4846,0.3756 0.4657,0.3868 0.4456,0.3982 0.4241,0.41 0.4006,0.4225 0.3739,0.4361 0.3418,0.452 0.2943,0.4749 0.4199,0.8844 0.8951,-0.4112 0.9052,-0.3884 0.9147,-0.3654 0.9237,-0.3422 -0.3285,-0.9223 -0.1277,-0.5439 -0.0778,-0.5613 -0.044,-0.5727 -0.0156,-0.582 0.01,-0.5898 0.0335,-0.5967 0.0558,-0.6028 0.0771,-0.6082 0.0977,-0.6131 0.1177,-0.6174 0.1372,-0.6212 0.6087,-0.1767 0.6111,-0.1682 0.6134,-0.1599 0.6155,-0.1514 0.4295,0.4695 0.4106,0.4758 0.3911,0.4821 0.3709,0.4881 0.3497,0.4942 0.3274,0.5 0.3035,0.5058 0.2775,0.5118 0.2483,0.518 0.2133,0.525 0.1613,0.5349 0.1767,0.963 0.971,-0.1655 0.9749,-0.1409 0.9781,-0.1162 0.9808,-0.0915 -0.0786,-0.9759 0.0174,-0.5584 0.0701,-0.5623 0.1057,-0.5647 0.1356,-0.5661 0.1623,-0.5672 0.1868,-0.5677 0.2099,-0.5678 0.2319,-0.5675 0.253,-0.5669 0.2735,-0.5659 0.2934,-0.5645 0.6337,-0.0131 L 0,-46.063 l 0.6338,0.0044 0.6337,0.0131 0.2934,0.5645 0.2735,0.5659 0.253,0.5669 0.2319,0.5675 0.2099,0.5678 0.1868,0.5677 0.1623,0.5672 0.1356,0.5661 0.1057,0.5647 0.0701,0.5623 0.0174,0.5584 -0.0786,0.9759 0.9808,0.0915 0.9781,0.1162 0.9749,0.1409 0.971,0.1655 0.1767,-0.963 0.1613,-0.5349 0.2133,-0.525 0.2483,-0.518 0.2775,-0.5118 0.3035,-0.5058 0.3274,-0.5 0.3497,-0.4942 0.3709,-0.4881 0.3911,-0.4821 0.4106,-0.4758 0.4295,-0.4695 0.6155,0.1514 0.6134,0.1599 0.6111,0.1682 0.6087,0.1767 0.1372,0.6212 0.1177,0.6174 0.0977,0.6131 0.0771,0.6082 0.0558,0.6028 0.0335,0.5967 0.01,0.5898 -0.0156,0.582 -0.044,0.5727 -0.0778,0.5613 -0.1277,0.5439 -0.3285,0.9223 0.9237,0.3422 0.9147,0.3654 0.9052,0.3884 0.8951,0.4112 0.4199,-0.8844 0.2943,-0.4749 0.3418,-0.452 0.3739,-0.4361 0.4006,-0.4225 0.4241,-0.41 0.4456,-0.3982 0.4657,-0.3868 0.4846,-0.3756 0.5025,-0.3644 0.5198,-0.3533 0.5363,-0.3423 0.5554,0.3055 0.5511,0.3132 0.5467,0.3207 0.5423,0.3282 -0.0282,0.6356 -0.0462,0.6268 -0.0643,0.6174 -0.0829,0.6075 -0.1021,0.5966 -0.1221,0.5851 -0.143,0.5723 -0.1657,0.5581 -0.1907,0.5419 -0.2205,0.522 -0.2641,0.4923 -0.556,0.8059 0.8036,0.5695 0.789,0.5898 0.7738,0.6094 0.7582,0.6288 0.6345,-0.7456 0.4072,-0.3825 0.4472,-0.3481 0.474,-0.3245 0.4962,-0.3044 0.5158,-0.2863 0.5335,-0.2693 0.5499,-0.2531 0.5653,-0.2373 0.5798,-0.2219 0.5935,-0.2068 0.6066,-0.1918 0.4574,0.4388 0.4513,0.4451 0.4451,0.4513 0.4388,0.4574 -0.1918,0.6066 -0.2068,0.5935 -0.2219,0.5798 -0.2373,0.5653 -0.2531,0.5499 -0.2693,0.5335 -0.2863,0.5158 -0.3044,0.4962 -0.3245,0.474 -0.3481,0.4472 -0.3825,0.4072 -0.7456,0.6345 0.6288,0.7582 0.6094,0.7738 0.5898,0.789 0.5695,0.8036 0.8059,-0.556 0.4923,-0.2641 0.522,-0.2205 0.5419,-0.1907 0.5581,-0.1657 0.5723,-0.143 0.5851,-0.1221 0.5966,-0.1021 0.6075,-0.0829 0.6174,-0.0643 0.6268,-0.0462 0.6356,-0.0282 0.3282,0.5423 0.3207,0.5467 0.3132,0.5511 0.3055,0.5554 -0.3423,0.5363 -0.3533,0.5198 -0.3644,0.5025 -0.3756,0.4846 -0.3868,0.4657 -0.3982,0.4456 -0.41,0.4241 -0.4225,0.4006 -0.4361,0.3739 -0.452,0.3418 -0.4749,0.2943 -0.8844,0.4199 0.4112,0.8951 0.3884,0.9052 0.3654,0.9147 0.3422,0.9237 0.9223,-0.3285 0.5439,-0.1277 0.5613,-0.0778 0.5727,-0.044 0.582,-0.0156 0.5898,0.01 0.5967,0.0335 0.6028,0.0558 0.6082,0.0771 0.6131,0.0977 0.6174,0.1177 0.6212,0.1372 0.1767,0.6087 0.1682,0.6111 0.1599,0.6134 0.1514,0.6155 -0.4695,0.4295 -0.4758,0.4106 -0.4821,0.3911 -0.4881,0.3709 -0.4942,0.3497 -0.5,0.3274 -0.5058,0.3035 -0.5118,0.2775 -0.518,0.2483 -0.525,0.2133 -0.5349,0.1613 -0.963,0.1767 0.1655,0.971 0.1409,0.9749 0.1162,0.9781 0.0915,0.9808 z M 16.900498,5.314961 A 17.716535,17.716535 0 0 1 -3.847358,17.293741 L -9.31897,26.77085 A 28.346457,28.346457 0 0 0 27.843721,5.314961 z M -13.05314,11.97878 a 17.716535,17.716535 0 0 1 0,-23.95756 l -5.471611,-9.477109 a 28.346457,28.346457 0 0 0 0,42.911778 z m 9.205782,-29.272521 a 17.716535,17.716535 0 0 1 20.747856,11.97878 l 10.943223,0 A 28.346457,28.346457 0 0 0 -9.31897,-26.77085 z M 0,7.086614 A 7.086614,7.086614 0 0 0 0,-7.086614 7.086614,7.086614 0 0 0 0,7.086614"
id="path2992"
style="fill:#ddd;fill-opacity:1;stroke:#000;stroke-width:0.5" />
</g>
</g>
</svg>
Third wheel
And finally, the smallest one — gear-min.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="64.379997"
height="64.379997"
id="svg4179">
<defs
id="defs4181" />
<metadata
id="metadata4184">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
transform="translate(0,-987.98218)"
id="layer1" />
<g
transform="translate(32.1898,32.190217)"
id="g4220"
style="fill:#e5e5e5;fill-opacity:1">
<path
d="m 26.4668,-3.0057 0.4813,0.0066 0.4868,0.0584 0.4899,0.0939 0.4921,0.1238 0.4935,0.1508 0.4942,0.1757 0.4944,0.1995 0.4941,0.2222 0.4932,0.2441 0.4917,0.2654 0.49,0.2862 0.0163,0.5894 L 31.8898,0 31.8843,0.5897 31.868,1.1791 31.378,1.4653 30.8863,1.7307 30.3931,1.9748 29.899,2.197 29.4046,2.3965 28.9104,2.5722 28.4169,2.723 l -0.4921,0.1238 -0.4899,0.0939 -0.4868,0.0584 -0.4813,0.0066 -1.8221,-0.207 -0.1378,1.0234 -0.1803,1.0168 -0.2225,1.0083 -0.2643,0.9982 1.7626,0.5061 0.4421,0.1903 0.4273,0.2403 0.4168,0.2742 0.4072,0.3026 0.3983,0.3282 0.3893,0.3515 0.3805,0.3735 0.3714,0.3943 0.3622,0.4143 0.3528,0.4334 0.3431,0.4519 -0.2105,0.5508 -0.2206,0.5469 -0.2307,0.5427 -0.2407,0.5383 -0.5621,0.0769 -0.5559,0.057 -0.5491,0.0368 -0.5414,0.0162 -0.5331,-0.0049 -0.5239,-0.0267 -0.5137,-0.0496 -0.502,-0.0739 -0.4885,-0.1008 -0.4721,-0.1323 -0.4472,-0.1781 -1.6042,-0.8885 -0.5189,0.8928 -0.5557,0.8703 -0.5915,0.8464 -0.6261,0.8212 1.4347,1.142 0.3357,0.345 0.3028,0.3855 0.2801,0.4128 0.2604,0.4355 0.2424,0.4556 0.2252,0.4738 0.2085,0.4906 0.1923,0.5065 0.1761,0.5213 0.1601,0.5354 0.144,0.5488 -0.4052,0.4284 -0.4131,0.4208 -0.4208,0.4131 -0.4284,0.4052 -0.5488,-0.144 -0.5354,-0.1601 -0.5213,-0.1761 -0.5065,-0.1923 -0.4906,-0.2085 -0.4738,-0.2252 -0.4556,-0.2424 -0.4355,-0.2604 -0.4128,-0.2801 -0.3855,-0.3028 -0.345,-0.3357 -1.142,-1.4347 -0.8212,0.6261 -0.8464,0.5915 -0.8703,0.5557 -0.8928,0.5189 0.8885,1.6042 0.1781,0.4472 0.1323,0.4721 0.1008,0.4885 0.0739,0.502 0.0496,0.5137 0.0267,0.5239 0.0049,0.5331 -0.0162,0.5414 -0.0368,0.5491 -0.057,0.5559 -0.0769,0.5621 -0.5383,0.2407 -0.5427,0.2307 -0.5469,0.2206 L 11.106,29.8934 10.6541,29.5503 10.2207,29.1975 9.8064,28.8353 9.4121,28.4639 9.0386,28.0834 8.6871,27.6941 8.3589,27.2958 8.0563,26.8886 7.7821,26.4718 7.5418,26.0445 7.3515,25.6024 6.8454,23.8398 5.8472,24.1041 4.8389,24.3266 3.8221,24.5069 2.7987,24.6447 3.0057,26.4668 2.9991,26.9481 2.9407,27.4349 2.8468,27.9248 2.723,28.4169 2.5722,28.9104 2.3965,29.4046 2.197,29.899 1.9748,30.3931 1.7307,30.8863 1.4653,31.378 1.1791,31.868 0.5897,31.8843 0,31.8898 -0.5897,31.8843 -1.1791,31.868 -1.4653,31.378 -1.7307,30.8863 -1.9748,30.3931 -2.197,29.899 -2.3965,29.4046 -2.5722,28.9104 -2.723,28.4169 l -0.1238,-0.4921 -0.0939,-0.4899 -0.0584,-0.4868 -0.0066,-0.4813 0.207,-1.8221 -1.0234,-0.1378 -1.0168,-0.1803 -1.0083,-0.2225 -0.9982,-0.2643 -0.5061,1.7626 -0.1903,0.4421 -0.2403,0.4273 -0.2742,0.4168 -0.3026,0.4072 -0.3282,0.3983 -0.3515,0.3893 -0.3735,0.3805 -0.3943,0.3714 -0.4143,0.3622 -0.4334,0.3528 -0.4519,0.3431 -0.5508,-0.2105 -0.5469,-0.2206 -0.5427,-0.2307 -0.5383,-0.2407 -0.0769,-0.5621 -0.057,-0.5559 -0.0368,-0.5491 -0.0162,-0.5414 0.0049,-0.5331 0.0267,-0.5239 0.0496,-0.5137 0.0739,-0.502 0.1008,-0.4885 0.1323,-0.4721 0.1781,-0.4472 0.8885,-1.6042 -0.8928,-0.5189 -0.8703,-0.5557 -0.8464,-0.5915 -0.8212,-0.6261 -1.142,1.4347 -0.345,0.3357 -0.3855,0.3028 -0.4128,0.2801 -0.4355,0.2604 -0.4556,0.2424 -0.4738,0.2252 -0.4906,0.2085 -0.5065,0.1923 -0.5213,0.1761 -0.5354,0.1601 -0.5488,0.144 -0.4284,-0.4052 -0.4208,-0.4131 -0.4131,-0.4208 -0.4052,-0.4284 0.144,-0.5488 0.1601,-0.5354 0.1761,-0.5213 0.1923,-0.5065 0.2085,-0.4906 0.2252,-0.4738 0.2424,-0.4556 0.2604,-0.4355 0.2801,-0.4128 0.3028,-0.3855 0.3357,-0.345 1.4347,-1.142 -0.6261,-0.8212 -0.5915,-0.8464 -0.5557,-0.8703 -0.5189,-0.8928 -1.6042,0.8885 -0.4472,0.1781 -0.4721,0.1323 -0.4885,0.1008 -0.502,0.0739 -0.5137,0.0496 -0.5239,0.0267 -0.5331,0.0049 -0.5414,-0.0162 -0.5491,-0.0368 -0.5559,-0.057 -0.5621,-0.0769 -0.2407,-0.5383 -0.2307,-0.5427 -0.2206,-0.5469 -0.2105,-0.5508 0.3431,-0.4519 0.3528,-0.4334 0.3622,-0.4143 0.3714,-0.3943 0.3805,-0.3735 0.3893,-0.3515 0.3983,-0.3282 0.4072,-0.3026 0.4168,-0.2742 0.4273,-0.2403 0.4421,-0.1903 1.7626,-0.5061 -0.2643,-0.9982 -0.2225,-1.0083 -0.1803,-1.0168 -0.1378,-1.0234 -1.8221,0.207 L -26.9481,2.9991 -27.4349,2.9407 -27.9248,2.8468 -28.4169,2.723 -28.9104,2.5722 -29.4046,2.3965 -29.899,2.197 -30.3931,1.9748 -30.8863,1.7307 -31.378,1.4653 -31.868,1.1791 -31.8843,0.5897 -31.8898,0 l 0.0055,-0.5897 0.0163,-0.5894 0.49,-0.2862 0.4917,-0.2654 0.4932,-0.2441 0.4941,-0.2222 0.4944,-0.1995 0.4942,-0.1757 0.4935,-0.1508 0.4921,-0.1238 0.4899,-0.0939 0.4868,-0.0584 0.4813,-0.0066 1.8221,0.207 0.1378,-1.0234 0.1803,-1.0168 0.2225,-1.0083 0.2643,-0.9982 -1.7626,-0.5061 -0.4421,-0.1903 -0.4273,-0.2403 -0.4168,-0.2742 -0.4072,-0.3026 -0.3983,-0.3282 -0.3893,-0.3515 -0.3805,-0.3735 -0.3714,-0.3943 -0.3622,-0.4143 -0.3528,-0.4334 -0.3431,-0.4519 0.2105,-0.5508 0.2206,-0.5469 0.2307,-0.5427 0.2407,-0.5383 0.5621,-0.0769 0.5559,-0.057 0.5491,-0.0368 0.5414,-0.0162 0.5331,0.0049 0.5239,0.0267 0.5137,0.0496 0.502,0.0739 0.4885,0.1008 0.4721,0.1323 0.4472,0.1781 1.6042,0.8885 0.5189,-0.8928 0.5557,-0.8703 0.5915,-0.8464 0.6261,-0.8212 -1.4347,-1.142 -0.3357,-0.345 -0.3028,-0.3855 -0.2801,-0.4128 -0.2604,-0.4355 -0.2424,-0.4556 -0.2252,-0.4738 -0.2085,-0.4906 -0.1923,-0.5065 -0.1761,-0.5213 -0.1601,-0.5354 -0.144,-0.5488 0.4052,-0.4284 0.4131,-0.4208 0.4208,-0.4131 0.4284,-0.4052 0.5488,0.144 0.5354,0.1601 0.5213,0.1761 0.5065,0.1923 0.4906,0.2085 0.4738,0.2252 0.4556,0.2424 0.4355,0.2604 0.4128,0.2801 0.3855,0.3028 0.345,0.3357 1.142,1.4347 0.8212,-0.6261 0.8464,-0.5915 0.8703,-0.5557 0.8928,-0.5189 -0.8885,-1.6042 -0.1781,-0.4472 -0.1323,-0.4721 -0.1008,-0.4885 -0.0739,-0.502 -0.0496,-0.5137 -0.0267,-0.5239 -0.0049,-0.5331 0.0162,-0.5414 0.0368,-0.5491 0.057,-0.5559 0.0769,-0.5621 0.5383,-0.2407 0.5427,-0.2307 0.5469,-0.2206 0.5508,-0.2105 0.4519,0.3431 0.4334,0.3528 0.4143,0.3622 0.3943,0.3714 0.3735,0.3805 0.3515,0.3893 0.3282,0.3983 0.3026,0.4072 0.2742,0.4168 0.2403,0.4273 0.1903,0.4421 0.5061,1.7626 0.9982,-0.2643 1.0083,-0.2225 1.0168,-0.1803 1.0234,-0.1378 -0.207,-1.8221 0.0066,-0.4813 0.0584,-0.4868 0.0939,-0.4899 0.1238,-0.4921 0.1508,-0.4935 0.1757,-0.4942 0.1995,-0.4944 0.2222,-0.4941 0.2441,-0.4932 0.2654,-0.4917 0.2862,-0.49 0.5894,-0.0163 0.5897,-0.0055 0.5897,0.0055 0.5894,0.0163 0.2862,0.49 0.2654,0.4917 0.2441,0.4932 0.2222,0.4941 0.1995,0.4944 0.1757,0.4942 0.1508,0.4935 0.1238,0.4921 0.0939,0.4899 0.0584,0.4868 0.0066,0.4813 -0.207,1.8221 1.0234,0.1378 1.0168,0.1803 1.0083,0.2225 0.9982,0.2643 0.5061,-1.7626 0.1903,-0.4421 0.2403,-0.4273 0.2742,-0.4168 0.3026,-0.4072 0.3282,-0.3983 0.3515,-0.3893 0.3735,-0.3805 0.3943,-0.3714 0.4143,-0.3622 0.4334,-0.3528 0.4519,-0.3431 0.5508,0.2105 0.5469,0.2206 0.5427,0.2307 0.5383,0.2407 0.0769,0.5621 0.057,0.5559 0.0368,0.5491 0.0162,0.5414 -0.0049,0.5331 -0.0267,0.5239 -0.0496,0.5137 -0.0739,0.502 -0.1008,0.4885 -0.1323,0.4721 -0.1781,0.4472 -0.8885,1.6042 0.8928,0.5189 0.8703,0.5557 0.8464,0.5915 0.8212,0.6261 1.142,-1.4347 0.345,-0.3357 0.3855,-0.3028 0.4128,-0.2801 0.4355,-0.2604 0.4556,-0.2424 0.4738,-0.2252 0.4906,-0.2085 0.5065,-0.1923 0.5213,-0.1761 0.5354,-0.1601 0.5488,-0.144 0.4284,0.4052 0.4208,0.4131 0.4131,0.4208 0.4052,0.4284 -0.144,0.5488 -0.1601,0.5354 -0.1761,0.5213 -0.1923,0.5065 -0.2085,0.4906 -0.2252,0.4738 -0.2424,0.4556 -0.2604,0.4355 -0.2801,0.4128 -0.3028,0.3855 -0.3357,0.345 -1.4347,1.142 0.6261,0.8212 0.5915,0.8464 0.5557,0.8703 0.5189,0.8928 1.6042,-0.8885 0.4472,-0.1781 0.4721,-0.1323 0.4885,-0.1008 0.502,-0.0739 0.5137,-0.0496 0.5239,-0.0267 0.5331,-0.0049 0.5414,0.0162 0.5491,0.0368 0.5559,0.057 0.5621,0.0769 0.2407,0.5383 0.2307,0.5427 0.2206,0.5469 0.2105,0.5508 -0.3431,0.4519 -0.3528,0.4334 -0.3622,0.4143 -0.3714,0.3943 -0.3805,0.3735 -0.3893,0.3515 -0.3983,0.3282 -0.4072,0.3026 -0.4168,0.2742 -0.4273,0.2403 -0.4421,0.1903 -1.7626,0.5061 0.2643,0.9982 0.2225,1.0083 0.1803,1.0168 0.1378,1.0234 z M 0,7.086614 A 7.086614,7.086614 0 0 0 0,-7.086614 7.086614,7.086614 0 0 0 0,7.086614"
id="path4222"
style="fill:#ddd;fill-opacity:1;stroke:#000;stroke-width:0.5" />
</g>
</svg>
“Glueing”
To complete the whole story, we need some index.html file. It:
- Includes a
xmlns:xlinklinking (“glueing”) SVG element - Uses some simple CSS to center spinning gears vertically and horizontally
- Adds some cool (?) gradient to the background
Here’s the file’s content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader</title>
<style>
html {
height: 100vh;
}
body {
background: radial-gradient(ellipse at center, #443501 0%, #000000 100%);
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
div#main {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div id="main">
<div id="container">
<div>
<svg version="1.1" baseProfile="full" width="213" height="180" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image id="gear1" x="0" y="0" width="92" height="92" xlink:href="gear-med.svg"/>
<image id="gear2" x="57.5" y="57.5" width="122" height="122" xlink:href="gear-max.svg" transform="rotate(16.875 118.5 118.5)"/>
<image id="gear3" x="149" y="24" width="64" height="64" xlink:href="gear-min.svg"/>
<animateTransform xlink:href="#gear1" attributeName="transform" attributeType="XML" type="rotate" from="0 46 46" to="360 46 46" dur="6s" repeatCount="400"/>
<animateTransform xlink:href="#gear2" attributeName="transform" attributeType="XML" type="rotate" to="16.875 118.5 118.5" from="376.875 118.5 118.5" dur="8s" repeatCount="300"/>
<animateTransform xlink:href="#gear3" attributeName="transform" attributeType="XML" type="rotate" from="0 181 56" to="360 181 56" dur="4s" repeatCount="600"/>
</svg>
</div>
</div>
</div>
</body>
</html>
That’s all folks!
That would be pretty much all. Put index.html, gear-max.svg, gear-med.svg and gear-min.svg files in a single folder, fire index.html in your browser and observe the effects.
If you don’t want to play yourself with copy-paste, you can download the above file. It contains everything above, packed together, plus a non-svg, png-based version.
But, keep in mind that only external .svg files are replaced with .png images. Main, internal SVG object inside index.html file remains, as it is essential for the animation.
Now, that’s really all folks! :)