"Animated SVG Icon"
Bootstrap 4.1.1 Snippet by subhash4web

<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> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 306.32 194.61"> <defs><style>.cls-1{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:5;}</style></defs> <title>Asset 3</title> <g id="Layer_2" data-name="Layer 2"> <g id="Layer_1-2" data-name="Layer 1"> <path class="cls-1 RGywdXDzz_0" d="M79.22,16.45V.5H27.09v16H.5V194.11H305.82V16.45ZM152.09,159a51.6,51.6,0,1,1,51.6-51.6A51.6,51.6,0,0,1,152.09,159ZM256.88,62.2a14.9,14.9,0,1,1,14.9-14.9A14.9,14.9,0,0,1,256.88,62.2Z"/> </g> </g> <style> .RGywdXDzz_0 { stroke-dasharray: 1700; stroke-dashoffset: 1700; animation: dash 5s linear alternate infinite; } @keyframes dash { from { stroke-dashoffset: 1700; } to { stroke-dashoffset: 0; } } </style> </svg> </div>
div{background-color:#0a72f3; position:absolute; top:0px; bottom:0px; right:0px; left:0px;padding:2%; text-align:center} svg{ height:200px; }

Related: See More


Questions / Comments: