SVG Browser Animation w/ Download Animation

HTML
<svg class="svg" viewBox="0 0 1440 346" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <rect id="path-1" x="0" y="0" width="1440" height="346"></rect> <polygon id="path-3" points="0 0 248 0 248 187 0 187"></polygon> <polygon id="path-5" points="0 0 248 0 248 188 0 188"></polygon> <polygon id="path-7" points="0 0 361 0 361 272 0 272"></polygon> <rect id="path-9" x="0" y="0" width="361" height="236"></rect> <rect id="path-10" x="0" y="0" width="361" height="236"></rect> <polygon id="path-11" points="0 0 358 0 358 269 0 269"></polygon> <polygon id="path-13" points="0 0 459 0 459 346 0 346"></polygon> </defs> <!-- <rect x="0" y="0" width="100%" height="100%" fill="red"></rect> --> <g id="hero-illustration"> <clipPath id="clipPath-2" fill="white"> <use xlink:href="#path-1"></use> </clipPath> <g id="clipPath"></g> <g class="page-sidebar" clip-path="url(#clipPath-2)"> <g transform="translate(66.000000, 160.000000)"> <g class="page"> <clipPath id="clipPath-4" fill="white"> <use xlink:href="#path-3"></use> </clipPath> <g id="clipPath" fill-rule="nonzero"></g> <polygon class="background draw" fill="#FFFFFF" fill-rule="nonzero" clip-path="url(#clipPath-4)" points="0 0 248 0 248 187 0 187"></polygon> <g id="content-1" clip-path="url(#clipPath-4)" fill-rule="nonzero" fill="#CCCCCC"> <g class="content-group"> <g transform="translate(90.000000, 40.000000)"> <path class="draw" d="M0.193,122.954 L126.201,122.954 L126.201,43.046 L0.193,43.046 L0.193,122.954 Z M62.466,119.88 L25.586,119.88 L44.026,101.44 L62.466,119.88 Z M52.165,105.246 L70.605,86.806 L103.548,119.881 L66.668,119.881 L52.165,105.246 Z M3.268,46.121 L123.128,46.121 L123.128,119.881 L107.27,119.881 L107.582,119.569 L70.702,82.689 L50.172,103.218 L44.182,97.228 L21.252,119.881 L3.267,119.881 L3.267,46.121 L3.268,46.121 Z M2.498,0.02 L91.626,0.02 L91.626,3.092 L2.498,3.092 L2.498,0.02 Z M2.498,21.533 L68.575,21.533 L68.575,24.606 L2.498,24.606 L2.498,21.533 Z M2.498,10.776 L113.139,10.776 L113.139,13.849 L2.498,13.849 L2.498,10.776 Z M49.92,70.12 C49.92,79.628 35.658,79.628 35.658,70.12 C35.658,60.611 49.92,60.611 49.92,70.12 Z M0.193,261.228 L126.201,261.228 L126.201,181.32 L0.193,181.32 L0.193,261.228 Z M62.073,257.76 L25.193,257.76 L43.633,239.32 L62.073,257.76 Z M52.193,242.76 L70.633,224.32 L103.576,257.395 L66.696,257.395 L52.193,242.76 Z M3.194,184.32 L123.054,184.32 L123.054,258.08 L107.196,258.08 L107.508,257.768 L70.628,220.888 L50.098,241.417 L44.108,235.427 L21.178,258.08 L3.193,258.08 L3.193,184.32 L3.194,184.32 Z M2.193,138.32 L91.321,138.32 L91.321,141.392 L2.193,141.392 L2.193,138.32 Z M2.193,159.32 L68.27,159.32 L68.27,162.393 L2.193,162.393 L2.193,159.32 Z M2.193,148.32 L112.834,148.32 L112.834,151.393 L2.193,151.393 L2.193,148.32 Z M49.455,208.45175 C49.455,217.95975 35.193,217.95975 35.193,208.45175 C35.193,198.94275 49.455,198.94275 49.455,208.45175 Z"></path> </g> </g> </g> <rect id="Rectangle" fill="#FFFFFF" clip-path="url(#clipPath-6)" x="0" y="-1" width="248" height="27"/> <path class="draw frame" d="M0,0 L0,187.475 L248.941,187.475 L248.941,0 L0.001,0 L0,0 Z M245.869,3.073 L245.869,23.05 L3.073,23.05 L3.073,3.073 L245.869,3.073 Z M3.073,26.123 L59.93,26.123 L59.93,184.402 L3.073,184.402 L3.073,26.123 L3.073,26.123 Z M63.003,184.402 L63.003,26.123 L245.869,26.123 L245.869,184.402 L63.004,184.402 L63.003,184.402 Z" fill="#CCCCCC" fill-rule="nonzero" clip-path="url(#clipPath-4)"></path> <path class="draw" d="M17.874,12.082 C17.874,17.209 10.19,17.209 10.19,12.082 C10.19,6.956 17.874,6.956 17.874,12.082 L17.874,12.082 Z M31.704,12.082 C31.704,17.209 24.02,17.209 24.02,12.082 C24.02,6.956 31.704,6.956 31.704,12.082 L31.704,12.082 Z M45.534,12.082 C45.534,17.209 37.85,17.209 37.85,12.082 C37.85,6.956 45.534,6.956 45.534,12.082 L45.534,12.082 Z M12.59,79.973 L40.25,79.973 L40.25,83.046 L12.59,83.046 L12.59,79.973 Z M12.59,93.803 L51.008,93.803 L51.008,96.876 L12.59,96.876 L12.59,93.803 Z M12.59,107.633 L43.324,107.633 L43.324,110.707 L12.59,110.707 L12.59,107.633 Z M12.59,121.463 L35.64,121.463 L35.64,124.537 L12.59,124.537 L12.59,121.463 Z M12.59,135.293 L43.324,135.293 L43.324,138.367 L12.59,138.367 L12.59,135.293 Z M23.347,64.234 C28.317,64.234 32.807,61.244 34.704,56.647 C36.609746,52.0532923 35.5576015,46.7637492 32.039,43.249 C28.1048127,39.3143931 22.0183453,38.512897 17.1996836,41.2948857 C12.3810219,44.0768744 10.031786,49.748609 11.47205,55.1230486 C12.912314,60.4974881 17.7829223,64.2344197 23.347,64.234 L23.347,64.234 Z M23.347,42.721 C27.0776149,42.7191743 30.4419357,44.9649492 31.871,48.411 C33.288,51.857 32.507,55.831 29.866,58.46 C27.2310828,61.1003091 23.2642066,61.8914735 19.818,60.464 C16.3718933,59.0353863 14.1257464,55.6714942 14.127,51.941 C14.127,46.851 18.257,42.721 23.347,42.721 L23.347,42.721 Z" id="Shape" fill="#CCCCCC" fill-rule="nonzero" clip-path="url(#clipPath-4)"></path> </g> </g> </g> <g class="page-center" clip-path="url(#clipPath-2)"> <g transform="translate(1127.000000, 159.000000)"> <g class="page"> <clipPath id="clipPath-6" fill="white"> <use xlink:href="#path-5"></use> </clipPath> <g id="clipPath" fill-rule="nonzero"></g> <polygon class="background draw" fill="#FFFFFF" fill-rule="nonzero" clip-path="url(#clipPath-6)" points="0 0 248 0 248 188 0 188"></polygon> <g id="content" clip-path="url(#clipPath-6)" fill-rule="nonzero" fill="#CCCCCC"> <g class="content-group"> <g transform="translate(45.000000, 50.000000)" id="Shape"> <path class="draw" d="M13,10.9368594 L144,10.9368594 L144,14.0631406 L13,14.0631406 L13,10.9368594 Z M31.2793254,21.8747437 L124.197814,21.8747437 L124.197814,25 L31.2793254,25 L31.2793254,21.8747437 Z M38.8956277,0 L115.058651,0 L115.058651,3.12423124 L38.8956277,3.12423124 L38.8956277,0 Z"></path> <path class="draw" d="M21.1090717,71.3375632 C26.0402564,71.3375632 30.4833239,68.379059 32.3777791,63.8270536 C34.2558739,59.2790279 33.2132016,54.0508005 29.7331437,50.5661699 C26.2428804,47.0884621 20.997706,46.0475673 16.4389496,47.9279625 C11.8815956,49.8116479 8.91023132,54.248213 8.91014075,59.1692805 C8.90455247,62.3982155 10.1878933,65.4965059 12.4766615,67.7797111 C14.7654298,70.0629163 17.8712691,71.3431379 21.1080714,71.3375632 L21.1090717,71.3375632 Z M21.1090717,50.0433179 C24.8065398,50.045629 28.1389958,52.2682976 29.5541007,55.6759506 C30.9698733,59.0853957 30.1896369,63.0097727 27.5766256,65.6221123 C24.9623603,68.2361511 21.0259914,69.0196993 17.6062301,67.6067547 C14.1867981,66.1921928 11.9582834,62.8620746 11.9598735,59.1692805 C11.9585458,56.7485189 12.9219446,54.426525 14.6378524,52.7147879 C16.3537602,51.0030507 18.6814117,50.0419934 21.1080714,50.0433179 L21.1090717,50.0433179 Z M56.4155544,80.8317173 L97.5844456,80.8317173 L97.5844456,83.8750352 L56.4155544,83.8750352 L56.4155544,80.8317173 Z M64.0393861,89.9586777 L89.9606139,89.9586777 L89.9606139,93 L64.0393861,93 L64.0393861,89.9586777 Z M65.3266954,59.1692805 C65.3266954,64.0884796 68.2924079,68.5327216 72.8555042,70.4105985 C77.4134013,72.2964324 82.6614158,71.2548956 86.1486981,67.7723911 C89.6299932,64.2884188 90.6728238,59.0593973 88.7933335,54.5115073 C86.9014487,49.9680508 82.4564528,47.0051005 77.524626,47 C70.7830063,47 65.3266954,52.4540249 65.3266954,59.1682827 L65.3266954,59.1692805 Z M86.672824,59.1692805 C86.6692968,62.8638051 84.4364774,66.1928846 81.0144645,67.6057569 C77.5949008,69.0189539 73.6585602,68.2358054 71.044069,65.6221123 C68.4304271,63.0091566 67.6511684,59.0832849 69.0694192,55.6739117 C70.4876699,52.2645386 73.8243596,50.0425298 77.524626,50.0433179 C82.5758396,50.0433179 86.672824,54.1303442 86.672824,59.1692805 L86.672824,59.1692805 Z M112.832109,80.8317173 L154,80.8317173 L154,83.8750352 L112.833109,83.8750352 L112.832109,80.8317173 Z M120.45494,89.9586777 L146.376168,89.9586777 L146.376168,93 L120.455941,93 L120.45494,89.9586777 Z M133.94018,71.3375632 C138.871365,71.3375632 143.315433,68.379059 145.209888,63.8270536 C147.087983,59.2790279 146.045311,54.0508005 142.565253,50.5661699 C139.074989,47.0884621 133.829815,46.0475673 129.271059,47.9279625 C124.713705,49.8116479 121.74234,54.248213 121.74225,59.1692805 C121.736661,62.3982155 123.020002,65.4965059 125.308771,67.7797111 C127.597539,70.0629163 130.703378,71.3431379 133.94018,71.3375632 L133.94018,71.3375632 Z M133.94018,50.0433179 C137.638013,50.0452258 140.970965,52.2679623 142.38621,55.6759506 C143.801982,59.0853957 143.021746,63.0097727 140.408735,65.6221123 C137.794469,68.2361511 133.8581,69.0196993 130.438339,67.6067547 C127.018907,66.1921928 124.790392,62.8620746 124.791982,59.1692805 C124.790655,56.7485189 125.754054,54.426525 127.469961,52.7147879 C129.185869,51.0030507 131.513521,50.0419934 133.94018,50.0433179 L133.94018,50.0433179 Z M0,80.8317173 L41.167891,80.8317173 L41.167891,83.8750352 L0,83.8750352 L0,80.8317173 Z M7.6238317,89.9586777 L33.5440593,89.9586777 L33.5440593,93 L7.6238317,93 L7.6238317,89.9586777 Z"></path> <path class="draw" d="M13,125.936859 L144,125.936859 L144,129.063141 L13,129.063141 L13,125.936859 Z M31.2793254,136.874744 L124.197814,136.874744 L124.197814,140 L31.2793254,140 L31.2793254,136.874744 Z M38.8956277,115 L115.058651,115 L115.058651,118.124231 L38.8956277,118.124231 L38.8956277,115 Z"></path> <path class="draw" d="M21.1090717,186.337563 C26.0402564,186.337563 30.4833239,183.379059 32.3777791,178.827054 C34.2558739,174.279028 33.2132016,169.050801 29.7331437,165.56617 C26.2428804,162.088462 20.997706,161.047567 16.4389496,162.927963 C11.8815956,164.811648 8.91023132,169.248213 8.91014075,174.16928 C8.90455247,177.398215 10.1878933,180.496506 12.4766615,182.779711 C14.7654298,185.062916 17.8712691,186.343138 21.1080714,186.337563 L21.1090717,186.337563 Z M21.1090717,165.043318 C24.8065398,165.045629 28.1389958,167.268298 29.5541007,170.675951 C30.9698733,174.085396 30.1896369,178.009773 27.5766256,180.622112 C24.9623603,183.236151 21.0259914,184.019699 17.6062301,182.606755 C14.1867981,181.192193 11.9582834,177.862075 11.9598735,174.16928 C11.9585458,171.748519 12.9219446,169.426525 14.6378524,167.714788 C16.3537602,166.003051 18.6814117,165.041993 21.1080714,165.043318 L21.1090717,165.043318 Z M56.4155544,195.831717 L97.5844456,195.831717 L97.5844456,198.875035 L56.4155544,198.875035 L56.4155544,195.831717 Z M64.0393861,204.958678 L89.9606139,204.958678 L89.9606139,208 L64.0393861,208 L64.0393861,204.958678 Z M65.3266954,174.16928 C65.3266954,179.08848 68.2924079,183.532722 72.8555042,185.410598 C77.4134013,187.296432 82.6614158,186.254896 86.1486981,182.772391 C89.6299932,179.288419 90.6728238,174.059397 88.7933335,169.511507 C86.9014487,164.968051 82.4564528,162.005101 77.524626,162 C70.7830063,162 65.3266954,167.454025 65.3266954,174.168283 L65.3266954,174.16928 Z M86.672824,174.16928 C86.6692968,177.863805 84.4364774,181.192885 81.0144645,182.605757 C77.5949008,184.018954 73.6585602,183.235805 71.044069,180.622112 C68.4304271,178.009157 67.6511684,174.083285 69.0694192,170.673912 C70.4876699,167.264539 73.8243596,165.04253 77.524626,165.043318 C82.5758396,165.043318 86.672824,169.130344 86.672824,174.16928 L86.672824,174.16928 Z M112.832109,195.831717 L154,195.831717 L154,198.875035 L112.833109,198.875035 L112.832109,195.831717 Z M120.45494,204.958678 L146.376168,204.958678 L146.376168,208 L120.455941,208 L120.45494,204.958678 Z M133.94018,186.337563 C138.871365,186.337563 143.315433,183.379059 145.209888,178.827054 C147.087983,174.279028 146.045311,169.050801 142.565253,165.56617 C139.074989,162.088462 133.829815,161.047567 129.271059,162.927963 C124.713705,164.811648 121.74234,169.248213 121.74225,174.16928 C121.736661,177.398215 123.020002,180.496506 125.308771,182.779711 C127.597539,185.062916 130.703378,186.343138 133.94018,186.337563 L133.94018,186.337563 Z M133.94018,165.043318 C137.638013,165.045226 140.970965,167.267962 142.38621,170.675951 C143.801982,174.085396 143.021746,178.009773 140.408735,180.622112 C137.794469,183.236151 133.8581,184.019699 130.438339,182.606755 C127.018907,181.192193 124.790392,177.862075 124.791982,174.16928 C124.790655,171.748519 125.754054,169.426525 127.469961,167.714788 C129.185869,166.003051 131.513521,165.041993 133.94018,165.043318 L133.94018,165.043318 Z M0,195.831717 L41.167891,195.831717 L41.167891,198.875035 L0,198.875035 L0,195.831717 Z M7.6238317,204.958678 L33.5440593,204.958678 L33.5440593,208 L7.6238317,208 L7.6238317,204.958678 Z"></path> <path class="draw" d="M13,10.9368594 L144,10.9368594 L144,14.0631406 L13,14.0631406 L13,10.9368594 Z M31.2793254,21.8747437 L124.197814,21.8747437 L124.197814,25 L31.2793254,25 L31.2793254,21.8747437 Z M38.8956277,0 L115.058651,0 L115.058651,3.12423124 L38.8956277,3.12423124 L38.8956277,0 Z"></path> <path class="draw" d="M21.1090717,254.337563 C26.0402564,254.337563 30.4833239,251.379059 32.3777791,246.827054 C34.2558739,242.279028 33.2132016,237.050801 29.7331437,233.56617 C26.2428804,230.088462 20.997706,229.047567 16.4389496,230.927963 C11.8815956,232.811648 8.91023132,237.248213 8.91014075,242.16928 C8.90455247,245.398215 10.1878933,248.496506 12.4766615,250.779711 C14.7654298,253.062916 17.8712691,254.343138 21.1080714,254.337563 L21.1090717,254.337563 Z M21.1090717,233.043318 C24.8065398,233.045629 28.1389958,235.268298 29.5541007,238.675951 C30.9698733,242.085396 30.1896369,246.009773 27.5766256,248.622112 C24.9623603,251.236151 21.0259914,252.019699 17.6062301,250.606755 C14.1867981,249.192193 11.9582834,245.862075 11.9598735,242.16928 C11.9585458,239.748519 12.9219446,237.426525 14.6378524,235.714788 C16.3537602,234.003051 18.6814117,233.041993 21.1080714,233.043318 L21.1090717,233.043318 Z M56.4155544,263.831717 L97.5844456,263.831717 L97.5844456,266.875035 L56.4155544,266.875035 L56.4155544,263.831717 Z M64.0393861,272.958678 L89.9606139,272.958678 L89.9606139,276 L64.0393861,276 L64.0393861,272.958678 Z M65.3266954,242.16928 C65.3266954,247.08848 68.2924079,251.532722 72.8555042,253.410598 C77.4134013,255.296432 82.6614158,254.254896 86.1486981,250.772391 C89.6299932,247.288419 90.6728238,242.059397 88.7933335,237.511507 C86.9014487,232.968051 82.4564528,230.005101 77.524626,230 C70.7830063,230 65.3266954,235.454025 65.3266954,242.168283 L65.3266954,242.16928 Z M86.672824,242.16928 C86.6692968,245.863805 84.4364774,249.192885 81.0144645,250.605757 C77.5949008,252.018954 73.6585602,251.235805 71.044069,248.622112 C68.4304271,246.009157 67.6511684,242.083285 69.0694192,238.673912 C70.4876699,235.264539 73.8243596,233.04253 77.524626,233.043318 C82.5758396,233.043318 86.672824,237.130344 86.672824,242.16928 L86.672824,242.16928 Z M112.832109,263.831717 L154,263.831717 L154,266.875035 L112.833109,266.875035 L112.832109,263.831717 Z M120.45494,272.958678 L146.376168,272.958678 L146.376168,276 L120.455941,276 L120.45494,272.958678 Z M133.94018,254.337563 C138.871365,254.337563 143.315433,251.379059 145.209888,246.827054 C147.087983,242.279028 146.045311,237.050801 142.565253,233.56617 C139.074989,230.088462 133.829815,229.047567 129.271059,230.927963 C124.713705,232.811648 121.74234,237.248213 121.74225,242.16928 C121.736661,245.398215 123.020002,248.496506 125.308771,250.779711 C127.597539,253.062916 130.703378,254.343138 133.94018,254.337563 L133.94018,254.337563 Z M133.94018,233.043318 C137.638013,233.045226 140.970965,235.267962 142.38621,238.675951 C143.801982,242.085396 143.021746,246.009773 140.408735,248.622112 C137.794469,251.236151 133.8581,252.019699 130.438339,250.606755 C127.018907,249.192193 124.790392,245.862075 124.791982,242.16928 C124.790655,239.748519 125.754054,237.426525 127.469961,235.714788 C129.185869,234.003051 131.513521,233.041993 133.94018,233.043318 L133.94018,233.043318 Z M0,263.831717 L41.167891,263.831717 L41.167891,266.875035 L0,266.875035 L0,263.831717 Z M7.6238317,272.958678 L33.5440593,272.958678 L33.5440593,276 L7.6238317,276 L7.6238317,272.958678 Z"></path> </g> </g> </g> <rect id="Rectangle" fill="#FFFFFF" clip-path="url(#clipPath-6)" x="0" y="-1" width="248" height="27"></rect> <path class="draw" d="M19,13.0003933 C19,18.3332022 11,18.3332022 11,13.0003933 C11,7.66653558 19,7.66653558 19,13.0003933 L19,13.0003933 Z" id="Path" fill="#CCCCCC" clip-path="url(#clipPath-6)"></path> <path class="draw" d="M33,13.0003933 C33,18.3332022 25,18.3332022 25,13.0003933 C25,7.66653558 33,7.66653558 33,13.0003933 L33,13.0003933 Z" id="Path" fill="#CCCCCC" clip-path="url(#clipPath-6)"></path> <path class="draw" d="M47,13.0003933 C47,18.3332022 39,18.3332022 39,13.0003933 C39,7.66653558 47,7.66653558 47,13.0003933 L47,13.0003933 Z" id="Path" fill="#CCCCCC" clip-path="url(#clipPath-6)"></path> <path class="frame draw" d="M0,0 L0,188 L248,188 L248,0 L0,0 Z M245,3.0170687 L245,24.1283422 L3,24.1283422 L3,3.01604278 L245,3.01604278 L245,3.0170687 Z M3,184.983957 L3,27.144385 L245,27.144385 L245,184.983957 L3,184.983957 Z" fill="#CCCCCC" fill-rule="nonzero" clip-path="url(#clipPath-6)"></path> </g> </g> </g> <g class="page-form" clip-path="url(#clipPath-2)"> <g transform="translate(214.000000, 74.000000)"> <g class="page"> <clipPath id="clipPath-8" fill="white"> <use xlink:href="#path-7"></use> </clipPath> <g id="clipPath" fill-rule="nonzero"></g> <polygon class="background draw" fill="#FFFFFF" fill-rule="nonzero" clip-path="url(#clipPath-8)" points="0 0 361 0 361 272 0 272"></polygon> <g id="form-content" clip-path="url(#clipPath-8)"> <g transform="translate(-1.000000, 38.000000)"> <!-- <g id="Rectangle" fill="none"> <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-9"></use> <rect stroke="#979797" stroke-width="1" x="0.5" y="0.5" width="360" height="235"></rect> </g> --> <g class="button-container"> <polygon class="button draw" fill="#CCCCCC" fill-rule="evenodd" points="147.847 169.476 214.597 169.476 214.597 196.176 147.847 196.176"></polygon> </g> <g class="field-container"> <g class="outline-container"> <polygon class="field-two draw" fill="#CCCCCC" fill-rule="evenodd" points="103.348 156.127 256.871 156.127 256.871 129.427 103.348 129.427"></polygon> </g> <polygon class="field-content draw" fill="#FFFFFF" fill-rule="evenodd" points="107.798 133.877 252.421 133.877 252.421 151.677 107.798 151.677"></polygon> </g> <g class="field-container"> <g class="outline-container"> <polygon class="field draw" fill="#CCCCCC" fill-rule="evenodd" points="103.348 117.746 256.871 117.746 256.871 91.047 103.348 91.047 103.348 117.747"></polygon> </g> <polygon class="field-content draw" fill="#FFFFFF" fill-rule="evenodd" points="107.798 95.496 252.421 95.496 252.421 113.296 107.798 113.296"></polygon> </g> <polygon class="draw" id="Path" fill="#CCCCCC" fill-rule="evenodd" points="120.035 42.098 242.408 42.098 242.408 46.548 120.035 46.548"></polygon> <polygon class="draw" id="Path" fill="#CCCCCC" fill-rule="evenodd" points="142.285 57.673 217.934 57.673 217.934 62.123 142.285 62.123"></polygon> </g> </g> <g id="form-sent" clip-path="url(#clipPath-8)"> <g transform="translate(0.000000, 35.000000)"> <g id="Rectangle" fill="none"> <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-10"></use> <rect stroke="#979797" stroke-width="1" x="0.5" y="0.5" width="360" height="235"></rect> </g> <polygon class="draw" id="Path" fill="#CCCCCC" fill-rule="evenodd" points="120 137 242.373 137 242.373 141.45 120 141.45"></polygon> <polygon class="draw" id="Path" fill="#CCCCCC" fill-rule="evenodd" points="142 153 217.649 153 217.649 157.45 142 157.45"></polygon> <path class="check-mark" d="M174.085404,94.2012352 C173.135757,93.2469041 171.653417,93.2469041 170.706142,94.2012352 C169.816737,95.0950269 169.756495,96.5241401 170.588017,97.4784713 L177.763731,105.285443 C178.178324,105.762597 178.83149,106 179.482297,106 L179.542516,106 C180.195694,106 180.78863,105.762585 181.203211,105.285443 L199.287765,87.1116799 C200.237412,86.1573488 200.237412,84.667696 199.287765,83.7157483 C198.338118,82.7614172 196.855778,82.7614172 195.908503,83.7157483 L179.598014,100.220505 L174.085404,94.2012352 Z" id="Shape" fill="#10B500" fill-rule="nonzero"></path> <path class="check-mark" d="M180.5,117 C191.301545,117 200,108.241991 200,97.5 C200,96.215959 198.948572,95.1645308 197.664531,95.1645308 C196.38049,95.1645308 195.329062,96.215959 195.329062,97.5 C195.329062,105.674142 188.674142,112.329062 180.5,112.329062 C172.325858,112.329062 165.670938,105.674142 165.670938,97.5 C165.670938,89.3258578 172.325858,82.6709384 180.5,82.6709384 C181.784041,82.6709384 182.835469,81.6195102 182.835469,80.3354692 C182.835469,79.0514282 181.784041,78 180.5,78 C169.698455,78 161,86.7580095 161,97.5 C161,108.301545 169.698455,117 180.5,117 Z" id="Shape" fill="#10B500" fill-rule="nonzero"></path> </g> </g> <path class="frame draw" d="M0,0 L0,272 L361,272 L361,0 L0,0 Z M356.543,4.459 L356.543,34.557 L4.457,34.557 L4.457,4.46 L356.543,4.46 L356.543,4.459 Z M4.457,267.541 L4.457,39.016 L356.543,39.016 L356.543,267.541 L4.457,267.541 Z" fill="#CCCCCC" fill-rule="nonzero" clip-path="url(#clipPath-8)"></path> <path class="draw" d="M26.7,19.468 C26.7,26.885 15.575,26.885 15.575,19.468 C15.575,12.052 26.7,12.052 26.7,19.468 M46.724,19.468 C46.724,26.885 35.599,26.885 35.599,19.468 C35.599,12.052 46.724,12.052 46.724,19.468 M66.749,19.468 C66.749,26.885 55.624,26.885 55.624,19.468 C55.624,12.052 66.749,12.052 66.749,19.468" id="Shape" fill="#CCCCCC" fill-rule="nonzero" clip-path="url(#clipPath-8)"></path> </g> </g> </g> <g class="page-slider" clip-path="url(#clipPath-2)"> <g transform="translate(869.000000, 78.000000)"> <g class="page"> <clipPath id="clipPath-12" fill="white"> <use xlink:href="#path-11"></use> </clipPath> <g id="clipPath" fill-rule="nonzero"></g> <polygon class="background draw" fill="#FFFFFF" fill-rule="nonzero" clip-path="url(#clipPath-12)" points="0 0 358 0 358 269 0 269"></polygon> <path class="draw frame" d="M0,0 L0,269 L358,269 L358,0 L0,0 Z M4,37 L353,37 L353,264 L4,264 L4,37 Z M353.580767,4.40995074 L353.580767,33.0741309 L4.41923301,33.0741309 L4.41923301,4.40995074 L353.580767,4.40995074 Z" fill="#CCCCCC" fill-rule="nonzero" clip-path="url(#clipPath-12)"></path> <path class="draw" d="M26.838,18.997 C26.838,26.357 15.822,26.357 15.822,18.997 C15.822,11.637 26.838,11.637 26.838,18.997 M46.668,18.997 C46.668,26.357 35.651,26.357 35.651,18.997 C35.651,11.637 46.668,11.637 46.668,18.997 M66.497,18.997 C66.497,26.357 55.481,26.357 55.481,18.997 C55.481,11.637 66.497,11.637 66.497,18.997" id="Shape" fill="#CCCCCC" fill-rule="nonzero" clip-path="url(#clipPath-12)"></path> <g id="pagination-dots" clip-path="url(#clipPath-12)" fill="#CCCCCC"> <g transform="translate(156.000000, 235.000000)" id="Path"> <path class="draw" d="M45.794,5.21 C45.794,8.692 40.596,8.692 40.596,5.21 C40.596,1.745 45.794,1.745 45.794,5.21"></path> <path class="draw" d="M32.575,5.21 C32.575,8.692 27.376,8.692 27.376,5.21 C27.376,1.745 32.575,1.745 32.575,5.21"></path> <path class="draw" d="M21.162,5.21 C21.162,11.105 12.349,11.105 12.349,5.21 C12.349,-0.668 21.162,-0.668 21.162,5.21"></path> <path class="draw" d="M6.136,5.21 C6.136,8.692 0.937,8.692 0.937,5.21 C0.937,1.745 6.136,1.745 6.136,5.21"></path> </g> </g> <path class="draw" d="M118,66 L239.18,66 L239.18,70.412 L118,70.412 L118,66 Z M140.033,81.445 L214.943,81.445 L214.943,85.857 L140.033,85.857 L140.033,81.445 Z" id="headline" fill="#CCCCCC" fill-rule="nonzero" clip-path="url(#clipPath-12)"></path> <g id="Image-Slider" clip-path="url(#clipPath-12)" fill="#CCCCCC"> <g class="image-slider-group"> <g transform="translate(-112.000000, 109.000000)" id="Image"> <path class="draw" d="M0,115.735 L0,1 L180.668,1 L180.668,115.735 L0,115.735 Z M87.082,111.322 L60.643,84.845 L34.204,111.322 L87.082,111.322 Z M72.313,90.309 L93.107,111.323 L145.986,111.323 L98.753,63.832 L72.313,90.309 Z M4.408,5.414 L4.408,5.414 L4.408,111.324 L27.99,111.324 L60.643,78.451 L69.232,87.053 L98.89,57.921 L151.769,110.875 L151.321,111.324 L176.263,111.324 L176.263,5.414 L4.408,5.414 Z M69.094,39.873 C69.094,53.526 48.646,53.526 48.646,39.873 C48.646,26.221 69.095,26.221 69.095,39.873 L69.094,39.873 Z"></path> <path class="draw" d="M200.666,115.593 L200.666,0.858 L381.334,0.858 L381.334,115.593 L200.666,115.593 Z M287.748,111.18 L261.309,84.703 L234.87,111.18 L287.748,111.18 Z M272.979,90.167 L293.773,111.181 L346.652,111.181 L299.419,63.69 L272.979,90.167 Z M205.074,5.272 L205.074,5.272 L205.074,111.182 L228.656,111.182 L261.309,78.309 L269.898,86.911 L299.556,57.779 L352.435,110.733 L351.987,111.182 L376.929,111.182 L376.929,5.272 L205.074,5.272 Z M269.76,39.731 C269.76,53.384 249.312,53.384 249.312,39.731 C249.312,26.079 269.761,26.079 269.761,39.731 L269.76,39.731 Z"></path> <path class="draw" d="M402,115.735 L402,1 L582.668,1 L582.668,115.735 L402,115.735 Z M489.082,111.322 L462.643,84.845 L436.204,111.322 L489.082,111.322 Z M474.313,90.309 L495.107,111.323 L547.986,111.323 L500.753,63.832 L474.313,90.309 Z M406.408,5.414 L406.408,5.414 L406.408,111.324 L429.99,111.324 L462.643,78.451 L471.232,87.053 L500.89,57.921 L553.769,110.875 L553.321,111.324 L578.263,111.324 L578.263,5.414 L406.408,5.414 Z M471.094,39.873 C471.094,53.526 450.646,53.526 450.646,39.873 C450.646,26.221 471.095,26.221 471.095,39.873 L471.094,39.873 Z"></path> <path class="draw" d="M603,115.735 L603,1 L783.668,1 L783.668,115.735 L603,115.735 Z M690.082,111.322 L663.643,84.845 L637.204,111.322 L690.082,111.322 Z M675.313,90.309 L696.107,111.323 L748.986,111.323 L701.753,63.832 L675.313,90.309 Z M607.408,5.414 L607.408,5.414 L607.408,111.324 L630.99,111.324 L663.643,78.451 L672.232,87.053 L701.89,57.921 L754.769,110.875 L754.321,111.324 L779.263,111.324 L779.263,5.414 L607.408,5.414 Z M672.094,39.873 C672.094,53.526 651.646,53.526 651.646,39.873 C651.646,26.221 672.095,26.221 672.095,39.873 L672.094,39.873 Z"></path> </g> </g> </g> </g> </g> </g> <g class="page-hero" clip-path="url(#clipPath-2)"> <g transform="translate(491.000000, 0.000000)"> <g class="page"> <clipPath id="clipPath-14" fill="white"> <use xlink:href="#path-13"></use> </clipPath> <g id="clipPath" fill-rule="nonzero"></g> <polygon class="background draw" fill="#FFFFFF" fill-rule="nonzero" clip-path="url(#clipPath-14)" points="0 0 459 0 459 346 0 346"></polygon> <g id="Images-Content" clip-path="url(#clipPath-14)"> <g class="images-container"> <g transform="translate(52.000000, 214.000000)" id="Shape"> <path class="draw" fill="#ccc" d="M0,91 L102.140079,91 L102.140079,0 L0,0 L0,91 Z M51.6465686,85.3126255 L21.3466457,85.3126255 L36.5081578,70.1158403 L51.6465686,85.3126255 Z M45.9716734,71.716136 L62.70709,54.942146 L92.9407221,85.2463648 L59.6918625,85.2463648 L45.9716734,71.716136 L45.9716734,71.716136 Z M5.67489522,5.68938241 L96.4651836,5.68938241 L96.4651836,80.6061098 L62.8617686,46.9246045 L42.1589473,67.6752389 L36.4840521,61.9878643 L13.3445412,85.3156373 L5.67489522,85.3156373 L5.67489522,5.68938241 Z M43,36.0007262 C43,26.6664246 29,26.6664246 29,36.0007262 C29,45.3330913 43,45.3330913 43,36.0007262 Z" fill-rule="nonzero"></path> <path class="draw" fill="#ccc" d="M126,91 L227.868728,91 L227.868728,0 L126,0 L126,91 Z M177.510374,85.3126255 L147.289352,85.3126255 L162.410883,70.1158403 L177.509373,85.3126255 L177.510374,85.3126255 Z M171.850444,71.716136 L188.540727,54.942146 L218.694632,85.2463648 L185.534453,85.2463648 L171.850444,71.716136 L171.850444,71.716136 Z M131.658929,5.68938241 L222.209799,5.68938241 L222.209799,80.6061098 L188.694998,46.9246045 L168.047772,67.6752389 L162.387842,61.9878643 L139.307348,85.3156373 L131.658929,85.3156373 L131.658929,5.68938241 Z M168,36.8469584 C168,46.5230246 153.488339,46.5230246 153.488339,36.8469584 C153.488339,27.1688842 168,27.1688842 168,36.8469584 L168,36.8469584 Z" fill-rule="nonzero"></path> <path class="draw" fill="#ccc" d="M251.066205,91 L251.066205,0.210202655 L353,0.210202655 L353,91 L251.066205,91 Z M302.608974,85.3257629 L302.607972,85.3257629 L287.499986,70.1640811 L272.368946,85.3257629 L302.608974,85.3257629 Z M296.945484,71.7606802 L310.638099,85.2596553 L343.820135,85.2596553 L313.646264,55.0254368 L296.945484,71.7606802 Z M256.729695,5.88644305 L256.728692,5.88644305 L256.728692,85.3287678 L264.382924,85.3287678 L287.476931,62.05488 L293.140421,67.7291172 L313.801634,47.0264151 L347.337513,80.6301188 L347.337513,5.88644305 L256.729695,5.88644305 Z M293,36.8469584 C293,46.5230246 278.526607,46.5230246 278.526607,36.8469584 C278.526607,27.1688842 293,27.1688842 293,36.8469584 L293,36.8469584 Z" fill-rule="evenodd"></path> <path class="draw" fill="#ccc" d="M459,91 L561.140079,91 L561.140079,0 L459,0 L459,91 Z M510.646569,85.3126255 L480.346646,85.3126255 L495.508158,70.1158403 L510.646569,85.3126255 Z M504.971673,71.716136 L521.70709,54.942146 L551.940722,85.2463648 L518.691863,85.2463648 L504.971673,71.716136 L504.971673,71.716136 Z M464.674895,5.68938241 L555.465184,5.68938241 L555.465184,80.6061098 L521.861769,46.9246045 L501.158947,67.6752389 L495.484052,61.9878643 L472.344541,85.3156373 L464.674895,85.3156373 L464.674895,5.68938241 Z M502,36.0007262 C502,26.6664246 488,26.6664246 488,36.0007262 C488,45.3330913 502,45.3330913 502,36.0007262 Z" fill-rule="nonzero"></path> <path class="draw" fill="#ccc" d="M585,91 L686.868728,91 L686.868728,0 L585,0 L585,91 Z M636.510374,85.3126255 L606.289352,85.3126255 L621.410883,70.1158403 L636.509373,85.3126255 L636.510374,85.3126255 Z M630.850444,71.716136 L647.540727,54.942146 L677.694632,85.2463648 L644.534453,85.2463648 L630.850444,71.716136 L630.850444,71.716136 Z M590.658929,5.68938241 L681.209799,5.68938241 L681.209799,80.6061098 L647.694998,46.9246045 L627.047772,67.6752389 L621.387842,61.9878643 L598.307348,85.3156373 L590.658929,85.3156373 L590.658929,5.68938241 Z M627,36.8469584 C627,46.5230246 612.488339,46.5230246 612.488339,36.8469584 C612.488339,27.1688842 627,27.1688842 627,36.8469584 L627,36.8469584 Z" fill-rule="nonzero"></path> <path class="draw" fill="#ccc" d="M710.066205,91 L710.066205,0.210202655 L812,0.210202655 L812,91 L710.066205,91 Z M761.608974,85.3257629 L761.607972,85.3257629 L746.499986,70.1640811 L731.368946,85.3257629 L761.608974,85.3257629 Z M755.945484,71.7606802 L769.638099,85.2596553 L802.820135,85.2596553 L772.646264,55.0254368 L755.945484,71.7606802 Z M715.729695,5.88644305 L715.728692,5.88644305 L715.728692,85.3287678 L723.382924,85.3287678 L746.476931,62.05488 L752.140421,67.7291172 L772.801634,47.0264151 L806.337513,80.6301188 L806.337513,5.88644305 L715.729695,5.88644305 Z M752,36.8469584 C752,46.5230246 737.526607,46.5230246 737.526607,36.8469584 C737.526607,27.1688842 752,27.1688842 752,36.8469584 L752,36.8469584 Z" fill-rule="evenodd"></path> </g> </g> </g> <g id="Headline-Content" clip-path="url(#clipPath-14)"> <g class="headline-container" transform="translate(0.000000, 44.000000)"> <rect id="Rectangle" fill="#FFFFFF" fill-rule="evenodd" x="0" y="0" width="459" height="121"></rect> <path class="draw" d="M151,46 L306.965493,46 L306.965493,51.5690659 L151,51.5690659 L151,46 Z M178.851339,66.0516422 L275.214866,66.0516422 L275.214866,71.6207081 L178.851339,71.6207081 L178.851339,66.0516422 Z" id="Shape" fill="#CCCCCC" fill-rule="nonzero"></path> </g> </g> <path class="frame draw" d="M0,0 L0,346 L459,346 L459,0 L0,0 Z M453.333136,5.67183597 L453.333136,42.5407704 L5.66586322,42.5407704 L5.66586322,5.67183597 L453.333136,5.67183597 Z M250.018855,161.655328 C248.424924,150.466706 238.862341,142.158016 227.573667,142.158016 C216.284992,142.158016 206.722409,150.466706 205.128478,161.655328 L5.66686444,161.655328 L5.66686444,48.2126064 L453.334137,48.2126064 L453.334137,161.655328 L250.018855,161.655328 Z M244.351991,163.805024 C244.351991,170.695254 240.212977,176.899262 233.859281,179.536116 C227.504168,182.172136 220.184748,180.709868 215.332839,175.834918 C210.46294,170.983347 209.00217,163.649973 211.636361,157.290915 C214.264547,150.934511 220.468862,146.78802 227.352399,146.787515 C231.898946,146.735249 236.276439,148.507466 239.504118,151.707108 C242.750702,154.896421 244.577421,159.256035 244.573259,163.805024 L244.352992,163.805024 L244.351991,163.805024 Z M5.66586322,340.327164 L5.66586322,167.327164 L205.240614,167.327164 C207.211001,178.117657 216.596369,185.938188 227.553642,185.938188 C238.487887,185.938188 247.873256,178.117657 249.843643,167.327164 L453.334137,167.327164 L453.334137,340.327164 L5.66586322,340.327164 Z" fill="#CCCCCC" fill-rule="nonzero" clip-path="url(#clipPath-14)"></path> <path class="draw" d="M32.4444444,24 C32.4444444,33.3333333 18,33.3333333 18,24 C18,14.6666667 32.4444444,14.6666667 32.4444444,24 M58.0001538,24 C58.0001538,33.3333333 43.5557094,33.3333333 43.5557094,24 C43.5557094,14.6666667 58.0001538,14.6666667 58.0001538,24 M83,24 C83,33.3333333 68.5555556,33.3333333 68.5555556,24 C68.5555556,14.6666667 83,14.6666667 83,24" id="Shape" fill="#CCCCCC" fill-rule="nonzero" clip-path="url(#clipPath-14)"></path> </g> </g> </g> <path d="M1440,342.5 L0,342.5" id="line" stroke="black" stroke-width="10" stroke-linecap="square"></path> </g> </svg> <h1>Discover more. All in one browser. <div class="w3-section w3-container"> <div class="w3-card-4"> <div class="w3-container w3-padding-16 w3-black w3-xxlarge"> </div> <div class="w3-container w3-white"> <p>Bolt's browser window is streamlined, clean and simple. For example, you can search and navigate from the same box and arrange tabs however you wish -- quickly and easily. </p> </div> </div> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } </style> </head> <body> <!DOCTYPE html> <html> <style> button { border: 2px solid black; background-color: white; color: black; padding: 14px 28px; font-size: 18px; cursor: pointer; } } #myProgress { width: 100%; background-color: lightgreen; } #myBar { width: 1%; height: 13px; background-color: green; } </style> <body> <div id="myProgress"> <div id="myBar"></div> </div> <br> <button onclick="move()">Download Bolt</button> <script> function move() { var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 260); function frame() { if (width >= 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; } } } </script> </body> </html> <h4>Why download Bolt?</h4> <button class="accordion">Speed</button> <div class="panel"> <p>Bolt is designed to be fast in every possible way. It's quick to start up from your desktop, loads web pages in a snap, and runs complex web applications lightning fast. </p> </div> <button class="accordion">Security</button> <div class="panel"> <p>Bolt is designed to keep you safer and more secure on the web with built-in malware and phishing protection, auto-updates to make sure you have all the latest security fixes, and more.</p> </div> <button class="accordion">Privicy</button> <div class="panel"> <p>Bolt puts you in control of your private information while helping protect the information you share when you’re online. </p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> </body> </html>
SCSS
p{ font-size: 18px; } h1{ text-align: center; font-family: Noto Sans CJK JP Light; } body { padding: 48px; } #line { transform: scaleX(0); transform-origin: 50% 100%; animation: grow 1s forwards; } .draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; fill: none; stroke: #ccc; stroke-width: 4; animation: draw 3s 2s forwards, fill 1s 2.5s forwards; stroke-linecap: round; stroke-linejoin: round; } .page .frame { fill: #ccc; stroke: none; } .page .background { fill: white; stroke: none; } .page .background, .page .frame, .page rect { transform: scaleY(0); transform-origin: 50% 100%; animation: grow 1s 1s forwards; } .page-center .content-group { animation: contentScroll 8s 3.5s infinite; } .page-sidebar .content-group { animation: contentScrollTwo 8s 4s infinite; } .page-form .outline-container { fill: #ccc; } .page-form .field-content { animation: draw 3s 2s forwards, fillTwo 1s 2.5s forwards } .page-form .field { animation: draw 3s 2s forwards, fill 1s 2.5s forwards, highlight 1s 3.5s; } .page-form .field-two { animation: draw 3s 2s forwards, fill 1s 2.5s forwards, highlight 1s 4.5s; } .page-form .button-container .button { animation: draw 3s 2s forwards, fill 1s 2.5s forwards, highlight 1s 5.5s; } .page-form .check-mark { fill: #10B500; animation: none; } .page-slider .image-slider-group { animation: sliderScroll 8s 3.5s infinite; } .page-hero .images-container { animation: heroImagesOne 6s 3.5s infinite; } .page-hero .images-container-two { animation: heroImagesTwo 6s 3.5s infinite; } @keyframes grow { 100% { transform: scale(1); } } @keyframes draw { 100% { stroke-dashoffset: 0; } } @keyframes fill { 100% { fill: #ccc; stroke-width: 0; } } @keyframes fillTwo { 100% { fill: white; stroke-width: 0; } } @keyframes contentScroll { 50% { transform: translateY(-165px); } } @keyframes contentScrollTwo { 50% { transform: translateY(-140px); } } @keyframes highlight { 50% { fill: #10B500; } } @keyframes fadeIn { 100% { opacity: 1; } } @keyframes fadeOut { 100% { opacity: 0; } } @keyframes sliderScroll { 0% { transform: translateX(0); } 20% { transform: translateX(0); } 25% { transform: translateX(-13.99%); } 45% { transform: translateX(-13.99%); } 50% { transform: translateX(-27.95%); } 70% { transform: translateX(-27.95%); } 75% { transform: translateX(13.95%); } 95% { transform: translateX(13.95%); } } @keyframes heroImagesOne { 0% { transform: translateX(0); } 10%, 50% { transform: translateX(-459px); } 60%, 100% { transform: translateX(0); } } @keyframes heroImagesTwo { 0% { transform: translateX(459px); } 10%, 50% { transform: translateX(0); } 60%, 100% { transform: translateX(459px); } } #form-sent { opacity: 0; transition: opacity 1000ms; animation: fadeIn 1s 6.5s forwards, fadeOut 2s 10s forwards; } .is-hidden { opacity: 0; }
JAVASCRIPT
window.addEventListener('load',function(){ var fieldOne = document.getElementsByClassName('field')[0]; var fieldTwo = document.getElementsByClassName('field-two')[0]; var button = document.getElementsByClassName('button')[0]; var overlay = document.getElementById('form-sent'); var drawing = document.getElementsByClassName('draw'); var intervalID = window.setInterval(animateForm, 11250); var stopDrawing = window.setTimeout(removeDrawingClass, 4500); drawing = [].slice.call(drawing); function animateForm() { fieldOne.classList.remove('field'); fieldTwo.classList.remove('field-two'); button.classList.remove('button'); overlay.classList.add('is-hidden'); overlay.id = ''; setTimeout(function(){ fieldOne.classList.add('field'); fieldTwo.classList.add('field-two'); button.classList.add('button'); overlay.id = 'form-sent'; overlay.classList.remove('is-hidden'); }, 50); } function removeDrawingClass() { drawing.forEach(function(draw) { draw.classList.remove('draw'); }); } });
Expand for more options Login