Working Brain

HTML
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 650 600"> <g> <g id="a" fill="none" stroke-linejoin="round" stroke="currentcolor" stroke-width="4" stroke-linecap="round"> <path stroke-width="10" style="stroke-dasharray:none;" d="m 474,194.1 c 1.2,-10.6 -0.5,-21.5 -4.9,-31.2 -6.4,-14.2 -18.5,-25.7 -33,-31.4 -1.9,-6.7 -5.7,-12.8 -10.9,-17.5 -7.3,-6.6 -17.2,-10.1 -27,-9.6 -3.5,-6.16 -8.6,-11.38 -14.7,-14.93 -7.9,-4.57 -17.3,-6.34 -26.3,-4.88 -9,1.45 -17.4,6.11 -23.4,12.96 -5.1,5.85 -8.3,13.05 -10,20.65 -1.7,7.5 -1.7,15.3 -1.7,23 l 1.3,224.6 c 0.1,17 2.3,33.9 3.7,50.8 1.3,15.9 0.7,32 -0.8,47.9 -0.8,8.7 -2,17.5 -2,26.3 0,8.7 1.1,17.7 4.7,25.7 5.2,11.9 15.5,21.1 27,27 22,11.3 49.4,11.3 71.5,0.2 19.8,-10 35.1,-28.5 41.1,-49.9 8.9,-3.1 16.9,-8.7 22.9,-15.9 5.9,-7.3 9.8,-16.3 11.1,-25.6 1,-7.5 0.3,-15.3 -2,-22.5 2.7,-3.9 5,-8.1 6.7,-12.5 5.3,-13.6 5,-29.3 -0.6,-42.8 9.4,-7.4 16.5,-17.7 19.9,-29.2 3.3,-11.5 3,-24 -0.9,-35.3 -4.4,-12.7 -13.4,-23.7 -25,-30.6 6.2,-17.3 5.6,-37 -1.6,-53.9 C 493.8,213 485,202 474,194.1 Z"/> <path opacity=".9" class="circuits" d="M429.6 253c.7-9 6.5-15.4 14.2-18 3.6-1 7.5-1.2 11.2-.8 7.6 1 15 4.5 20 10-2.8 2.5-5 5.6-6.3 9.2-3.3 11 2.4 22.2 12.7 25.7-8.7.4-14.7 8-13.4 15.7.7 4 3.2 7.2 4 11 1.4 13.6-12.6 20.4-23.5 16.7-9.4-3.6-16-13-17.5-21.7-8 12.6-25.4 21.7-36.8 17-8.8-4-9.8-13-12-20.8-3.7-14.3-19.4-9.7-25.4-3.5m5.6 84.3c-17-2.7-10.2-24 5-22m4-82.5c-4.2-11.2-21-9.2-23.2-.6-3 11.3 4.8 15 8.6 20.8 1.4 2 2.6 4.2 2.7 6.7-.6 9-11 11.5-15.6 17-6.5 8.7-.8 19.6 9.2 20.5m49.6-170.5c.5 7.6-5.3 14.5-12.5 15-7.8 0-13.6-6.4-13.4-13.7m8.3 89.5c2.2-10.5 11-18.5 21-19.6 10.4-.6 19.7 5.6 23.3 14.5m47.3 77.5c-10 1.8-14 11.7-11.6 20.3 3.4 10 13.3 17.3 22 20-3.5-1.6-7.7-1.5-11 .3-3.5 2-6 5.5-6.6 9-1.7 9.2 17 17 7.2 26.8-8.6 8.6-25-.5-28-11.4-.7-3-1-6.3-1-9.5.4-8.3 0-19.2-9.3-21-7.4-1-13.4 4.2-15.2 10.7-1.3 4.8-.3 10-2 14.6-3.2 9-13 13-21 9.6 3 5.3 3.5 12.2 1 18-2.5 6-8.3 10.6-14.8 11.8 13.2-1.5 22.3 13.5 19 23-4.2 11.7-18.6 19-16.4 32.4 4.2 15.4 22.4 15.5 25.3 3.5.8-6.4-3-12.3-3-18 1-10.4 12-15.3 20.6-11.3 7.7 4 11.2 13.7 9 21-1.4 5-5 9.4-10 11.5 20.3 30.7-25.6 43.3-35.5 23-16.4 17.6-44.7-3.3-33.5-24m125.2-148.4c12-7.2 14-23 4.6-32.3-5.7-5-13.4-6.6-20-4.5M362.7 183c-10.3-7.3-12-20.3-3-28-9.8-6-12.4-18.6-5.6-26.6 9-10 20.8-8.8 27 1.4 2 3.2 2.8 7 2.2 10.7M375 484.2c-3 3.5-7.7 5.5-12.3 5.3-10-1-16.6-10.3-14.6-19.3 3.5-11.7 14.4-11.5 23.5-13.8 5-1.5 10-5 9.3-10.6-1.4-6.6-8.5-8-14-9.2-5.4-1-13.4-4-12-10.6 2-9.8 21.6-4.5 22-15.8.2-13-15.3-6.7-22.5-10.6-13-7.8-5.6-24.4 8-21.8 9.8 2.4 17.4 6 26.6 7 6.8 0 13-3.7 15.6-9.5 4-10.7-3.4-17.2-10.2-21.2-7.8-4.5-16 1.6-27 1.7-6.6 0-16-9-14.2-18 2.7-14.4 16.8-17 24-6.6m4-201.2c10.3-3.7 23-3 30 4.3 4.4 4.6 5.3 13.8 1.8 18.6-5 6.8-12.8 7.3-10.2 14.6 2.3 3.8 7 3.5 10.4 1.4 10-6.8 15.6-14.2 26.4-6.8 11.5 8 9.2 25.3 0 33m-18 233c2.8-11 13.7-15.7 22.5-10.7 5.3 3.5 7.8 9.4 7 15 6-2.8 13.8-3.3 19 .5 9 6.4 15 19.7 6 27-6.3 5-13 2.3-17-3.7-4-6.4-10.6-10.5-17.6-7-4.5 2.7-6.6 7.5-6 12.2m4-266.3c5.2 1.5 9.8 4.5 13.2 8.6 3.4 4 5.6 9.2 6 14.5.7 5.7-.7 11.5-3.6 16.4m-109.6-1.7c-1.3-3-1.6-6.2-1-9.3 2-7.7 8.7-10.7 15-13 3.7-1.2 7.5-2.6 10-5.4 5.2-5.8 4.4-14.4-1-19-6.2-4.7-14.7-3.4-19 2.2m97 78.5c14 1.2 12.2 22.2-2 19-6-1.5-8.7-8.2-13.6-10.7-10.6-5.5-25 6.7-27.4 15 1.5-8.8-1-18.7-8.2-25-6-5.4-13.6-8.8-21.5-9.6m-14.2-45c11 7.5 14.2 21.5 6.7 31.2-6.4 8-17.2 11-25.6 6m68.7-47.4c-3.4-10.5 7.2-19.6 16.6-16.3M390 232c-3.2-3.5-4.8-8.3-4.5-13 1-10.6 10-17.2 19.3-17.7 11.8.2 22.7 8.2 27.6 17.6 3 5.7 4.3 12.5 3.6 19m-41.8 116c.3-4.7 3-11.3 7-14.2 9-6 18.3-2.5 25 3.8 11 10 27.3 14.8 39 7.2"/> </g> </g> <g> <use transform="matrix(-1 0 0 1 640 0)" xlink:href="#a"/> </g> </svg>
SCSS
body { margin: 0; padding: 0; background-color: #1abc9c; color: #2c3e50; } svg { display: block; width: 100%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; height: 100vh; max-width: 30em; margin: 0 auto; } use, path:nth-child(2) { animation: waves 60s linear infinite } @keyframes waves { 0% { stroke-dasharray: 120 20 } 100% { stroke-dasharray: 120 20; stroke-dashoffset: 12000; } } svg > g { transform-origin: 50% 50%; animation: pulse ease .2s infinite alternate; &:nth-child(2) { animation-delay:.1s } } @keyframes pulse { 0% { transform: scale(.995) } 100% { transform: scale(1); } } path:nth-child(2) { opacity: 1; } path { fill: pink; }
JAVASCRIPT
Expand for more options Login