md.shakil hossain
1149
SVG CSS hover icon animation
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="187px" height="187px" viewBox="0 0 187 187" version="1.1">
<defs/>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g sketch:type="MSLayerGroup">
<g sketch:type="MSShapeGroup">
<g>
<circle fill="#D8D8D8" cx="93.5" cy="93.5" r="93.5"/>
<g transform="translate(58.134715, 38.756477)" fill="#000000">
<path d="M37.2963264 1.92813472C33.8169637-0.665642487 27.4318342 1.9756114 22.7984974 7.82687047 14.7042073 6.09251813 5.63325389 9.42654404 0 16.9927772L33.5563264 41.9800466C39.1895803 34.4128446 39.7825544 24.7663575 35.8022642 17.5092073 40.0790415 11.3944041 40.7776269 4.52094301 37.2963264 1.92813472L37.2963264 1.92813472Z"/>
<path d="M94.4330622 65.4344974L80.7171451 65.427715C80.7646218 65.1031295 80.8101606 64.7736995 80.8518238 64.4442694L77.4305959 64.0256995C77.3714922 64.4994974 77.3017306 64.966513 77.2280933 65.4248083L61.9473834 65.4141503C60.5947824 65.4131813 59.4853782 66.5206477 59.4853782 67.8732487L59.4834404 70.223829C59.4834404 71.5764301 60.5889689 72.6858342 61.9415699 72.6868031L94.4282176 72.7052124C95.7808187 72.7071503 96.8902228 71.5996839 96.8902228 70.2470829L96.8911917 67.8965026C96.8911917 66.5439016 95.7837254 65.4364352 94.4330622 65.4344974L94.4330622 65.4344974Z"/>
<path d="M75.3067409 43.3452435L78.5971658 42.3307927C78.3985389 41.6884041 78.188285 41.0431088 77.9654352 40.402658L74.7108601 41.5333782C74.9201451 42.1389482 75.1168342 42.7425803 75.3067409 43.3452435L75.3067409 43.3452435Z"/>
<path d="M76.0789637 46.1037358L79.4188031 45.2636891C79.2540881 44.6087047 79.0777461 43.9575959 78.8868705 43.3045492L75.5770674 44.2628031C75.757285 44.8761244 75.9210311 45.4904145 76.0789637 46.1037358L76.0789637 46.1037358Z"/>
<path d="M70.7877358 32.8819637L73.7758601 31.1660207C73.4406166 30.5778912 73.0927772 29.996544 72.7294352 29.4239171L69.8130104 31.2551606C70.1492228 31.7929067 70.4747772 32.3345285 70.7877358 32.8819637L70.7877358 32.8819637Z"/>
<path d="M74.3901503 40.634228L77.6224404 39.4444041C77.3918394 38.8126736 77.1457358 38.180943 76.8880052 37.5511503L73.6993161 38.8572435C73.941544 39.4453731 74.1711762 40.0393161 74.3901503 40.634228L74.3901503 40.634228Z"/>
<path d="M72.1306477 35.3895078L75.2137254 33.8518446C74.9123938 33.2482124 74.5984663 32.647487 74.2729119 32.0525751L71.2508756 33.7074767C71.5580207 34.2616943 71.8506321 34.8226943 72.1306477 35.3895078L72.1306477 35.3895078Z"/>
<path d="M73.3330674 37.9774715L76.4955959 36.6161503C76.2291451 35.9950777 75.9510674 35.3778808 75.657487 34.7626218L72.5463109 36.2411813C72.819544 36.8176839 73.0811503 37.3970933 73.3330674 37.9774715L73.3330674 37.9774715Z"/>
<path d="M77.6960777 57.4138446L81.1405596 57.3014508C81.1202124 56.6319326 81.081456 55.9546632 81.0349482 55.2706114L77.6001554 55.5147772C77.6437565 56.155228 77.6757306 56.7908342 77.6960777 57.4138446L77.6960777 57.4138446Z"/>
<path d="M77.5323316 63.0916684L80.9613109 63.425943C81.0271969 62.7573938 81.0766114 62.0694663 81.1105233 61.3815389L77.6679793 61.2081036C77.637943 61.8485544 77.5924041 62.4764093 77.5323316 63.0916684L77.5323316 63.0916684Z"/>
<path d="M77.703829 60.2614767L81.1502487 60.3593368C81.1676891 59.6898187 81.1725337 59.0077047 81.1657513 58.3197772L77.7173938 58.366285C77.7309585 59.0067358 77.7251451 59.6413731 77.703829 60.2614767L77.703829 60.2614767Z"/>
<path d="M77.4393161 53.7193834C77.4693523 54.0003679 77.4984197 54.285228 77.5226425 54.5662124L80.9516218 54.2561606C80.9254611 53.9557979 80.8983316 53.6554352 80.8663575 53.3541036 80.8246943 52.9820415 80.7810933 52.6109482 80.7336166 52.2369482L77.3162642 52.6690829C77.3618031 53.019829 77.4034663 53.3705751 77.4393161 53.7193834L77.4393161 53.7193834Z"/>
<path d="M77.1893368 51.7234249L80.5999067 51.2302487C80.5030155 50.566544 80.3954663 49.8989637 80.2743523 49.2284767L76.8850984 49.8379223C76.9965233 50.4686839 77.0982591 51.0975078 77.1893368 51.7234249L77.1893368 51.7234249Z"/>
<path d="M76.7068187 48.9009845L80.0863834 48.2314663C79.9536425 47.5716373 79.8121813 46.9108394 79.6590933 46.2481036L76.3037513 47.0348601C76.4490881 47.6578705 76.5837668 48.2799119 76.7068187 48.9009845L76.7068187 48.9009845Z"/>
<path d="M46.1550881 9.97785492L45.3276373 13.3225389C45.9477409 13.4756269 46.5552487 13.6413109 47.1540363 13.8176528L48.1277927 10.5136632C47.4815285 10.3218187 46.8246062 10.1435389 46.1550881 9.97785492L46.1550881 9.97785492Z"/>
<path d="M42.5517047 12.7295648C43.1795596 12.8429275 43.7986943 12.968886 44.4081399 13.1045337L45.1629223 9.74240933C44.506 9.59610363 43.8393886 9.46142487 43.1630881 9.33837306L42.5517047 12.7295648 42.5517047 12.7295648Z"/>
<path d="M49.1063938 10.813057L48.0570622 14.0966995C48.6616632 14.2875751 49.2556062 14.4949223 49.840829 14.7119585L51.0422798 11.4825751C50.4076425 11.2451917 49.7623472 11.022342 49.1063938 10.813057L49.1063938 10.813057Z"/>
<path d="M54.8094093 13.0909689L53.3046891 16.191487C53.8685959 16.466658 54.4325026 16.7563627 54.9799378 17.0557565L56.6319326 14.0327513C56.0360518 13.706228 55.4227306 13.3893938 54.8094093 13.0909689L54.8094093 13.0909689Z"/>
<path d="M51.9976269 11.8488238L50.720601 15.0510777C51.3087306 15.2845855 51.8862021 15.531658 52.4539845 15.7893886L53.8811917 12.6549585C53.2639948 12.3739741 52.6293575 12.1036477 51.9976269 11.8488238L51.9976269 11.8488238Z"/>
<path d="M57.5272073 14.5356166L55.8015751 17.5159896C56.3393212 17.8289482 56.8799741 18.1622539 57.4060933 18.4994352L59.2780311 15.6072332C58.7044352 15.2361399 58.1153368 14.8766736 57.5272073 14.5356166L57.5272073 14.5356166Z"/>
<path d="M61.7962332 17.3735596C61.2546114 16.9627409 60.6945803 16.5587047 60.1306736 16.1759845L58.1889741 19.0226477C58.7054041 19.3743627 59.2198964 19.745456 59.7198549 20.1223627L61.7962332 17.3735596 61.7962332 17.3735596Z"/>
<path d="M67.6707461 28.1410777L70.422456 26.070513C70.0135751 25.5259845 69.5940363 24.9901762 69.1599637 24.4630881L66.4993316 26.6547668C66.902399 27.1430984 67.2919016 27.6372435 67.6707461 28.1410777L67.6707461 28.1410777Z"/>
<path d="M65.889886 25.9290518L68.4991658 23.6811762C68.0563731 23.165715 67.6000155 22.6589741 67.1291244 22.1609534L64.6235181 24.5250984C65.0575907 24.9872694 65.4810052 25.4552539 65.889886 25.9290518L65.889886 25.9290518Z"/>
<path d="M39.7331399 12.3119637C40.3706839 12.3865699 40.9975699 12.4728031 41.6147668 12.5706632L42.1563886 9.16978238C41.4936528 9.06417098 40.8221969 8.97018653 40.1400829 8.88879793L39.7331399 12.3119637 39.7331399 12.3119637Z"/>
<path d="M69.3014249 30.4606528L72.1800622 28.5683679C71.8070311 28.0015544 71.423342 27.4415233 71.0260881 26.8902124L68.2288394 28.9016736C68.5979948 29.414228 68.9555233 29.9335648 69.3014249 30.4606528L69.3014249 30.4606528Z"/>
<path d="M63.9685337 23.8468601L66.4169741 21.4245803C65.9363938 20.9401244 65.4403109 20.459544 64.9432591 20.0022176L62.612057 22.538829C63.0761658 22.9651503 63.5276788 23.4011606 63.9685337 23.8468601L63.9685337 23.8468601Z"/>
<path d="M61.9115337 21.9070984L64.1807254 19.3181658C63.668171 18.8656839 63.1381762 18.4238601 62.6062435 18.0033523L60.4639793 20.6988653C60.9561865 21.0912746 61.4406425 21.494342 61.9115337 21.9070984L61.9115337 21.9070984Z"/>
</g>
</g>
</g>
<path class="tableGlow" d="M14.1178651 113.004879L83.9855952 113.347117 91.1198202 81.5342628 58.149144 57.0991165 14.1178651 113.004879Z" opacity="0.460296175" fill="#D8D8D8" sketch:type="MSShapeGroup"/>
</g>
</g>
</svg>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="178px" height="178px" viewBox="0 0 178 178" version="1.1">
<defs/>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Cloud" sketch:type="MSLayerGroup">
<circle id="Oval-4" fill="#D8D8D8" sketch:type="MSShapeGroup" cx="89" cy="89" r="89"/>
<path d="M62.591343 44.5037112C44.8577507 44.6968468 30.59375 52.4037829 30.59375 61.8828125 30.59375 71.4830748 45.2249445 79.265625 63.2734375 79.265625L85.5234375 79.265625 92.2427582 79.265625 107.773438 79.265625C125.821931 79.265625 140.453125 71.4830748 140.453125 61.8828125 140.453125 56.5903424 136.006501 51.8503004 128.992061 48.6620524 129.21354 47.5297254 129.328125 46.3722762 129.328125 45.1953125 129.328125 31.7549453 114.385629 20.859375 95.953125 20.859375 77.8378389 20.859375 63.0934697 31.3831538 62.5913433 44.5037031L62.591343 44.5037112Z" id="Oval-1" fill="#000000" sketch:type="MSShapeGroup"/>
<path class="lightning" d="M104.118299 81.17867L114.679489 81.1922433 108.93231 92.6730268 117.525366 92.4705578 106.132809 123.121422 112.042867 96.9203512 103.625134 96.9203512 109.25807 85.4655832 102.931763 85.4655832 104.118299 81.17867Z" id="lightning" fill="#D8D8D8" sketch:type="MSShapeGroup"/>
<path class="rain1" d="M57.7109375 95.5785693C59.63099 95.5785693 61.1875 93.8563015 61.1875 90.64904 61.1875 87.4417785 57.7109375 81.17867 57.7109375 81.17867 57.7109375 81.17867 54.234375 87.4417785 54.234375 90.64904 54.234375 93.8563015 55.790885 95.5785693 57.7109375 95.5785693Z" id="rain1" fill="#4990E2" sketch:type="MSShapeGroup"/>
<path class="rain2" d="M85.5234375 95.5785693C87.44349 95.5785693 89 93.8563015 89 90.64904 89 87.4417785 85.5234375 81.17867 85.5234375 81.17867 85.5234375 81.17867 82.046875 87.4417785 82.046875 90.64904 82.046875 93.8563015 83.603385 95.5785693 85.5234375 95.5785693Z" id="rain2" fill="#4990E2" sketch:type="MSShapeGroup"/>
<path class="rain3" d="M71.6171875 102.778519C73.53724 102.778519 75.09375 101.056251 75.09375 97.8489897 75.09375 94.6417281 71.6171875 88.3786197 71.6171875 88.3786197 71.6171875 88.3786197 68.140625 94.6417281 68.140625 97.8489897 68.140625 101.056251 69.697135 102.778519 71.6171875 102.778519Z" id="rain3" fill="#4990E2" sketch:type="MSShapeGroup"/>
</g>
</g>
</svg>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="178px" height="178px" viewBox="0 0 178 178" version="1.1">
<defs/>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="wheelIcon" sketch:type="MSLayerGroup">
<circle id="Oval-1" fill="#D8D8D8" sketch:type="MSShapeGroup" cx="89" cy="89" r="89"/>
<path class="wheel" d="M113.83935 64.3415197C107.228996 57.7311663 98.4394738 54.0904348 89.0904348 54.0904348 79.7413957 54.0904348 70.952648 57.7311663 64.3415197 64.3415197 57.7311663 70.9518731 54.0904348 79.7413957 54.0904348 89.0904348 54.0904348 98.4394738 57.7311663 107.228222 64.3415197 113.83935 70.9518731 120.449703 79.7413957 124.090435 89.0904348 124.090435 98.4394738 124.090435 107.228222 120.449703 113.83935 113.83935 120.449703 107.228996 124.090435 98.4394738 124.090435 89.0904348 124.090435 79.7413957 120.449703 70.952648 113.83935 64.3415197L113.83935 64.3415197ZM101.990311 97.2398458L98.303857 92.9070808 104.625928 92.3971614 120.382282 100.238141C120.090125 101.055717 119.766969 101.858569 119.41359 102.645146L101.990311 97.2398458 101.990311 97.2398458ZM119.168705 103.179864C117.790838 106.109964 115.99682 108.806802 113.863373 111.195208L102.696293 98.069821 119.168705 103.179864 119.168705 103.179864ZM103.33408 119.095859C102.555252 119.467062 101.76015 119.808817 100.949548 120.119573L92.4498582 103.974192 92.9070808 98.303857 97.7381409 102.413435 103.33408 119.095859 103.33408 119.095859ZM98.5991143 103.147316L111.195208 113.864148C108.993566 115.83098 106.529988 117.508755 103.862598 118.838575L98.5991143 103.147316 98.5991143 103.147316ZM100.397781 120.325711C97.4297094 121.403671 94.2663492 122.069356 90.9758967 122.25457L92.3622885 105.061452 100.397781 120.325711 100.397781 120.325711ZM77.9427286 120.383057C77.1251527 120.0909 76.3223009 119.767744 75.5357231 119.414365L80.9410237 101.990311 85.2737888 98.303857 85.7837082 104.625928 77.9427286 120.383057 77.9427286 120.383057ZM85.8743777 105.753485L87.2049729 122.253795C84.1780045 122.083305 81.2579797 121.50674 78.4983703 120.576021L85.8743777 105.753485 85.8743777 105.753485ZM75.0010051 119.168705C72.070906 117.790838 69.3740678 115.99682 66.9856611 113.863373L80.1110485 102.696293 75.0010051 119.168705 75.0010051 119.168705ZM59.0850101 103.333305C58.7138074 102.554477 58.3720529 101.759375 58.0612965 100.948773L74.2066778 92.4490833 79.8770126 92.9063058 75.7674342 97.737366 59.0850101 103.333305 59.0850101 103.333305ZM75.0335532 98.5991143L64.3167212 111.195208C62.3498892 108.993566 60.6721149 106.529988 59.3422947 103.862598L75.0335532 98.5991143 75.0335532 98.5991143ZM76.1905588 80.9410237L79.8770126 85.2737888 73.5549419 85.7837082 57.7978123 77.9427286C58.0899698 77.1251527 58.4131254 76.3223009 58.7665042 75.5357231L76.1905588 80.9410237 76.1905588 80.9410237ZM59.0121645 75.0010051C60.3900318 72.070906 62.1840492 69.3740678 64.3174962 66.9856611L75.4845761 80.1110485 59.0121645 75.0010051 59.0121645 75.0010051ZM74.8475644 59.0850101C75.6263926 58.7138074 76.4214949 58.3720529 77.2320963 58.0612965L85.7317863 74.2066778 85.2745637 79.8770126 80.4435036 75.7674342 74.8475644 59.0850101 74.8475644 59.0850101ZM79.5817553 75.0335532L66.9856611 64.3174962C69.187304 62.3506642 71.6508812 60.6728898 74.3182711 59.3430696L79.5817553 75.0335532 79.5817553 75.0335532ZM77.7830882 57.8551589C80.7511601 56.7771986 83.9145203 56.1115135 87.2049729 55.9262996L85.8185811 73.119418 77.7830882 57.8551589 77.7830882 57.8551589ZM100.238141 57.7978123C101.055717 58.0899698 101.858569 58.4131254 102.645146 58.7665042L97.2398458 76.1905588 92.9070808 79.8770126 92.3971614 73.5549419 100.238141 57.7978123 100.238141 57.7978123ZM92.3064918 72.4266096L90.9758967 55.9262996C94.002865 56.0967894 96.9228898 56.6733548 99.6824993 57.604074L92.3064918 72.4266096 92.3064918 72.4266096ZM103.179864 59.0121645C106.109964 60.3900318 108.806802 62.1840492 111.195208 64.3174962L98.069821 75.4845761 103.179864 59.0121645 103.179864 59.0121645ZM119.095859 74.8467894C119.467062 75.6256177 119.808817 76.42072 120.119573 77.2313213L103.974192 85.7310113 98.303857 85.2737888 102.413435 80.4427286 119.095859 74.8467894 119.095859 74.8467894ZM103.147316 79.5817553L113.863373 66.9856611C115.830205 69.187304 117.50798 71.6508812 118.8378 74.3182711L103.147316 79.5817553 103.147316 79.5817553ZM122.307267 89.0904348C122.307267 89.5251837 122.298742 89.9576078 122.282468 90.3877069L104.740621 91.8019971 99.0625365 88.9765166 104.096634 86.3261756 122.282468 87.7923877C122.298742 88.2232618 122.307267 88.6556859 122.307267 89.0904348L122.307267 89.0904348ZM87.3235408 95.7945575L85.7643343 97.1212779 85.5992693 95.0769506C86.1332122 95.3892569 86.7113275 95.6325923 87.3235408 95.7945575L87.3235408 95.7945575ZM55.8736028 89.0904348C55.8736028 88.6556859 55.8821273 88.2232618 55.8984013 87.7931626L73.4394738 86.3788725 79.1175582 89.2043529 74.0834602 91.853919 55.8976264 90.3877069C55.8821273 89.9576078 55.8736028 89.5251837 55.8736028 89.0904348L55.8736028 89.0904348ZM90.8573288 82.386312L92.4165352 81.0595916 92.5816003 83.103919C92.0476573 82.7916127 91.469542 82.5482773 90.8573288 82.386312L90.8573288 82.386312ZM95.9487733 88.0791205L97.7815383 88.9912407 95.9681471 89.9459834C96.00302 89.6654503 96.0223939 89.3802674 96.0223939 89.0904348 96.0231688 88.7471304 95.9975954 88.4092507 95.9487733 88.0791205L95.9487733 88.0791205ZM96.3168762 87.6102736L97.8381099 85.8224559 103.01015 86.2393808 98.4185501 88.6564608 96.3168762 87.6102736 96.3168762 87.6102736ZM95.7945575 87.3235408C95.6333672 86.7113275 95.3892569 86.1332122 95.0769506 85.5992693L97.1212779 85.7643343 95.7945575 87.3235408 95.7945575 87.3235408ZM91.7345761 89.0904348C91.7345761 90.5504472 90.5504472 91.7345761 89.0904348 91.7345761 87.6304224 91.7345761 86.4462934 90.5504472 86.4462934 89.0904348 86.4462934 87.6304224 87.6304224 86.4462934 89.0904348 86.4462934 90.5504472 86.4462934 91.7345761 87.6304224 91.7345761 89.0904348L91.7345761 89.0904348ZM85.5992693 83.1046939L85.7643343 81.0603666 87.3235408 82.387087C86.7113275 82.5482773 86.1332122 82.7916127 85.5992693 83.1046939L85.5992693 83.1046939ZM82.2320963 90.1017491L80.3993312 89.1896288 82.2127224 88.2348861C82.1778495 88.5154193 82.1584757 88.8006022 82.1584757 89.0904348 82.1577007 89.4337392 82.1832742 89.7716189 82.2320963 90.1017491L82.2320963 90.1017491ZM82.386312 87.3235408L81.0595916 85.7643343 83.103919 85.5992693C82.7916127 86.1332122 82.5482773 86.7113275 82.386312 87.3235408L82.386312 87.3235408ZM81.9515631 87.7125675L79.7553449 88.8687981 74.5678061 86.287428 80.3435346 85.8216809 81.9515631 87.7125675 81.9515631 87.7125675ZM79.7623195 89.5251837L81.8639934 90.5713709 80.3427596 92.3591887 75.17072 91.9422637 79.7623195 89.5251837 79.7623195 89.5251837ZM82.386312 90.8573288C82.5475024 91.469542 82.7916127 92.0476573 83.103919 92.5816003L81.0595916 92.4165352 82.386312 90.8573288 82.386312 90.8573288ZM92.5816003 95.0761756L92.4165352 97.120503 90.8573288 95.7937826C91.469542 95.6325923 92.0476573 95.3892569 92.5816003 95.0761756L92.5816003 95.0761756ZM95.7945575 90.8573288L97.1212779 92.4165352 95.0769506 92.5816003C95.3892569 92.0476573 95.6325923 91.469542 95.7945575 90.8573288L95.7945575 90.8573288ZM96.2293065 90.4683021L98.4255247 89.3120715 103.613063 91.8934416 97.837335 92.3591887 96.2293065 90.4683021 96.2293065 90.4683021ZM105.060677 85.8185811L120.324936 77.7830882C121.402896 80.7511601 122.068581 83.9145203 122.253795 87.2049729L105.060677 85.8185811 105.060677 85.8185811ZM97.587025 85.2164422L95.1125985 85.0172792 95.8480293 82.6459215 101.341675 80.803082 97.587025 85.2164422 97.587025 85.2164422ZM94.5577317 84.8351651C94.1725799 84.3415197 93.7238818 83.9005712 93.2217119 83.5270436L95.1660702 82.8753077 94.5577317 84.8351651 94.5577317 84.8351651ZM93.153516 82.9342042L92.9652023 80.5938446 96.9166902 77.2320963 95.3791825 82.1879239 93.153516 82.9342042 93.153516 82.9342042ZM92.3591887 80.3427596L90.4683021 81.9515631 89.3120715 79.7553449 91.8934416 74.5678061 92.3591887 80.3427596 92.3591887 80.3427596ZM89.9459834 82.2119475C89.6654503 82.1770746 89.3802674 82.1577007 89.0904348 82.1577007 88.7471304 82.1577007 88.4092507 82.1840492 88.0791205 82.2320963L88.9912407 80.3993312 89.9459834 82.2119475 89.9459834 82.2119475ZM87.6102736 81.8639934L85.8224559 80.3427596 86.2393808 75.17072 88.6564608 79.7623195 87.6102736 81.8639934 87.6102736 81.8639934ZM85.2164422 80.5938446L85.0172792 83.0682711 82.6466964 82.3328402 80.803857 76.8391949 85.2164422 80.5938446 85.2164422 80.5938446ZM84.8351651 83.6231378C84.3415197 84.0082897 83.9005712 84.4569878 83.5270436 84.9591577L82.8753077 83.0147993 84.8351651 83.6231378 84.8351651 83.6231378ZM82.9342042 85.0273536L80.5938446 85.2156673 77.2313213 81.2641794 82.187149 82.8016871 82.9342042 85.0273536 82.9342042 85.0273536ZM72.4273846 85.8743777L55.9270746 87.2049729C56.0975644 84.1780045 56.6741298 81.2579797 57.6048489 78.4983703L72.4273846 85.8743777 72.4273846 85.8743777ZM73.119418 92.3622885L57.8551589 100.397781C56.7771986 97.4297094 56.1115135 94.2663492 55.9262996 90.9758967L73.119418 92.3622885 73.119418 92.3622885ZM80.5938446 92.9644273L83.0682711 93.1635904 82.3328402 95.5341732 76.8391949 97.3770126 80.5938446 92.9644273 80.5938446 92.9644273ZM83.6231378 93.3457045C84.0082897 93.8393498 84.4569878 94.2802984 84.9591577 94.653826L83.0147993 95.3055619 83.6231378 93.3457045 83.6231378 93.3457045ZM85.0273536 95.2466654L85.2156673 97.587025 81.2634044 100.949548 82.8009122 95.9937206 85.0273536 95.2466654 85.0273536 95.2466654ZM85.8216809 97.8381099L87.7125675 96.2293065 88.8687981 98.4255247 86.287428 103.613063 85.8216809 97.8381099 85.8216809 97.8381099ZM88.2348861 95.9689221C88.5154193 96.003795 88.8006022 96.0231688 89.0904348 96.0231688 89.4337392 96.0231688 89.7716189 95.9968204 90.1017491 95.9487733L89.1896288 97.7815383 88.2348861 95.9689221 88.2348861 95.9689221ZM90.570596 96.3168762L92.3584137 97.8381099 91.9414887 103.01015 89.5244087 98.4185501 90.570596 96.3168762 90.570596 96.3168762ZM92.9644273 97.587025L93.1635904 95.1125985 95.5341732 95.8480293 97.3770126 101.341675 92.9644273 97.587025 92.9644273 97.587025ZM93.3457045 94.5577317C93.8393498 94.1725799 94.2802984 93.7238818 94.653826 93.2217119L95.3055619 95.1660702 93.3457045 94.5577317 93.3457045 94.5577317ZM95.2466654 93.153516L97.587025 92.9652023 100.948773 96.9166902 95.9929456 95.3791825 95.2466654 93.153516 95.2466654 93.153516ZM105.753485 92.3064918L122.253795 90.9758967C122.083305 94.002865 121.50674 96.9228898 120.576021 99.6824993L105.753485 92.3064918 105.753485 92.3064918ZM113.467372 66.5501372L102.074006 79.9413337 96.0603666 81.9585377 97.7458905 76.5253387 111.629957 64.7127224C112.266969 65.3016871 112.879182 65.9139004 113.467372 66.5501372L113.467372 66.5501372ZM90.3877069 55.8984013L91.8019971 73.4394738 88.9765166 79.1175582 86.3261756 74.0834602 87.7923877 55.8976264C88.2232618 55.8813523 88.6556859 55.8728278 89.0896598 55.8728278 89.5251837 55.8736028 89.9576078 55.8821273 90.3877069 55.8984013L90.3877069 55.8984013ZM66.5501372 64.7134974L79.9413337 76.1068638 81.9585377 82.119728 76.5253387 80.4342042 64.7134974 66.5501372C65.3016871 65.9139004 65.9139004 65.3016871 66.5501372 64.7134974L66.5501372 64.7134974ZM64.7134974 111.630732L76.1068638 98.2395358 82.119728 96.2223319 80.4342042 101.655531 66.5501372 113.467372C65.9139004 112.879182 65.3016871 112.266969 64.7134974 111.630732L64.7134974 111.630732ZM87.7931626 122.282468L86.3788725 104.741396 89.2043529 99.0633114 91.8546939 104.097409 90.3884819 122.283243C89.9583827 122.299517 89.5251837 122.308042 89.0912097 122.308042 88.6556859 122.307267 88.2232618 122.298742 87.7931626 122.282468L87.7931626 122.282468ZM111.630732 113.467372L98.2395358 102.074006 96.2223319 96.0603666 101.655531 97.7458905 113.467372 111.629957C112.879182 112.266969 112.266969 112.879182 111.630732 113.467372L111.630732 113.467372Z" id="wheel" fill="#000000" sketch:type="MSShapeGroup"/>
</g>
</g>
</svg>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" width="178px" height="178px" viewBox="0 0 178 178" version="1.1">
<defs/>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Rainfall" sketch:type="MSLayerGroup">
<circle id="Oval-1" fill="#D8D8D8" sketch:type="MSShapeGroup" cx="89" cy="89" r="89"/>
<g id="noun_2212" transform="translate(42.000000, 78.000000)" fill="#000000" sketch:type="MSShapeGroup">
<path d="M75.416 41.411C74.889 25.11 64.416 9.138 50.527 3.541L50.527 41.435 50.39 41.668 50.001 42.095 49.612 41.668 49.475 41.436 49.475 3.56C35.371 9.665 25.108 25.305 24.586 41.412 27.94 38.225 32.391 36.404 37.018 36.404 41.191 36.404 45.212 37.895 48.422 40.522L48.422 86.703C48.422 88.912 46.624 90.71 44.415 90.71 42.206 90.71 40.408 88.912 40.408 86.703 40.408 85.832 39.703 85.126 38.832 85.126 37.961 85.126 37.256 85.832 37.256 86.703 37.256 90.651 40.468 93.862 44.415 93.862 48.363 93.862 51.574 90.651 51.574 86.703L51.574 40.525C54.786 37.896 58.808 36.404 62.983 36.404 67.611 36.404 72.063 38.226 75.416 41.411L75.416 41.411Z" id="Shape"/>
<path d="M51.006 2.589C51.195 2.594 51.387 2.595 51.576 2.601L51.576 1.714C51.576 0.843 50.87 0.138 50 0.138 49.13 0.138 48.424 0.844 48.424 1.714L48.424 2.602C48.633 2.596 48.844 2.594 49.054 2.588 26.15 3 6.288 18.26 0 40.199 3.164 37.741 7.029 36.404 11.055 36.404 15.704 36.404 20.178 38.243 23.536 41.459 24.04 24.925 34.583 8.852 49.08 2.587 49.387 2.579 49.692 2.567 50 2.567 50.326 2.567 50.649 2.579 50.974 2.588 65.227 8.364 75.96 24.755 76.468 41.458 79.825 38.243 84.298 36.403 88.947 36.403 92.971 36.403 96.836 37.739 100 40.197 93.717 18.279 73.885 3.026 51.006 2.589L51.006 2.589Z" id="Shape"/>
</g>
<path class="drop8" d="M63 25.5555763C64.6568542 25.5555763 66 23.7614237 66 21 66 18.2385763 63 13.0147378 63 13.0147378 63 13.0147378 60 18.2385763 60 21 60 23.7614237 61.3431458 25.5555763 63 25.5555763Z" id="raindrop8" fill="#D8D8D8" sketch:type="MSShapeGroup"/>
<path class="drop7" d="M132 38.0964148C133.656854 38.0964148 135 36.3022622 135 33.5408385 135 30.7794147 132 25.5555763 132 25.5555763 132 25.5555763 129 30.7794147 129 33.5408385 129 36.3022622 130.343146 38.0964148 132 38.0964148Z" id="raindrop7" fill="#D8D8D8" sketch:type="MSShapeGroup"/>
<path class="drop6" d="M156 50.6372533C157.656854 50.6372533 159 48.8431007 159 46.081677 159 43.3202532 156 38.0964148 156 38.0964148 156 38.0964148 153 43.3202532 153 46.081677 153 48.8431007 154.343146 50.6372533 156 50.6372533Z" id="raindrop6" fill="#D8D8D8" sketch:type="MSShapeGroup"/>
<path class="drop5" d="M111 25.5555763C112.656854 25.5555763 114 23.7614237 114 21 114 18.2385763 111 13.0147378 111 13.0147378 111 13.0147378 108 18.2385763 108 21 108 23.7614237 109.343146 25.5555763 111 25.5555763Z" id="raindrop5" fill="#D8D8D8" sketch:type="MSShapeGroup"/>
<path class="drop4" d="M96 17.2851571C97.6568542 17.2851571 99 15.4910045 99 12.7295808 99 9.96815701 96 4.7443186 96 4.7443186 96 4.7443186 93 9.96815701 93 12.7295808 93 15.4910045 94.3431458 17.2851571 96 17.2851571Z" id="raindrop4" fill="#D8D8D8" sketch:type="MSShapeGroup"/>
<path class="drop3" d="M79 17.2851571C80.6568542 17.2851571 82 15.4910045 82 12.7295808 82 9.96815701 79 4.7443186 79 4.7443186 79 4.7443186 76 9.96815701 76 12.7295808 76 15.4910045 77.3431458 17.2851571 79 17.2851571Z" id="raindrop3" fill="#D8D8D8" sketch:type="MSShapeGroup"/>
<path class="drop2" d="M45 38.0964148C46.6568542 38.0964148 48 36.3022622 48 33.5408385 48 30.7794147 45 25.5555763 45 25.5555763 45 25.5555763 42 30.7794147 42 33.5408385 42 36.3022622 43.3431458 38.0964148 45 38.0964148Z" id="raindrop2" fill="#D8D8D8" sketch:type="MSShapeGroup"/>
<path class="drop1" d="M22 50.6372533C23.6568542 50.6372533 25 48.8431007 25 46.081677 25 43.3202532 22 38.0964148 22 38.0964148 22 38.0964148 19 43.3202532 19 46.081677 19 48.8431007 20.3431458 50.6372533 22 50.6372533Z" id="raindrop1" fill="#D8D8D8" sketch:type="MSShapeGroup"/>
</g>
</g>
</svg>
*{
padding:0;
margin:0;
}
/*Eco Light icon animation*/
.icon{
display:block;
/* background:red;*/
margin:0 auto;
margin-top:100px;
}
.icon .glow {
-webkit-transition:fill 1s ease-in;
transition:fill 1s ease-in;
}
.icon:hover .glow{
fill:rgba(121, 175, 58, 0.8);
}
/*Table lamp animation*/
.icon .tableGlow {
-webkit-transition:fill 1s ease-in;
transition:fill 1s ease-in;
}
.icon:hover .tableGlow{
fill:rgba(247, 237, 109, 0.8);
}
/*Cloud animation*/
.icon .lightning {
-webkit-transition:fill 1s ease-in;
transition:fill 1s ease-in;
}
.icon:hover .lightning{
fill:rgb(247, 237, 109);
}
.icon .rain1 {
fill:#D8D8D8;
-webkit-transition: 1s ease-in;
transition: 1s ease-in;
}
.icon:hover .rain1{
-webkit-transform:translate(0, 30px);
transform:translate(0, 30px);
fill:#666;
}
.icon .rain2 {
fill:#D8D8D8;
-webkit-transition:all 0.7s ease-in;
transition:all 0.7s ease-in;
}
.icon:hover .rain2{
-webkit-transform:translate(0, 40px);
transform:translate(0, 40px);
fill:#555;
}
.icon .rain3 {
fill:#D8D8D8;
-webkit-transition:all 0.5s ease-in;
transition:all 0.5s ease-in;
}
.icon:hover .rain3{
-webkit-transform:translate(0, 50px);
transform:translate(0, 50px);
fill:#666;
}
/*wheel animation*/
.icon .wheel{
-webkit-transition:all 1s ease-in;
transition:all 1s ease-in;
-webkit-transform-origin:50% 50%;
}
.icon:hover .wheel{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
/*Bike animation*/
.icon .wheel1{
-webkit-transition:all 3s ease-in;
transition:all 3s ease-in;
-webkit-transform-origin:50% 50%;
}
.icon:hover .wheel1{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
.icon .wheel2{
-webkit-transition:all 3s ease-in;
transition:all 3s ease-in;
-webkit-transform-origin:50% 50%;
}
.icon:hover .wheel2{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
.icon .grass{
-webkit-transition:stroke 2s ease-in;
transition:stroke 2s ease-in;
}
.icon:hover .grass{
stroke:green;
}
/*Rainfall animation*/
.icon .drop1 {
fill:#D8D8D8;
-webkit-transition: 0.7s ease-in;
transition: 0.7s ease-in;
}
.icon:hover .drop1{
-webkit-transform:translate(0, 80px);
transform:translate(0, 80px);
fill:#666;
}
.icon .drop2 {
fill:#D8D8D8;
-webkit-transition: 1s ease-in;
transition: 1s ease-in;
}
.icon:hover .drop2{
-webkit-transform:translate(0, 60px);
transform:translate(0, 60px);
fill:#666;
}
.icon .drop3 {
fill:#D8D8D8;
-webkit-transition: 0.5s ease-in;
transition: 0.5s ease-in;
}
.icon:hover .drop3{
-webkit-transform:translate(0, 50px);
transform:translate(0, 50px);
fill:#666;
}
.icon .drop4 {
fill:#D8D8D8;
-webkit-transition: 1s ease-in;
transition: 1s ease-in;
}
.icon:hover .drop4{
-webkit-transform:translate(0, 50px);
transform:translate(0, 50px);
fill:#666;
}
.icon .drop5 {
fill:#D8D8D8;
-webkit-transition: 0.6s ease-in;
transition: 0.6s ease-in;
}
.icon:hover .drop5{
-webkit-transform:translate(0, 50px);
transform:translate(0, 50px);
fill:#666;
}
.icon .drop6 {
fill:#D8D8D8;
-webkit-transition: 0.5s ease-in;
transition: 0.5s ease-in;
}
.icon:hover .drop6{
-webkit-transform:translate(0, 60px);
transform:translate(0, 60px);
fill:#666;
}
.icon .drop7 {
fill:#D8D8D8;
-webkit-transition: 1s ease-in;
transition: 1s ease-in;
}
.icon:hover .drop7{
-webkit-transform:translate(0, 50px);
transform:translate(0, 50px);
fill:#666;
}
.icon .drop8 {
fill:#D8D8D8;
-webkit-transition: 1s ease-in;
transition: 1s ease-in;
}
.icon:hover .drop8{
-webkit-transform:translate(0, 30px);
transform:translate(0, 30px);
fill:#666;
}
