galaxia ciberpunk

Abrir en el editor Publica tu código

HTML

<body>

<g transform="translate(900, 0) scale(-1, 1)">
        <rect class="spectrum-bar" x="50" y="0" width="15" height="80" fill="url(#grad-low)" opacity="0.8">
          <animate attributeName="height" values="80;180;120;200;80" dur="0.96s" repeatCount="indefinite"/>
          <animate attributeName="y" values="0;-100;-40;-120;0" dur="0.96s" repeatCount="indefinite"/>
        </rect>
        <rect class="spectrum-bar" x="80" y="0" width="15" height="100" fill="url(#grad-low)" opacity="0.8">
          <animate attributeName="height" values="100;160;90;180;100" dur="0.88s" repeatCount="indefinite" begin="0.04s"/>
          <animate attributeName="y" values="0;-60;10;-80;0" dur="0.88s" repeatCount="indefinite" begin="0.04s"/>
        </rect>
        <rect class="spectrum-bar" x="200" y="0" width="12" height="90" fill="url(#grad-mid)" opacity="0.8">
          <animate attributeName="height" values="90;150;110;140;90" dur="0.72s" repeatCount="indefinite" begin="0.12s"/>
          <animate attributeName="y" values="0;-60;-20;-50;0" dur="0.72s" repeatCount="indefinite" begin="0.12s"/>
        </rect>
        <rect class="spectrum-bar" x="350" y="0" width="10" height="70" fill="url(#grad-high)" opacity="0.9">
          <animate attributeName="height" values="70;130;80;120;70" dur="0.56s" repeatCount="indefinite" begin="0.24s"/>
          <animate attributeName="y" values="0;-60;-10;-50;0" dur="0.56s" repeatCount="indefinite" begin="0.24s"/>
        </rect>
      </g>

<rect class="spectrum-bar" x="860" y="0" width="20" height="150" fill="url(#grad-high)" opacity="0.9">
        <animate attributeName="height" values="150;250;180;230;150" dur="0.80s" repeatCount="indefinite" begin="0.08s"/>
        <animate attributeName="y" values="0;-100;-30;-80;0" dur="0.80s" repeatCount="indefinite" begin="0.08s"/>
      </rect>
      <rect class="spectrum-bar" x="905" y="0" width="20" height="130" fill="url(#grad-mid)" opacity="0.9">
        <animate attributeName="height" values="130;220;160;210;130" dur="0.96s" repeatCount="indefinite" begin="0.04s"/>
        <animate attributeName="y" values="0;-80;-20;-50;0" dur="0.96s" repeatCount="indefinite" begin="0.04s"/>
      </rect>
      <rect class="spectrum-bar" x="950" y="0" width="20" height="170" fill="url(#grad-low)" opacity="0.9">
        <animate attributeName="height" values="170;270;190;250;170" dur="1.04s" repeatCount="indefinite" begin="0.08s"/>
        <animate attributeName="y" values="0;-100;-20;-80;0" dur="1.04s" repeatCount="indefinite" begin="0.08s"/>
      </rect>
      <rect class="spectrum-bar" x="995" y="0" width="20" height="140" fill="url(#grad-high)" opacity="0.9">
        <animate attributeName="height" values="140;230;170;220;140" dur="0.96s" repeatCount="indefinite" begin="0.12s"/>
        <animate attributeName="y" values="0;-80;-20;-50;0" dur="0.96s" repeatCount="indefinite" begin="0.12s"/>
      </rect>
      <rect class="spectrum-bar" x="1040" y="0" width="20" height="160" fill="url(#grad-mid)" opacity="0.9">
        <animate attributeName="height" values="160;240;180;230;160" dur="0.92s" repeatCount="indefinite" begin="0.16s"/>
        <animate attributeName="y" values="0;-70;-10;-40;0" dur="0.92s" repeatCount="indefinite" begin="0.16s"/>
      </rect>
    </g>

<g opacity="0.8">
      <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(100,0,200,0.6)" stroke-width="2">
        <animate attributeName="r" values="5;200" begin="0s" dur="2.8s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.9;0" begin="0s" dur="2.8s" repeatCount="indefinite"/>
      </circle>
      <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(200,0,190,0.6)" stroke-width="2" begin="0.4s">
        <animate attributeName="r" values="5;200" begin="0.4s" dur="2.8s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.9;0" begin="0.4s" dur="2.8s" repeatCount="indefinite"/>
      </circle>
      <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(255,100,220,0.6)" stroke-width="2" begin="0.8s">
        <animate attributeName="r" values="5;200" begin="0.8s" dur="2.8s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.9;0" begin="0.8s" dur="2.8s" repeatCount="indefinite"/>
      </circle>
      <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(100,100,220,0.6)" stroke-width="2" begin="1.2s">
        <animate attributeName="r" values="5;200" begin="1.2s" dur="2.8s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.9;0" begin="1.2s" dur="2.8s" repeatCount="indefinite"/>
      </circle>
    </g>
  </svg>
</div>
        </body>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            }

/* 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: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            top:0;
            left:0;
            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(100,0,255, 0.3), transparent);
  animation: scanline 3.2s linear infinite;
  pointer-events: none;
}

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS