Process Animation

HTML
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1710 462" style="enable-background:new 0 0 1710 462;" xml:space="preserve"> <style type="text/css"> .st0{enable-background:new ;} .st1{fill:#8DC63F;} .st2{fill:#768B96;} .st3{fill:#748A96;} .st4{fill:none;stroke:#8DC63F;stroke-width:4;stroke-miterlimit:10;} </style> <g id="Drive"> <g class="st0"> <path class="st1" d="M1442.3,342.8h17.3c3.2,0,6.5,0.5,9.7,1.6c3.3,1.1,6.2,2.7,8.8,4.9c2.6,2.2,4.7,4.9,6.4,8.2 c1.6,3.3,2.4,7,2.4,11.4c0,4.4-0.8,8.2-2.4,11.4c-1.6,3.2-3.7,5.9-6.4,8.1c-2.6,2.2-5.6,3.8-8.8,4.9c-3.3,1.1-6.5,1.6-9.7,1.6 h-17.3V342.8z M1447.6,390h10.3c4,0,7.4-0.6,10.3-1.8c2.9-1.2,5.3-2.8,7.3-4.8c1.9-2,3.4-4.2,4.3-6.8c0.9-2.5,1.4-5.1,1.4-7.8 c0-2.7-0.5-5.3-1.4-7.8c-0.9-2.5-2.4-4.8-4.3-6.8c-1.9-2-4.4-3.6-7.3-4.8c-2.9-1.2-6.4-1.8-10.3-1.8h-10.3V390z"/> <path class="st1" d="M1502.8,394.8h-5.3v-52h16c5.3,0,9.5,1.2,12.5,3.5c3.1,2.3,4.6,5.8,4.6,10.4c0,3.6-1.1,6.7-3.4,9.2 c-2.3,2.5-5.6,3.9-9.9,4.3l15,24.7h-6.5l-14.3-24.2h-8.8V394.8z M1502.8,365.8h9.4c2.4,0,4.3-0.2,6-0.7c1.6-0.5,3-1.1,3.9-1.9 c1-0.8,1.7-1.8,2.1-2.9c0.4-1.1,0.7-2.3,0.7-3.6c0-1.2-0.2-2.4-0.7-3.5c-0.4-1.1-1.2-2.1-2.1-2.9c-1-0.8-2.3-1.5-3.9-1.9 c-1.6-0.5-3.6-0.7-6-0.7h-9.4V365.8z"/> <path class="st1" d="M1546.4,394.8h-5.3v-52h5.3V394.8z"/> <path class="st1" d="M1575.7,386.9h0.1l17.1-44.1h5.7l-20.3,52h-5.3l-19.8-52h5.9L1575.7,386.9z"/> <path class="st1" d="M1610.8,390h27.9v4.9h-33.2v-52h32.3v4.9h-27v17.7h25.2v4.9h-25.2V390z"/> </g> <g id="drive-line"> <path class="st1" d="M1368.1,261h124.6v5.2h-124.6V261z"/> <path class="st1" d="M1309,298.4h64.4v5.2H1309V298.4z"/> <path class="st1" d="M1500.1,263.6l-24,12v-23.9L1500.1,263.6z"/> <path class="st1" d="M1368.1,261h5.2v42.6h-5.2V261z"/> </g> <g id="signal"> <path class="st2" d="M1585.4,301h-78.7V108.2h78.7V301z M1511.3,296.4h69.6V112.7h-69.6V296.4z"/> <path class="st2" d="M1546.1,125.9c10.4,0,18.9,8.4,18.9,18.9c0,10.4-8.4,18.9-18.9,18.9c-10.4,0-18.9-8.4-18.9-18.9c0,0,0,0,0,0 C1527.3,134.4,1535.7,125.9,1546.1,125.9 M1546.1,121.4c-12.9,0-23.4,10.5-23.4,23.4c0,12.9,10.5,23.4,23.4,23.4 c12.9,0,23.4-10.5,23.4-23.4l0,0C1569.5,131.9,1559,121.4,1546.1,121.4z"/> <path class="st2" d="M1546.1,185.8c10.4,0,18.9,8.4,18.9,18.9s-8.4,18.9-18.9,18.9s-18.9-8.4-18.9-18.9l0,0 C1527.2,194.2,1535.7,185.8,1546.1,185.8 M1546.1,181.2c-12.9,0-23.4,10.5-23.4,23.4s10.5,23.4,23.4,23.4 c12.9,0,23.4-10.5,23.4-23.4l0,0C1569.5,191.7,1559,181.2,1546.1,181.2z"/> <path class="st2" d="M1546.1,242.1c10.4,0,18.9,8.4,18.9,18.9c0,10.4-8.4,18.9-18.9,18.9s-18.9-8.4-18.9-18.9l0,0 C1527.2,250.6,1535.7,242.1,1546.1,242.1 M1546.1,237.6c-12.9,0-23.4,10.5-23.4,23.4c0,12.9,10.5,23.4,23.4,23.4 c12.9,0,23.4-10.5,23.4-23.4l0,0C1569.5,248.1,1559,237.6,1546.1,237.6z"/> </g> <circle id="green-light" class="st1" cx="1546.1" cy="260.6" r="23.4"/> </g> <g id="Develop"> <rect id="develop-graph-1" x="998" y="256.1" class="st2" width="44.7" height="44.4"/> <rect id="develop-graph-2" x="1067" y="158.3" class="st2" width="44.7" height="142.2"/> <rect id="develop-graph-3" x="1135" y="187.5" class="st2" width="44.7" height="113.1"/> <rect id="develop-graph-4" x="1200.6" y="81.1" class="st1" width="44.7" height="219.4"/> <g class="st0"> <path class="st3" d="M968.6,342.8h17.3c3.2,0,6.5,0.5,9.7,1.6c3.3,1.1,6.2,2.7,8.8,4.9c2.6,2.2,4.7,4.9,6.4,8.2 c1.6,3.3,2.4,7,2.4,11.4c0,4.4-0.8,8.2-2.4,11.4c-1.6,3.2-3.7,5.9-6.4,8.1c-2.6,2.2-5.6,3.8-8.8,4.9c-3.3,1.1-6.5,1.6-9.7,1.6 h-17.3V342.8z M973.9,390h10.3c4,0,7.4-0.6,10.3-1.8c2.9-1.2,5.3-2.8,7.3-4.8c1.9-2,3.4-4.2,4.3-6.8c0.9-2.5,1.4-5.1,1.4-7.8 c0-2.7-0.5-5.3-1.4-7.8c-0.9-2.5-2.4-4.8-4.3-6.8c-1.9-2-4.4-3.6-7.3-4.8c-2.9-1.2-6.4-1.8-10.3-1.8h-10.3V390z"/> <path class="st3" d="M1029.1,390h27.9v4.9h-33.2v-52h32.3v4.9h-27v17.7h25.2v4.9h-25.2V390z"/> <path class="st3" d="M1082.6,386.9h0.1l17.1-44.1h5.7l-20.3,52h-5.3l-19.8-52h5.9L1082.6,386.9z"/> <path class="st3" d="M1117.6,390h27.9v4.9h-33.2v-52h32.3v4.9h-27v17.7h25.2v4.9h-25.2V390z"/> <path class="st3" d="M1161.2,390h24.3v4.9h-29.6v-52h5.3V390z"/> <path class="st3" d="M1243.4,368.8c0,4-0.7,7.6-2.1,11c-1.4,3.3-3.3,6.2-5.7,8.6c-2.4,2.4-5.3,4.3-8.6,5.7 c-3.3,1.4-6.9,2.1-10.8,2.1c-3.9,0-7.5-0.7-10.8-2.1c-3.3-1.4-6.2-3.3-8.6-5.7c-2.4-2.4-4.3-5.3-5.7-8.6c-1.4-3.3-2.1-7-2.1-11 s0.7-7.6,2.1-11c1.4-3.3,3.3-6.2,5.7-8.6c2.4-2.4,5.3-4.3,8.6-5.7s6.9-2.1,10.8-2.1c3.9,0,7.5,0.7,10.8,2.1 c3.3,1.4,6.2,3.3,8.6,5.7c2.4,2.4,4.3,5.3,5.7,8.6C1242.7,361.2,1243.4,364.8,1243.4,368.8z M1237.7,368.8c0-3-0.5-5.8-1.5-8.6 c-1-2.7-2.4-5.1-4.2-7.2c-1.8-2.1-4.1-3.7-6.7-4.9c-2.6-1.2-5.6-1.8-9-1.8c-3.3,0-6.3,0.6-9,1.8c-2.6,1.2-4.9,2.9-6.7,4.9 c-1.8,2.1-3.2,4.4-4.2,7.2c-1,2.7-1.5,5.6-1.5,8.6c0,3,0.5,5.8,1.5,8.6c1,2.7,2.4,5.1,4.2,7.2c1.8,2.1,4.1,3.7,6.7,4.9 c2.6,1.2,5.6,1.8,9,1.8c3.3,0,6.3-0.6,9-1.8c2.6-1.2,4.9-2.9,6.7-4.9c1.8-2.1,3.2-4.4,4.2-7.2 C1237.2,374.7,1237.7,371.8,1237.7,368.8z"/> <path class="st3" d="M1254,342.8h15.1c5.3,0,9.5,1.2,12.5,3.5c3.1,2.3,4.6,5.8,4.6,10.4c0,4.7-1.5,8.1-4.6,10.5 c-3.1,2.3-7.2,3.5-12.5,3.5h-9.9v24.2h-5.3V342.8z M1259.3,365.8h8.5c2.4,0,4.3-0.2,6-0.7c1.6-0.5,3-1.1,3.9-1.9s1.7-1.8,2.1-2.9 c0.4-1.1,0.7-2.3,0.7-3.6c0-1.2-0.2-2.4-0.7-3.5c-0.4-1.1-1.2-2.1-2.1-2.9c-1-0.8-2.3-1.5-3.9-1.9c-1.6-0.5-3.6-0.7-6-0.7h-8.5 V365.8z"/> </g> <g id="develop-line"> <path class="st1" d="M905.1,298.4h375.8v5.2H905.1V298.4z"/> <path class="st1" d="M1294.5,301l-24,12V289L1294.5,301z"/> </g> </g> <g id="Design"> <g id="pencil"> <g id="Layer_1-2_1_"> <path class="st2" d="M726.3,121.7h-45.8v128.1l0,0v1.4c0,0.3,0,0.6,0,0.8l16,37.2l0,0l4.6,10.4c0.5,1.1,1.7,1.5,2.7,1.1 c0.5-0.2,0.8-0.6,1.1-1.1l4.6-10.5l0,0l16.3-37.1c0.1-0.3,0.1-0.6,0-0.8v-1.4l0,0L726.3,121.7z M708.3,282.7 c-1.2-2.8-3-4.6-5-4.6s-3.8,1.8-5,4.6l-13.2-30.5l8-8v0.3l10.4,12l10.4-12v-0.4l0,0l8,8L708.3,282.7z"/> <path class="st2" d="M726.3,116.7V97.5c0-8.1-6.5-14.6-14.6-14.6c0,0,0,0,0,0H695c-8,0-14.5,6.5-14.5,14.5c0,0,0,0,0,0v19.3 H726.3z"/> </g> </g> <g class="st0"> <path class="st3" d="M567.2,341.8h17.3c3.2,0,6.5,0.5,9.7,1.6c3.3,1.1,6.2,2.7,8.8,4.9c2.6,2.2,4.7,4.9,6.4,8.2 c1.6,3.3,2.4,7,2.4,11.4c0,4.4-0.8,8.2-2.4,11.4c-1.6,3.2-3.7,5.9-6.4,8.1c-2.6,2.2-5.6,3.8-8.8,4.9c-3.3,1.1-6.5,1.6-9.7,1.6 h-17.3V341.8z M572.5,389h10.3c4,0,7.4-0.6,10.3-1.8c2.9-1.2,5.3-2.8,7.3-4.8c1.9-2,3.4-4.2,4.3-6.8c0.9-2.5,1.4-5.1,1.4-7.8 c0-2.7-0.5-5.3-1.4-7.8c-0.9-2.5-2.4-4.8-4.3-6.8c-1.9-2-4.4-3.6-7.3-4.8c-2.9-1.2-6.4-1.8-10.3-1.8h-10.3V389z"/> <path class="st3" d="M627.7,389h27.9v4.9h-33.2v-52h32.3v4.9h-27v17.7H653v4.9h-25.2V389z"/> <path class="st3" d="M690.7,350.4c-2.3-3.4-5.7-5.1-10.1-5.1c-1.4,0-2.7,0.2-4,0.6c-1.3,0.4-2.5,0.9-3.6,1.7 c-1.1,0.8-1.9,1.7-2.5,2.9c-0.6,1.2-1,2.6-1,4.2c0,2.4,0.7,4.2,2,5.5c1.3,1.3,3,2.4,4.9,3.2c2,0.8,4.1,1.6,6.4,2.2 c2.3,0.7,4.5,1.5,6.4,2.6c2,1.1,3.6,2.6,4.9,4.4c1.3,1.8,2,4.3,2,7.4c0,2.4-0.5,4.5-1.5,6.4c-1,1.9-2.3,3.5-4,4.7 c-1.6,1.3-3.5,2.3-5.5,2.9c-2,0.7-4.1,1-6.1,1c-3.2,0-6.2-0.6-9.1-1.8c-2.9-1.2-5.3-3.2-7.3-5.9l4.9-3.5c1.1,1.9,2.7,3.4,4.7,4.6 c2,1.2,4.4,1.7,7.1,1.7c1.3,0,2.6-0.2,4-0.6c1.3-0.4,2.5-1,3.6-1.8s1.9-1.8,2.6-3c0.7-1.2,1-2.5,1-4c0-1.8-0.4-3.3-1.1-4.5 c-0.8-1.2-1.8-2.2-3-3c-1.2-0.8-2.7-1.5-4.3-2c-1.6-0.5-3.2-1.1-4.9-1.6c-1.7-0.5-3.3-1.2-4.9-1.8c-1.6-0.7-3-1.6-4.3-2.6 s-2.3-2.4-3-4c-0.8-1.6-1.1-3.6-1.1-6c0-2.5,0.5-4.7,1.4-6.5c1-1.9,2.2-3.4,3.8-4.6c1.6-1.2,3.4-2.1,5.4-2.7 c2-0.6,4.1-0.9,6.2-0.9c2.9,0,5.6,0.5,8,1.4c2.4,0.9,4.6,2.6,6.7,4.9L690.7,350.4z"/> <path class="st3" d="M712.2,393.8h-5.3v-52h5.3V393.8z"/> <path class="st3" d="M764.8,351.3c-1.8-1.9-3.9-3.3-6.3-4.4c-2.5-1.1-5.3-1.6-8.5-1.6c-3.3,0-6.3,0.6-9,1.8 c-2.6,1.2-4.9,2.9-6.7,4.9c-1.8,2.1-3.2,4.4-4.2,7.2c-1,2.7-1.5,5.6-1.5,8.6c0,3,0.5,5.8,1.5,8.6c1,2.7,2.4,5.1,4.2,7.2 c1.8,2.1,4.1,3.7,6.7,4.9c2.6,1.2,5.6,1.8,9,1.8c2.7,0,5.3-0.3,7.8-1c2.5-0.7,4.7-1.6,6.7-2.7v-17.4h-12.4v-4.9h17.7v25.5 c-2.9,1.7-6.2,3-9.7,3.9c-3.5,0.9-6.8,1.4-10,1.4c-3.9,0-7.5-0.7-10.8-2.1c-3.3-1.4-6.2-3.3-8.6-5.7c-2.4-2.4-4.3-5.3-5.7-8.6 c-1.4-3.3-2.1-7-2.1-11s0.7-7.6,2.1-11c1.4-3.3,3.3-6.2,5.7-8.6c2.4-2.4,5.3-4.3,8.6-5.7s6.9-2.1,10.8-2.1c4.2,0,7.8,0.6,10.8,1.7 c3,1.2,5.7,2.9,8,5.3L764.8,351.3z"/> <path class="st3" d="M821.2,385.9h0.1v-44.1h5.3v52H820l-31-44.5h-0.1v44.5h-5.3v-52h6.6L821.2,385.9z"/> </g> <g id="design-line"> <path class="st1" d="M445.2,164.4h113.2v5.2H445.2V164.4z"/> <path class="st1" d="M553.2,298.4h317.7v5.2H553.2V298.4z"/> <path class="st1" d="M892.7,301l-24,12V289L892.7,301z"/> <path class="st1" d="M553.2,164.4h5.2v139.1h-5.2V164.4z"/> </g> </g> <g id="Discover"> <g class="st0"> <path class="st3" d="M92.3,340.7h17.3c3.2,0,6.5,0.5,9.7,1.6c3.3,1.1,6.2,2.7,8.8,4.9c2.6,2.2,4.7,4.9,6.4,8.2 c1.6,3.3,2.4,7,2.4,11.4c0,4.4-0.8,8.2-2.4,11.4c-1.6,3.2-3.7,5.9-6.4,8.1c-2.6,2.2-5.6,3.8-8.8,4.9c-3.3,1.1-6.5,1.6-9.7,1.6 H92.3V340.7z M97.6,387.9h10.3c4,0,7.4-0.6,10.3-1.8c2.9-1.2,5.3-2.8,7.3-4.8c1.9-2,3.4-4.2,4.3-6.8c0.9-2.5,1.4-5.1,1.4-7.8 c0-2.7-0.5-5.3-1.4-7.8c-0.9-2.5-2.4-4.8-4.3-6.8c-1.9-2-4.4-3.6-7.3-4.8c-2.9-1.2-6.4-1.8-10.3-1.8H97.6V387.9z"/> <path class="st3" d="M152.8,392.8h-5.3v-52h5.3V392.8z"/> <path class="st3" d="M191.6,349.3c-2.3-3.4-5.7-5.1-10.1-5.1c-1.4,0-2.7,0.2-4,0.6c-1.3,0.4-2.5,0.9-3.6,1.7 c-1.1,0.8-1.9,1.7-2.5,2.9c-0.6,1.2-1,2.6-1,4.2c0,2.4,0.7,4.2,2,5.5c1.3,1.3,3,2.4,4.9,3.2c2,0.8,4.1,1.6,6.4,2.2 c2.3,0.7,4.5,1.5,6.4,2.6c2,1.1,3.6,2.6,4.9,4.4c1.3,1.8,2,4.3,2,7.4c0,2.4-0.5,4.5-1.5,6.4c-1,1.9-2.3,3.5-4,4.7 c-1.6,1.3-3.5,2.3-5.5,2.9c-2,0.7-4.1,1-6.1,1c-3.2,0-6.2-0.6-9.1-1.8c-2.9-1.2-5.3-3.2-7.3-5.9l4.9-3.5c1.1,1.9,2.7,3.4,4.7,4.6 c2,1.2,4.4,1.7,7.1,1.7c1.3,0,2.6-0.2,4-0.6c1.3-0.4,2.5-1,3.6-1.8s1.9-1.8,2.6-3c0.7-1.2,1-2.5,1-4c0-1.8-0.4-3.3-1.1-4.5 c-0.8-1.2-1.8-2.2-3-3c-1.2-0.8-2.7-1.5-4.3-2c-1.6-0.5-3.2-1.1-4.9-1.6c-1.7-0.5-3.3-1.2-4.9-1.8c-1.6-0.7-3-1.6-4.3-2.6 s-2.3-2.4-3-4c-0.8-1.6-1.1-3.6-1.1-6c0-2.5,0.5-4.7,1.4-6.5c1-1.9,2.2-3.4,3.8-4.6c1.6-1.2,3.4-2.1,5.4-2.7 c2-0.6,4.1-0.9,6.2-0.9c2.9,0,5.6,0.5,8,1.4c2.4,0.9,4.6,2.6,6.7,4.9L191.6,349.3z"/> <path class="st3" d="M250.7,384.5c-0.9,1.3-2,2.6-3.3,3.7c-1.3,1.2-2.8,2.2-4.4,3.1c-1.7,0.9-3.5,1.5-5.4,2 c-1.9,0.5-4,0.7-6.1,0.7c-3.9,0-7.5-0.7-10.8-2.1c-3.3-1.4-6.2-3.3-8.6-5.7c-2.4-2.4-4.3-5.3-5.7-8.6c-1.4-3.3-2.1-7-2.1-11 s0.7-7.6,2.1-11c1.4-3.3,3.3-6.2,5.7-8.6c2.4-2.4,5.3-4.3,8.6-5.7s6.9-2.1,10.8-2.1c3.2,0,6.5,0.6,9.7,1.9c3.2,1.3,6,3.4,8.3,6.3 l-4.6,3.5c-0.5-0.8-1.3-1.7-2.2-2.5c-0.9-0.8-2-1.6-3.2-2.2c-1.2-0.6-2.5-1.2-3.9-1.5c-1.4-0.4-2.7-0.6-4.1-0.6 c-3.3,0-6.3,0.6-9,1.8c-2.6,1.2-4.9,2.9-6.7,4.9c-1.8,2.1-3.2,4.4-4.2,7.2c-1,2.7-1.5,5.6-1.5,8.6c0,3,0.5,5.8,1.5,8.6 c1,2.7,2.4,5.1,4.2,7.2c1.8,2.1,4.1,3.7,6.7,4.9c2.6,1.2,5.6,1.8,9,1.8c1.4,0,2.7-0.1,4.1-0.4c1.3-0.2,2.7-0.7,4-1.2 c1.3-0.6,2.5-1.4,3.7-2.4c1.2-1,2.2-2.3,3.2-3.8L250.7,384.5z"/> <path class="st3" d="M310.3,366.7c0,4-0.7,7.6-2.1,11c-1.4,3.3-3.3,6.2-5.7,8.6c-2.4,2.4-5.3,4.3-8.6,5.7 c-3.3,1.4-6.9,2.1-10.8,2.1c-3.9,0-7.5-0.7-10.8-2.1c-3.3-1.4-6.2-3.3-8.6-5.7c-2.4-2.4-4.3-5.3-5.7-8.6c-1.4-3.3-2.1-7-2.1-11 s0.7-7.6,2.1-11c1.4-3.3,3.3-6.2,5.7-8.6c2.4-2.4,5.3-4.3,8.6-5.7s6.9-2.1,10.8-2.1c3.9,0,7.5,0.7,10.8,2.1s6.2,3.3,8.6,5.7 c2.4,2.4,4.3,5.3,5.7,8.6C309.6,359.1,310.3,362.8,310.3,366.7z M304.5,366.7c0-3-0.5-5.8-1.5-8.6c-1-2.7-2.4-5.1-4.2-7.2 c-1.8-2.1-4.1-3.7-6.7-4.9c-2.6-1.2-5.6-1.8-9-1.8c-3.3,0-6.3,0.6-9,1.8c-2.6,1.2-4.9,2.9-6.7,4.9c-1.8,2.1-3.2,4.4-4.2,7.2 c-1,2.7-1.5,5.6-1.5,8.6c0,3,0.5,5.8,1.5,8.6c1,2.7,2.4,5.1,4.2,7.2c1.8,2.1,4.1,3.7,6.7,4.9c2.6,1.2,5.6,1.8,9,1.8 c3.3,0,6.3-0.6,9-1.8c2.6-1.2,4.9-2.9,6.7-4.9c1.8-2.1,3.2-4.4,4.2-7.2C304.1,372.6,304.5,369.7,304.5,366.7z"/> <path class="st3" d="M336,384.8h0.1l17.1-44.1h5.7l-20.3,52h-5.3l-19.8-52h5.9L336,384.8z"/> <path class="st3" d="M371.1,387.9h27.9v4.9h-33.2v-52h32.3v4.9h-27v17.7h25.2v4.9h-25.2V387.9z"/> <path class="st3" d="M414.7,392.8h-5.3v-52h16c5.3,0,9.5,1.2,12.5,3.5c3.1,2.3,4.6,5.8,4.6,10.4c0,3.6-1.1,6.7-3.4,9.2 c-2.3,2.5-5.6,3.9-9.9,4.3l15,24.7h-6.5l-14.3-24.2h-8.8V392.8z M414.7,363.7h9.4c2.4,0,4.3-0.2,6-0.7c1.6-0.5,3-1.1,3.9-1.9 c1-0.8,1.7-1.8,2.1-2.9c0.4-1.1,0.7-2.3,0.7-3.6c0-1.2-0.2-2.4-0.7-3.5c-0.4-1.1-1.2-2.1-2.1-2.9c-1-0.8-2.3-1.5-3.9-1.9 c-1.6-0.5-3.6-0.7-6-0.7h-9.4V363.7z"/> </g> <g id="bulb"> <path class="st2" d="M253.2,262.7h42.6c2,0,3.7,1.6,3.7,3.7l0,0c0,2-1.6,3.7-3.7,3.7h-42.6c-2,0-3.7-1.6-3.7-3.7l0,0 C249.5,264.4,251.2,262.7,253.2,262.7z"/> <path class="st2" d="M253.2,272.8h42.6c2,0,3.7,1.6,3.7,3.7l0,0c0,2-1.6,3.7-3.7,3.7h-42.6c-2,0-3.7-1.6-3.7-3.7l0,0 C249.5,274.4,251.2,272.8,253.2,272.8z"/> <path class="st2" d="M253.2,282.9h42.6c2,0,3.7,1.6,3.7,3.7l0,0c0,2-1.6,3.7-3.7,3.7h-42.6c-2,0-3.7-1.6-3.7-3.7l0,0 C249.5,284.5,251.2,282.9,253.2,282.9z"/> <path class="st2" d="M260.7,292.9c3.8,7.7,13.1,10.8,20.8,7c3-1.5,5.5-3.9,7-7H260.7z"/> <path class="st2" d="M285.7,184L285.7,184c-3.6,0.1-7.1-0.7-10.3-2.3c-0.6-0.4-1.2-0.8-1.7-1.3c-2.7,1.3-5.7,2.2-8.7,2.6h-0.9 c1.7,14.7,2.2,63.8,2.4,76.9h15.7C283.1,247,284.8,196.5,285.7,184z"/> <path class="st2" d="M278.9,167.5c0.3-1.6-0.3-3.3-1.7-4.2c-0.5-0.4-1-0.6-1.6-0.6c-0.7,0-1.3,0.3-1.9,0.7 c-1.1,0.8-1.7,2.2-1.5,3.5c0.2,2.6,1.1,5.1,2.5,7.3C276.8,172.3,278.2,170,278.9,167.5z"/> <path class="st2" d="M254,166.8h-0.7c-1.9,1-2.9,3.1-2.4,5.2c1.1,3.7,4.4,6.2,8.2,6.3c-0.3-3.2-1-6.4-2.2-9.4 C256.4,168.1,255.3,166.8,254,166.8z"/> <path class="st2" d="M298.2,169c0-0.8-0.5-1.6-1.2-1.9c-0.5-0.3-1.1-0.5-1.8-0.6c-0.3-0.1-0.6-0.1-0.8,0c-2.3,2.3-3.6,5.5-3.5,8.8 v3.3c0.9-0.3,1.7-0.7,2.4-1.2C295.9,175.2,297.6,172.3,298.2,169z"/> <path class="st2" d="M274.5,104.1c-33,0.2-59.6,27-59.5,60c0.1,19.2,9.4,37.3,25.1,48.4c0.6,0.4,0.9,1,1,1.7l4,33.6 c0,0.1,0,0.2,0,0.3c-0.7,6,3.6,11.4,9.6,12.1h7.3c-0.4-16.4-1-64.9-2.4-76.9c-6.3,0-11.7-4.3-13.3-10.3c-0.9-4.2,1.2-8.5,5.2-10.3 c3.7-1.2,7.6,0.6,9.2,4.2c1.5,3.8,2.5,7.8,2.8,11.9h0.8c2.2-0.3,4.4-0.9,6.5-1.9c-1.9-2.9-3-6.2-3.3-9.7c-0.2-2.9,1.1-5.7,3.5-7.4 c2.6-2,6.2-2,8.8,0c2.9,2.1,4.3,5.8,3.3,9.3c-0.9,3.4-2.8,6.4-5.3,8.8l0,0c2.5,1.2,5.3,1.8,8.1,1.7l0.3-4.3 c-0.1-4.9,2.1-9.5,5.9-12.5c2.3-1.2,5-1,7.1,0.4c2.1,1.1,3.5,3.3,3.6,5.7c-0.5,5-3.1,9.5-7.1,12.5c-1.6,1.1-3.5,1.9-5.4,2.3 c-0.8,12.1-2.6,63.5-3.2,76.6h7.2c5.9-0.7,10.1-5.9,9.6-11.8c0-0.1,0-0.2,0-0.3l4-33.6c0.1-0.7,0.5-1.3,1-1.7 c26.9-19.1,33.2-56.4,14.1-83.3c-11.1-15.7-29.2-25-48.4-25.1L274.5,104.1z"/> </g> <g id="shine"> <path class="st1" d="M438,167l-24,12v-23.9L438,167z"/> <line class="st4" x1="130.9" y1="166.6" x2="192.8" y2="166.6"/> <line class="st4" x1="356.3" y1="166.6" x2="418.3" y2="166.6"/> <line class="st4" x1="172.9" y1="65" x2="216.8" y2="108.8"/> <line class="st4" x1="332.4" y1="224.4" x2="376.1" y2="268.2"/> <line class="st4" x1="274.5" y1="22.9" x2="274.5" y2="84.9"/> <line class="st4" x1="376.1" y1="65" x2="332.4" y2="108.8"/> <line class="st4" x1="216.8" y1="224.4" x2="172.9" y2="268.2"/> </g> </g> </svg>
CSS
#Discover { opacity: 0; animation: fadein .25s ease-in-out 0s forwards; } #shine { opacity: 0; animation: fadein .25s ease-in-out 1s forwards; } #Design { opacity: 0; animation: fadein .25s ease-in-out 2s forwards; } #pencil { transform: translate(-50px); animation: pencil 2s ease-in-out 2s forwards; } #Develop { opacity: 0; animation: fadein .25s ease-in-out 4s forwards; } #develop-graph-1, #develop-graph-2, #develop-graph-3, #develop-graph-4{ transform: scaleY(.5); transform: scalex(1); transform-origin: bottom; animation: chart 1s ease-in-out 4s forwards; } #Drive { opacity: 0; animation: fadein .25s ease-in-out 5s forwards; } #green-light { opacity: 0; animation: fadein 0s ease-in-out 7s forwards; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Opera < 12.1 */ @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes pencil { from { transform: translate(-50px); } to { transform: translate(0px); } } /* Firefox < 16 */ @-moz-keyframes pencil { from { transform: translate(-50px); } to { transform: translate(0px); } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes pencil { from { transform: translate(-50px); } to { transform: translate(0px); } } /* Internet Explorer */ @-ms-keyframes pencil { from { transform: translate(-50px); } to { transform: translate(0px); } } /* Opera < 12.1 */ @-o-keyframes pencil { from { transform: translate(-50px); } to { transform: translate(0px); } } @keyframes chart { from { transform: scale(.5); } to { transform: scale(1); } } /* Firefox < 16 */ @-moz-keyframes chart { from { transform: scale(.5); } to { transform: scale(1); } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes chart { from { transform: scale(.5); } to { transform: scale(1); } } /* Internet Explorer */ @-ms-keyframes chart { from { transform: scale(.5); } to { transform: scale(1); } } /* Opera < 12.1 */ @-o-keyframes fadein { from { transform: scale(.5); } to { transform: scale(1); } }
JAVASCRIPT
Expand for more options Login