"svg"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/bradarnett/pen/bqoJOb?limit=all&page=24&q=svg" /> <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> <style class="cp-pen-styles">body { background-color: #282828; font-family: 'Montserrat', sans-serif; } svg { cursor: pointer; left: 50%; position: absolute; top: 50%; transition: transform 0.2s cubic-bezier(0.55, 0, 0.1, 1); will-change: transform; } .icon:hover .outer { transform: translateX(-50%) translateY(-50%) translateX(-11px) translateY(-19px); } .icon:hover .gradient { transform: translateX(-50%) translateY(-50%) translateX(11px) translateY(19px); } .outer { transform: translateX(-50%) translateY(-50%) translateX(-15px) translateY(-22.5px); z-index: 1; } .outer path { stroke-dasharray: 300px; stroke-dashoffset: -300px; transition: stroke-dashoffset 2.8s linear; } .outer path.stroke { stroke-dashoffset: 0; } .gradient { transform: translateX(-50%) translateY(-50%) translateX(15px) translateY(22.5px); transition: transform .2s; z-index: 2; } .gradient .border path { stroke-dasharray: 555px; stroke-dashoffset: -555px; transition: stroke-dasharray 2s linear; } .gradient .border path.animate { animation: drawPath linear forwards infinite; animation-duration: 4s; stroke-dasharray: 138.75px; } .gradient .border path.animate:nth-of-type(2) { animation-delay: 1s; } .gradient .border path.animate:nth-of-type(3) { animation-delay: 2s; } .gradient .border path.animate:nth-of-type(4) { animation-delay: 2s; } .gradient .line path { stroke-dasharray: 121px; stroke-dashoffset: -121px; transition: stroke-dasharray 1s linear 1s; } .gradient .line path.animate { animation: drawPath linear forwards infinite; animation-duration: 2s; stroke-dasharray: 60.5px; } .gradient .line path:nth-child(2) { animation-delay: 1s; } .gradient .line--3 path { stroke-dasharray: 70px; stroke-dashoffset: -70px; transition: stroke-dasharray 1s linear 1s; } .gradient .line--3 path.animate { stroke-dasharray: 35px; } .no-offset { animation: none !important; stroke-dasharray: 0 !important; stroke-dashoffset: 0px !important; transition: none !important; } @keyframes drawPath { to { stroke-dashoffset: 0px; } } </style></head><body> <div class="icon"> <svg class="gradient" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="166" height="131" viewBox="0 0 166 131"> <defs> <linearGradient id="a" y1="65.5" x2="166" y2="65.5" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#ff0"/> <stop offset="1" stop-color="aqua"/> </linearGradient> <linearGradient id="b" x1="125.07" y1="-22.36" x2="39.19" y2="126.38" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#ff0"/> <stop offset="1" stop-color="aqua"/> </linearGradient> <linearGradient id="c" x1="148.87" y1="116.37" x2="17.13" y2="-15.37" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#ff0"/> <stop offset="1" stop-color="aqua"/> </linearGradient> <linearGradient id="d" x1="-7.92" y1="24.22" x2="169.54" y2="88.81" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#ff0"/> <stop offset="1" stop-color="aqua"/> </linearGradient> </defs> <g class="border"> <path d="M163,3V98H48v30L23,98H3V3H163Z" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" stroke="url(#a)"/> <path d="M163,3V98H48v30L23,98H3V3H163Z" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" stroke="url(#b)"/> <path d="M163,3V98H48v30L23,98H3V3H163Z" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" stroke="url(#c)"/> <path d="M163,3V98H48v30L23,98H3V3H163Z" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" stroke="url(#d)"/> </g> <g class="line line--1"> <path d="M141.35,22.5H21.25" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" stroke="url(#a)"/> <path d="M141.35,22.5H21.25" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" stroke="url(#c)"/> </g> <g class="line line--2"> <path d="M141.35,42.5H21.25" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" stroke="url(#b)"/> <path d="M141.35,42.5H21.25" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" stroke="url(#d)"/> </g> <g class="line line--3"> <path d="M91.26,62.5h-70" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" stroke="url(#c)"/> <path d="M91.26,62.5h-70" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" stroke="url(#a)"/> </g> </svg> <svg class="outer" xmlns="http://www.w3.org/2000/svg" width="166.86" height="101.86" viewBox="0 0 166.86 101.86"> <title>outer</title> <path d="M23.43,98.43h-20v-95h160v20" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.86"/> </svg> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >var paths = document.getElementsByTagName('path'), stroke = 'stroke', animate = 'animate', nooffset = 'no-offset'; var isSafari = /constructor/i.test(window.HTMLElement); if (isSafari){ for (var x = 0; x < paths.length; x++){if (window.CP.shouldStopExecution(1)){break;} paths[x].classList.add(nooffset); } window.CP.exitedLoop(1); } setTimeout( function(){ for (var x = 0; x < paths.length; x++){if (window.CP.shouldStopExecution(2)){break;} paths[x].classList.add(stroke); paths[x].classList.add(animate); } window.CP.exitedLoop(2); }, 1000); //# sourceURL=pen.js </script> </body></html>

Related: See More

BLK• Design System

Questions / Comments: