Frequenza del flusso quantistico

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

29 August 2024

20 May 2025

<g transform="translate(900, 0) scale(-1, 1)">
        <rect class="spectrum-bar" x="50" y="0" width="15" height="120" fill="url(#grad-low)" opacity="0.8">
          <animate attributeName="height" values="120;150;180;120" dur="0.88s" repeatCount="indefinite" begin="0.04s"/>
          <animate attributeName="y" values="0;-20;30;-20;0" dur="0.88s" repeatCount="indefinite" begin="0.04s"/>
        </rect>
        <rect class="spectrum-bar" x="80" y="0" width="15" height="110" fill="url(#grad-low)" opacity="0.8">
          <animate attributeName="height" values="110;140;160;110" dur="0.86s" repeatCount="indefinite" begin="0.08s"/>
          <animate attributeName="y" values="0;-15;25;-15;0" dur="0.86s" repeatCount="indefinite" begin="0.08s"/>
        </rect>
        <rect class="spectrum-bar" x="200" y="0" width="12" height="120" fill="url(#grad-mid)" opacity="0.8">
          <animate attributeName="height" values="120;150;180;120" dur="0.76s" repeatCount="indefinite" begin="0.20s"/>
          <animate attributeName="y" values="0;-20;30;-20;0" dur="0.76s" repeatCount="indefinite" begin="0.20s"/>
        </rect>
        <rect class="spectrum-bar" x="350" y="0" width="10" height="80" fill="url(#grad-high)" opacity="0.9">
          <animate attributeName="height" values="80;120;140;80" dur="0.56s" repeatCount="indefinite" begin="0.32s"/>
          <animate attributeName="y" values="0;-25;35;-25;0" dur="0.56s" repeatCount="indefinite" begin="0.32s"/>
        </rect>
      </g>

<rect class="spectrum-bar" x="860" y="0" width="20" height="180" fill="url(#grad-high)" opacity="0.9">
        <animate attributeName="height" values="180;220;250;180" dur="0.80s" repeatCount="indefinite" begin="0.08s"/>
        <animate attributeName="y" values="0;-70;-20;-60;0" dur="0.80s" repeatCount="indefinite" begin="0.08s"/>
      </rect>
      <rect class="spectrum-bar" x="895" y="0" width="20" height="160" fill="url(#grad-mid)" opacity="0.9">
        <animate attributeName="height" values="160;200;230;160" dur="0.76s" repeatCount="indefinite" begin="0.12s"/>
        <animate attributeName="y" values="0;-70;-15;-55;0" dur="0.76s" repeatCount="indefinite" begin="0.12s"/>
      </rect>
      <rect class="spectrum-bar" x="930" y="0" width="20" height="140" fill="url(#grad-low)" opacity="0.9">
        <animate attributeName="height" values="140;170;200;140" dur="0.84s" repeatCount="indefinite" begin="0.16s"/>
        <animate attributeName="y" values="0;-70;-10;-50;0" dur="0.84s" repeatCount="indefinite" begin="0.16s"/>
      </rect>
      <rect class="spectrum-bar" x="965" y="0" width="20" height="200" fill="url(#grad-high)" opacity="0.9">
        <animate attributeName="height" values="200;230;260;200" dur="0.78s" repeatCount="indefinite" begin="0.20s"/>
        <animate attributeName="y" values="0;-90;-20;-75;0" dur="0.78s" repeatCount="indefinite" begin="0.20s"/>
      </rect>
      <rect class="spectrum-bar" x="1000" y="0" width="20" height="190" fill="url(#grad-mid)" opacity="0.9">
        <animate attributeName="height" values="190;220;240;190" dur="0.82s" repeatCount="indefinite" begin="0.24s"/>
        <animate attributeName="y" values="0;-80;-15;-60;0" dur="0.82s" repeatCount="indefinite" begin="0.24s"/>
      </rect>
      <rect class="spectrum-bar" x="1035" y="0" width="20" height="180" fill="url(#grad-low)" opacity="0.9">
        <animate attributeName="height" values="180;210;230;180" dur="0.80s" repeatCount="indefinite" begin="0.28s"/>
        <animate attributeName="y" values="0;-80;-12;-55;0" dur="0.80s" repeatCount="indefinite" begin="0.28s"/>
      </rect>

<g opacity="0.8">
        <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(150,50,150,0.6)" stroke-width="2">
          <animate attributeName="r" values="5;180" dur="2.4s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="0.9;0" dur="2.4s" repeatCount="indefinite"/>
        </circle>
        <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(250,0,250,0.6)" stroke-width="2">
          <animate attributeName="r" values="5;180" dur="2.4s" begin="0.8s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="0.9;0" dur="2.4s" begin="0.8s" repeatCount="indefinite"/>
        </circle>
        <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(150,0,150,0.6)" stroke-width="2">
          <animate attributeName="r" values="5;180" dur="2.4s" begin="1.6s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="0.9;0" dur="2.4s" begin="1.6s" repeatCount="indefinite"/>
        </circle>
        <circle cx="960" cy="540" r="5" fill="none" stroke="rgba(200,0,50,0.6)" stroke-width="2">
          <animate attributeName="r" values="5;180" dur="2.4s" begin="2.4s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="0.9;0" dur="2.4s" begin="2.4s" repeatCount="indefinite"/>
        </circle>
      </g>
    </g>

CSS

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

/* Background color and style */
            body {
                background-repeat: 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(200, 50, 200, 0.3), transparent);
  animation: scanline 3.2s linear infinite;
  pointer-events: none;
}

body, html { 
  background-color: #000;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

Frequenza del flusso quantistico

Consigliato

Un codice di Skyrreum

Un codice di staticcloud996

HTML

CSS

JS

Consigliato

Un codice di Skyrreum

Un codice di staticcloud996

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS