Electric Storm

585 soundasart

<rect class="spectrum-bar" x="1120" y="0" width="40" height="150" fill="url(#grad-high)" opacity="0.9">
        <animate attributeName="height" values="150;220;280;320;150" dur="0.82s" repeatCount="indefinite" begin="0.24s"/>
        <animate attributeName="y" values="0;-100;-200;-300;0" dur="0.82s" repeatCount="indefinite" begin="0.24s"/>
      </rect>
      <rect class="spectrum-bar" x="1160" y="0" width="40" height="160" fill="url(#grad-mid)" opacity="0.9" begin="0.32s">
        <animate attributeName="height" values="160;240;320;360;160" dur="0.80s" repeatCount="indefinite" begin="0.32s"/>
        <animate attributeName="y" values="0;-120;-240;-330;0" dur="0.80s" repeatCount="indefinite" begin="0.32s"/>
      </rect>
      <rect class="spectrum-bar" x="1200" y="0" width="40" height="190" fill="url(#grad-low)" opacity="0.9" begin="0.40s">
        <animate attributeName="height" values="190;290;410;440;190" dur="0.94s" repeatCount="indefinite" begin="0.40s"/>
        <animate attributeName="y" values="0;-150;-310;-410;0" dur="0.94s" repeatCount="indefinite" begin="0.40s"/>
      </rect>
      <rect class="spectrum-bar" x="1240" y="0" width="40" height="110" fill="url(#grad-high)" opacity="0.9" begin="0.48s">
        <animate attributeName="height" values="110;190;290;330;110" dur="0.78s" repeatCount="indefinite" begin="0.48s"/>
        <animate attributeName="y" values="0;-100;-230;-320;0" dur="0.78s" repeatCount="indefinite" begin="0.48s"/>
      </rect>
      <rect class="spectrum-bar" x="1280" y="0" width="40" height="130" fill="url(#grad-mid)" opacity="0.9" begin="0.56s">
        <animate attributeName="height" values="130;240;310;350;130" dur="0.74s" repeatCount="indefinite" begin="0.56s"/>
        <animate attributeName="y" values="0;-120;-240;-330;0" dur="0.74s" repeatCount="indefinite" begin="0.56s"/>
      </rect>
    </g>

<g opacity="0.8" begin="-0.2s">
      <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(255,100,255,0.6)" stroke-width="2">
        <animate attributeName="r" values="5;180" dur="3.24s" repeatCount="indefinite" begin="-0.2s"/>
        <animate attributeName="opacity" values="0.9;0" dur="3.24s" repeatCount="indefinite" begin="-0.2s"/>
      </circle>
      <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(200,0,255,0.6)" stroke-width="2" begin="1.04s">
        <animate attributeName="r" values="5;180" dur="3.24s" repeatCount="indefinite" begin="1.04s"/>
        <animate attributeName="opacity" values="0.9;0" dur="3.24s" repeatCount="indefinite" begin="1.04s"/>
      </circle>
      <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(100,0,255,0.6)" stroke-width="2" begin="2.08s">
        <animate attributeName="r" values="5;180" dur="3.24s" repeatCount="indefinite" begin="2.08s"/>
        <animate attributeName="opacity" values="0.9;0" dur="3.24s" repeatCount="indefinite" begin="2.08s"/>
      </circle>
    </g>
  </svg>
</div>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            }
            @keyframes scanline {
              0% { transform: translateY(-100%); }
              100% { transform: translateY(100vh); }

}
				body{
                background-repeat: no-repeat;   
                background: url('/thumb')  no-repeat;
                background-position: center center;
                background-size: cover;    
                background-attachment: fixed;          
                background-color: black; 
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100vh;
                width: 100vw; 
                overflow: hidden;
				}

@keyframes growFast {
              0% { transform: scale(0.01); }
              90% { transform: scale(0.01); }
              100% { transform: scale(1); }
            }

/* Background color and style */
            body {
                background-repeat: no-repeat;   
                background: url('/thumb')  no-repeat;
                background-position: center center;
                background-size: cover;    
                background-attachment: fixed;          
                background-color: black; 
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100vh;
                width: 100vw; 
                overflow: hidden;
            }

/* Animation container */
            .container {
            position: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            top:10%;
            left:10%;
            overflow: hidden;
            background: transparent;
            }

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

.scanline {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(transparent, rgba(0, 200, 255, 0.3), transparent);
  animation: scanline 2.56s linear infinite;
  pointer-events: none;
}

Electric Storm

Recommended