<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 224.3 94" enable-background="new 0 0 224.3 94" xml:space="preserve"> <polyline fill="none" stroke="#B5E3F0" stroke-width="0.8429" stroke-miterlimit="10" points="0.7,9.9 56.3,9.9 56.3,74.7 102.7,74.7 102.7,28.3 214.3,28.3 214.3,9.9 148.7,9.9 148.7,84.3 19.3,84.3 19.3,19 139.7,19 139.7,74.7 111.7,74.7 111.7,37.9 28.3,37.9 28.3,74.7 10.3,74.7 10.3,0.7 131,0.7 131,9.9 65.3,9.9 65.3,28.3 94,28.3 94,56.3 65.3,56.3 65.3,65.3 131,65.3 131,37.9 214.3,37.9 214.3,84 158,84 158,19 205.2,19 205.2,75 167.7,75 167.7,47.3 195.8,47.3 195.8,64.7 177,64.7 177,56.3 186.3,56.3 186.3,74.7 "/> <polyline fill="none" stroke="#B5E3F0" stroke-width="0.8429" stroke-miterlimit="10" points="195.8,1.2 195.8,47.3 121.7,47.3 121.7,93.4 223.3,93.4 223.3,56.3 19.3,56.3 19.3,28.3 65,28.3 65,93.4 37.3,93.4 37.3,74.7 28.3,74.7 28.3,65.3 37.3,65.3 37.3,56.3 46.7,56.3 46.7,47.3 56,47.3 94,47.3 94,9.9 139.3,9.9 186.3,9.9 186.7,47.3 177,47.3 177,56.3 177,64.7 158,64.7 158,93.4 0.7,93.4 0.7,47.3 46.7,47.3 "/> <polyline fill="none" stroke="#B5E3F0" stroke-width="0.8429" stroke-miterlimit="10" points="102.7,93.4 102.7,0.7 111.7,0.7 111.7,37.9 131,37.9 131,9.9 139.7,9.9 139.7,19 158,19 158,0.7 177,0.7 177,47.3 223.3,47.3 223.3,0.7 186.7,0.7 149.3,0.7 139.7,0.7 131,0.7 121.7,0.7 121.7,47.3 74.8,47.3 74.8,0.7 "/> <polyline fill="none" stroke="#B5E3F0" stroke-width="0.8429" stroke-miterlimit="10" points="0.7,19.3 19.3,19.3 19.3,0.7 28,0.7 28,9.9 37.7,9.9 37.7,0.7 47,0.7 47,9.9 56.3,9.9 56.3,0.7 65.3,0.7 65.3,9.9 84.3,9.9 84.3,0.7 94,0.7 94,28.3 94,93.4 83.7,93.4 83.7,47.3 84.3,9.9 74.8,9.9 74.8,93.4 "/> <polyline fill="none" stroke="#B5E3F0" stroke-width="0.8429" stroke-miterlimit="10" points="223.3,37.9 214.3,37.9 214.3,0.7 205.2,0.7 205.2,19 223.3,19 223.3,9.9 214.3,9.9 "/> <polyline fill="none" stroke="#B5E3F0" stroke-width="0.8429" stroke-miterlimit="10" points="28,9.9 28,37.9 38.3,37.9 38.3,9.9 47,9.9 47,37.9 "/> <polyline fill="none" stroke="#B5E3F0" stroke-width="0.8429" stroke-miterlimit="10" points="0.7,0.7 0.7,37.9 28,37.9 "/> <polyline fill="none" stroke="#B5E3F0" stroke-width="0.8429" stroke-miterlimit="10" points="10.3,93.4 10.3,74.7 59.3,74.7 "/> </svg>
body { background: #BFE6F1; } svg.grid-fw { width: 100%; } @keyframes offset { from { stroke-dashoffset: 4000; } to { stroke-dashoffset: 300; } } polyline { animation: offset 40s linear alternate infinite; animation-delay: 40s; -webkit-animation: offset 40s linear alternate infinite; -webkit-animation-delay: 0; stroke-dasharray: 500; stroke-dashoffset: 500; stroke: #b5e3f0; stroke: rgba(255, 255, 255, 0.25); }