Frecuencia de flujo cuántico

Abrir en el editor Publica tu código

Recomendado

3 June 2025

Código gráfico interactivo de dragón SVG

HTML

<body>

<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;
}

Frecuencia de flujo cuántico

Recomendado

Un código de alejandrokundrah

Boxeo aleatorio

Código gráfico interactivo de dragón SVG

HTML

CSS

JS

Recomendado

Un código de alejandrokundrah

Boxeo aleatorio

Código gráfico interactivo de dragón SVG

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS