"SVG ANIMATED ICONS"
Bootstrap 4.1.1 Snippet by koshikojha

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <a href="#" target="#"> </a> <a href="#" target="_blank"> <svg version="1.1" id="info" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> <circle class="st0 circle" cx="101.204" cy="98.6" r="87.151"/> <g class="letter"> <path class="st2" d="M110.887,60.375c0,6.195-5.017,11.212-11.212,11.212c-6.193,0-11.212-5.017-11.212-11.212 s5.019-11.212,11.212-11.212C105.87,49.163,110.887,54.18,110.887,60.375z"/> <path class="st1" d="M105.553,98c0-0.552-0.448-1-1-1h-10c-0.552,0-1,0.448-1,1v51c0,0.553,0.448,1,1,1h10c0.552,0,1-0.447,1-1V98z "/> <path class="st0" d="M105.553,98c0-0.552-0.448-1-1-1h-10c-0.552,0-1,0.448-1,1v51c0,0.553,0.448,1,1,1h10c0.552,0,1-0.447,1-1V98z "/> </g> </svg> </a> <a href="#" target="_blank"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="demo" x="0px" y="0px" width="200px" height="200 px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> <rect x="25.5" y="30.5" class="st3 square" width="144" height="144"/> <rect x="113.5" y="30.5" class="st0" width="56" height="56"/> <g class="arrow"> <polyline class="st3" points="173.5,75.5 173.5,26.5 125.5,26.5 "/> <line class="st3" x1="83.599" y1="113.68" x2="173.918" y2="29.317"/> </g> </svg> </a> <a href="#" target="_blank"> <svg version="1.1" id="setting" class="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 60 57.476" style="enable-background:new 0 0 60 57.476;" xml:space="preserve"> <path class="st0" d="M58.869,28.755c0-0.716-0.056-1.419-0.111-2.122l-9.313-2.222l7.095-6.544 c-0.732-1.637-1.622-3.192-2.655-4.648l-9.63,2.624l2.808-9.365c-1.446-1.017-2.991-1.903-4.624-2.65l-7.172,7.067l-2.532-9.644 c-0.876-0.077-1.76-0.129-2.657-0.129c-0.897,0-1.781,0.052-2.658,0.129l-2.532,9.644l-7.172-7.067 c-1.633,0.747-3.178,1.634-4.624,2.65l2.807,9.365L6.27,13.219c-1.034,1.456-1.924,3.011-2.656,4.648l7.095,6.544l-9.313,2.222 c-0.056,0.703-0.112,1.405-0.112,2.122c0,1.139,0.094,2.255,0.233,3.358l9.191,2.193l-6.681,6.162 c0.837,1.71,1.849,3.321,3.018,4.818l8.853-2.412l-2.509,8.37c1.608,1.102,3.33,2.055,5.16,2.823l6.337-6.245l2.21,8.416 c0.979,0.097,1.973,0.148,2.979,0.148c1.007,0,2-0.052,2.979-0.148l2.21-8.416l6.338,6.245c1.83-0.769,3.552-1.722,5.159-2.822 l-2.509-8.371l8.854,2.412c1.169-1.497,2.181-3.107,3.018-4.818l-6.681-6.162l9.19-2.193C58.775,31.01,58.869,29.894,58.869,28.755z "/> <ellipse class="ellipse" cx="29.857" cy="28.755" rx="13.423" ry="13.262"/> </svg> </a> <a href="#" target="_blank"> <svg version="1.1" id="access" class="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 60 57.476" style="enable-background:new 0 0 60 57.476;" xml:space="preserve"> <path class="st0" d="M29.229,28.714"/> <path class="st0" d="M5.452,3.058h47.282c0,0,7.105,51.311-23.291,51.311C-0.31,54.369,5.452,3.058,5.452,3.058z"/> <circle class="circle" cx="29.229" cy="28.714" r="14.811"/> <line class="circle" x1="38.479" y1="17.148" x2="19.224" y2="39.633"/> </svg> </a> <a href="#" target="_blank"> <svg version="1.1" id="message" class="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 60 57.476" style="enable-background:new 0 0 60 57.476;" xml:space="preserve"> <g class="envelope"> <rect x="22" y="19" class="st0" width="35" height="24"/> <polyline class="st0" points="22,19 39.845,35.531 57,19 "/> <path class="st0" d="M22.19,43"/> <line class="st0" x1="22" y1="43" x2="34.802" y2="30.94"/> <line class="st0" x1="57" y1="43" x2="45.247" y2="30.614"/> </g> <g class="lines"> <g> <line class="st0 first-line" x1="15.82" y1="33.587" x2="1" y2="33.587"/> </g> <g> <line class="st0 second-line" x1="15.82" y1="27.587" x2="1" y2="27.587"/> </g> <g> <line class="st0 third-line" x1="15.82" y1="21.587" x2="1" y2="21.587"/> </g> </g> </svg> </a> <a href="#" target="_blank"> <svg version="1.1" id="lock" class="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 60 57.476" style="enable-background:new 0 0 60 57.476;" xml:space="preserve"> <rect x="9" y="21.441" class="st1" width="42.978" height="30.855"/> <circle class="st0" cx="31.074" cy="36.318" r="6.715"/> <path class="st2" d="M31.04,3.382c-9.967,0-18.045,8.079-18.045,18.045h36.09C49.085,11.461,41.006,3.382,31.04,3.382z"/> </svg> </a> <a href="#" target="_blank"> <svg version="1.1" id="share" class="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 60 57.476" style="enable-background:new 0 0 60 57.476;" xml:space="preserve"> <circle class="st0 circle" cx="46.736" cy="45.333" r="7.964"/> <circle class="st0 circle" cx="41.457" cy="11.54" r="7.964"/> <circle class="st0 circle" cx="11.888" cy="31.605" r="7.964"/> <line class="st0" x1="35.373" y1="16.678" x2="18.138" y2="26.677"/> <line class="st0" x1="39.146" y1="42.92" x2="18.805" y2="35.541"/> </a> </svg> </a> <a href="#" target="_blank"> <svg version="1.1" id="notification" class="icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 60 57.476" style="enable-background:new 0 0 60 57.476;" xml:space="preserve"> <g class="notif"> <path class="st0" d="M13.375,36.203c0,0-6.123,3.069-6.416,6.575H54c-0.292-3.506-6.136-5.551-6.136-5.551s0-26.88-17.53-26.88 c-17.531,0-17.531,26.734-17.531,26.734"/> <path class="st0" d="M26.279,10.465c0,0-0.834-6.083,4.067-6.108c4.901-0.026,4.096,6.108,4.096,6.108"/> <path class="st0" d="M21.276,46.284h17.53c0,0-0.487,7.013-8.765,7.013S21.276,46.284,21.276,46.284z"/> </g> </svg> </a> <a href="#" target="_blank"> <svg version="1.1" id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> <g id="road"> <path class="st0" d="M141.98,71.904l21.465,100.993"/> <polyline class="st0" points="36.305,137.309 128.621,117.686 128.621,117.686 119.889,76.599 "/> <polyline class="st0" points="141.355,177.59 133.316,139.777 41.001,159.4 "/> </g> <g id="point"> <circle class="st1" cx="72.462" cy="55.02" r="13.07"/> <path class="st3" d="M102.463,55.02c0,16.569-30,54.98-30,54.98s-30-38.412-30-54.98s13.431-30,30-30 C89.031,25.02,102.463,38.451,102.463,55.02z"/> </g> </svg> </a> <a href="#" target="_blank"> <svg version="1.1" id="phone" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve"> <g> <g> <path class="st1" d="M97.433,169.47c-13.994-7.26-28.296-18.039-41.423-31.168c-17.021-17.02-30.025-36.017-36.604-53.5 c-2.904-7.723-4.479-14.981-4.541-21.005c-0.062-6.395,1.544-11.429,4.694-14.58c0.834-0.834,1.699-1.729,2.595-2.687 c5.097-5.375,11.46-12.078,19.646-12.078c6.054,0,11.892,3.583,17.792,10.936c7.599,9.482,10.626,16.525,9.73,22.827 c-0.834,5.961-4.974,10.008-9.36,14.333c-0.494,0.494-0.988,0.988-1.513,1.514c-1.514,1.513-0.309,5.652,3.212,11.058 c3.521,5.437,9.359,12.232,17.329,20.203c18.442,18.44,26.317,21.189,29.376,21.189c1.051,0,1.545-0.34,1.854-0.649 c0.525-0.494,1.02-1.019,1.514-1.513c4.82-4.882,9.359-9.483,16.465-9.483c5.715,0,12.293,3.151,20.695,9.885 c7.105,5.715,10.656,11.336,10.904,17.175c0.371,8.494-6.518,15.043-12.049,20.295c-0.957,0.926-1.883,1.791-2.717,2.624 c-3.057,3.06-7.969,4.695-14.178,4.695C121.65,179.539,109.758,175.987,97.433,169.47z M116.43,139.012 c-0.494,0.496-1.02,1.021-1.545,1.547c-1.697,1.666-3.924,2.563-6.486,2.563c-7.413,0-18.225-7.353-33.979-23.105 c-8.309-8.31-14.425-15.445-18.193-21.253c-5.653-8.68-6.426-15.136-2.348-19.213c0.525-0.525,1.019-1.05,1.544-1.544 c3.892-3.83,6.951-6.827,7.475-10.595c0.587-4.262-2.131-10.101-8.371-17.854c-4.541-5.622-8.803-8.495-12.727-8.495 c-5.405,0-10.471,5.344-14.951,10.039c-0.927,0.989-1.822,1.916-2.718,2.811c-3.181,3.151-4.726,12.572,1.328,28.665 c6.271,16.619,18.75,34.813,35.121,51.185c12.665,12.665,26.441,23.013,39.817,29.993c11.461,5.992,22.303,9.266,30.487,9.266 c4.389,0,7.785-0.987,9.578-2.779c0.895-0.895,1.822-1.791,2.811-2.717c4.818-4.573,10.254-9.763,10.037-15.29 c-0.152-3.832-3.025-8.002-8.492-12.389c-7.074-5.683-12.512-8.432-16.619-8.432C124.029,131.414,121.125,134.132,116.43,139.012z "/> </g> <path class="st1" d="M166.563,188.126c-4.232-12.758-18.008-19.522-18.131-19.582l0,0c-1.607-0.804-2.285-2.751-1.514-4.357 c0.771-1.636,2.717-2.316,4.355-1.545c0.646,0.341,16.371,8.003,21.498,23.415c0.557,1.7-0.369,3.554-2.068,4.108 c-0.342,0.093-0.68,0.155-1.02,0.155C168.324,190.32,167.057,189.455,166.563,188.126z"/> </g> <g> <path class="first-l st0" d="M93.461,76.706c6.802,0.508,13.47,3.325,18.729,8.468c4.354,4.257,7.136,9.515,8.339,15.052"/> <path class="second-l st0" d="M91.66,57.596c12.147,0.332,24.206,5.065,33.579,14.231c7.656,7.487,12.397,16.83,14.206,26.616"/> <path class="third-l st0" d="M89.598,35.715c18.493-0.67,37.215,5.948,51.49,19.907c11.622,11.365,18.445,25.787,20.44,40.741"/> </g> </svg> </a> </div>
html, body,.container{ height:100%; } body{ margin:0; background:#2c3e50; } .container{ margin: 0 auto; width:1100px; display: flex; flex-wrap:wrap; justify-content:center; align-items:center; } .container a{ text-decoration:none; } /*info*/ #info .bg{fill:transparent;} #info .st0{fill:none;stroke:#fff;stroke-width:6;stroke-miterlimit:10;} #info .st1{fill:#fff;} #info .st2{fill:#fff;stroke:#fff;stroke-width:4;stroke-miterlimit:10;} #info .circle{ -moz-transform: scale(1,1); -ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform: 50% 50%; transition:0.5s; } #info:hover .circle{ -moz-transform: scale(-1,1); -ms-transform: scale(-1,1); -webkit-transform: scale(-1,1); transform: scale(-1,1); } /*Demo*/ #demo .st0{fill:#2c3e50;stroke:#2c3e50;stroke-width:8;stroke-miterlimit:10;} #demo .st1{fill:#fff;} #demo .st2{fill: #2c3e50;} #demo .st3{fill:none;stroke:#fff;stroke-width:6;stroke-miterlimit:10;} #demo .st4{font-family:'Arial';} #demo .st5{font-size:48px;} #demo .square{ -ms-transform:scale(1); -moz-transform:scale(1); -webkit-transform:scale(1); transform:scale(1); -ms-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -webkit-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -moz-transform-origin:50% 50%; -webkit-transform-origin:50% 50%; transform-origin:50% 50%; transition:0.5s; } #demo:hover .square{ -ms-transform:scale(0.8); -moz-transform:scale(0.8); -webkit-transform:scale(0.8); transform:scale(0.8); -ms-transform-origin:50% 50%; -moz-transform-origin:50% 50% -webkit-transform-origin:50% 50%; transform-origin:50% 50%; } #demo:hover .arrow .st3{ stroke-width:8; } /*Map*/ #map #point { transition: .6s; } #map:hover #point { transform: translate(0px,-20px); } #map .st0{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} #map .st1{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-miterlimit:10;} #map .st2{fill:none;} #map .st3{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-linejoin:round;stroke-miterlimit:10;} #map .bg{stroke:none;fill:transparent;} /*Settings*/ #setting .st0, #setting .circle, #setting .ellipse{fill:none;stroke:#FFF;stroke-width:2;stroke-miterlimit:10;} .icons{cursor:pointer;} #setting .st0{ -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform: 50% 50%; transition:1s; } #setting:hover .st0{animation: rotation 2s linear; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } /*Access*/ #access .st0,#access .circle,#access .ellipse{fill:none;stroke:#FFF;stroke-width:2;stroke-miterlimit:10;} #access .circle{ -moz-transform: scale(1,1); -ms-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform: 50% 50%; transition:0.5s; } #access:hover .circle{ -moz-transform: scale(-1,1); -ms-transform: scale(-1,1); -webkit-transform: scale(-1,1); transform: scale(-1,1); } /*Phone*/ #phone .st0{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-linecap:round;stroke-miterlimit:10;} #phone .st1{fill:#FFFFFF;} #phone #bg{fill:transparent;} #phone .first-l{transition: .6s cubic-bezier(1, 0, 0.83, 0.95);} #phone .second-l{transition: .4s cubic-bezier(1, 0, 0.83, 0.95);} #phone .third-l{transition: .2s cubic-bezier(1, 0, 0.83, 0.95);} #phone .first-l, #phone .second-l, #phone .third-l{ opacity:0; } #phone:hover .first-l{transition: .2s cubic-bezier(1, 0, 0.83, 0.95);} #phone:hover .second-l{transition: .4s cubic-bezier(1, 0, 0.83, 0.95);} #phone:hover .third-l{transition: .6s cubic-bezier(1, 0, 0.83, 0.95);} #phone:hover .first-l, #phone:hover .second-l, #phone:hover .third-l{ opacity:1; } /*message*/ #message .st0,#message .circle,#message .ellipse{fill:none;stroke:#FFF;stroke-width: 1.3px;stroke-miterlimit:10;} #message .bg{ fill:transparent; } #message .envelope{ -webkit-transform:scale(1.4) translate(-18px,-8px); -ms-transform:scale(1.4) translate(-18px,-8px); transform:scale(1.4) translate(-18px,-8px); transition:0.4s; } #message:hover .envelope{ transform:scale(1) translate(0,0); } #message .lines .st0{ -moz-transform:tranclate(-18px,0); -ms-transform:tranclate(-18px,0); -webkit-transform:translate(-18px,0); transform:translate(-18px,0); } #message .lines .st0.first-line{ transition:0.4s; } #message .lines .st0.second-line{ transition:0.3s; } #message .lines .st0.third-line{ transition:0.2s; } #message:hover .lines .st0{ -moz-transform:translate(0,0); -ms-transform:translate(0,0); -webkit-transform:translate(0,0); transform:translate(0,0); } /*Lock*/ #lock #bg{fill:transparent} #lock .st0, #lock .circle, #lock .ellipse{fill:none;stroke:#FFF;stroke-width:2;stroke-miterlimit:10;} #lock .st0{ -moz-transform:scale(1,1); -ms-transform:scale(1,1); -webkit-transform:scale(1,1); transform:scale(1,1); -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -webkit-transform-origin:50% 50%; transform:50% 50%; transition:0.5s; } #lock:hover .st0{ -moz-transform: scale(-1,1); -ms-transform: scale(-1,1); -webkit-transform: scale(-1,1); transform: scale(-1,1); } #lock .st1{ fill:none; stroke:#fff; stroke-width:2; stroke-miterlimit:10; } #lock .st2{ fill:none; stroke:#fff; stroke-width:2; stroke-miterlimit:10; stroke-dasharray:41; transition:0.5s; } #lock:hover .st2{ stroke-dasharray:31; } /*Share*/ #share .st0, #share .circle, #share .ellipse{fill:none;stroke:#FFF;stroke-width:2;stroke-miterlimit:10;} #share .circle{ stroke-dasharray:50; transition:1s; } #share:hover .circle{ stroke-dasharray:50; animation:moving 1s linear; } @keyframes moving{ from{stroke-dashoffset:50;} to{stroke-dashoffset:0;} } /*notification*/ #notification .st0,#notification .circle, #notification .ellipse{fill:none;stroke:#FFF;stroke-width:2;stroke-miterlimit:10;} #notification .notif{ -moz-transform:scale(1) translate(0,0); -webkit-transform:scale(1) translate(0,0); -ms-transform:scale(1) translate(0,0); transform:scale(1) translate(0,0); transition:1s; -moz-transform-origin:50% 50%; -ms-transform-origin:50% 50%; -webkit-transform-origin:50% 50%; transform:50% 50%; } #notification:hover .notif{ animation: notificate 1s linear; } @keyframes notificate{ 0%{ -moz-transform:scale(1) translate(0px,0px); -webkit-transform:scale(1) translate(0px,0px); -ms-transform:scale(1) translate(0px,0px); transform:scale(1) translate(0px, 0px); } 12.5%{ -moz-transform:rotate(40deg) scale(0.6) translate(0px, 0px); -webkit-transform:rotate(40deg) scale(0.6) translate(0px, 0px); -ms-transform:rotate(40deg) scale(0.6) translate(0px, 0px); transform:rotate(40deg) scale(0.6) translate(0px, 0px); } 25%{ -moz-transform:rotate(0deg) scale(0.6) translate(0px, 0px); -webkit-transform:rotate(0deg) scale(0.6) translate(0px, 0px); -ms-transform:rotate(0deg) scale(0.6) translate(0px, 0px); transform:rotate(0deg) scale(0.6) translate(0px, 0px); } 37.5%{ -moz-transform:rotate(-40deg) scale(0.6) translate(0px, 0px); -webkit-transform:rotate(-40deg) scale(0.6) translate(0px, 0px); -ms-transform:rotate(-40deg) scale(0.6) translate(0px, 0px); transform:rotate(-40deg) scale(0.6) translate(0px, 0px); } 50%{ -moz-transform:rotate(0deg) scale(0.6) translate(0px, 0px); -webkit-transform:rotate(0deg) scale(0.6) translate(0px, 0px); -ms-transform:rotate(0deg) scale(0.6) translate(0px, 0px); transform:rotate(0deg) scale(0.6) translate(0px, 0px); } 62.5%{ -moz-transform:rotate(40deg) scale(0.6) translate(0px, 0px); -webkit-transform:rotate(40deg) scale(0.6) translate(0px, 0px); -ms-transform:rotate(40deg) scale(0.6) translate(0px, 0px); transform:rotate(40deg) scale(0.6) translate(0px, 0px); } 75%{ -moz-transform:rotate(0deg) scale(0.6) translate(0px, 0px); -webkit-transform:rotate(0deg) scale(0.6) translate(0px, 0px); -ms-transform:rotate(0deg) scale(0.6) translate(0px, 0px); transform:rotate(0deg) scale(0.6) translate(0px, 0px); } 87.5%{ -moz-transform:rotate(-40deg) scale(0.6) translate(0px, 0px); -webkit-transform:rotate(-40deg) scale(0.6) translate(0px, 0px); -ms-transform:rotate(-40deg) scale(0.6) translate(0px, 0px); transform:rotate(-40deg) scale(0.6) translate(0px, 0px); } 100%{ -moz-transform:rotate(0deg) scale(1) translate(0, 0); -webkit-transform:rotate(0deg) scale(1) translate(0, 0); -ms-transform:rotate(0deg) scale(1) translate(0, 0)); transform:rotate(0deg) scale(1) translate(0, 0)); } }

Related: See More


Questions / Comments: