Electric Storm

Open In Editor Publish Your Code

<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

CSS Blue Electric Border Effect

Electric Monster

Electric button

HTML

CSS

JS

Recommended

CSS Blue Electric Border Effect

Electric Monster

Electric button

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS