VibeCoderzVibeCoderz
Telegram
All Prompts
Animated Circuit Glow Background preview
backgroundanimatedsvgtailwindvisualambient

Animated Circuit Glow Background

Анимированный SVG фон с эффектом свечения и динамичными линиями. Идеален для темных техно-геройских секций, дашбордов и лендингов.

Prompt

<div class="relative w-full h-full min-h-[600px] overflow-hidden bg-[#0a0a0a]">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

    @keyframes spin-slow {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .animate-spin-slow {
      animation: spin-slow 8s linear infinite;
    }
  </style>

  <!-- Ambient Background Glow -->
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] rounded-full pointer-events-none opacity-60"
    style="background: radial-gradient(circle, rgba(245,158,11,0.06) 0%, rgba(10,10,10,0) 60%); filter: blur(60px);">
  </div>

  <!-- Animated Circuit Board & Laser SVG Background -->
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none opacity-50 scale-150 sm:scale-100">
    <svg width="280" height="320" viewBox="0 0 280 320" fill="none" xmlns="http://www.w3.org/2000/svg"
      class="overflow-visible">
      <g style="filter: drop-shadow(0 0 4px #F59E0B);">
        <path d="M140 -2000V2000" stroke="#F59E0B" stroke-width="0.3" stroke-dasharray="12 12" opacity="0.3">
          <animate attributeName="stroke-dashoffset" from="24" to="0" dur="0.6s" repeatCount="indefinite" />
        </path>
      </g>
      <path d="M140 -2000V2000" stroke="#FFFBEB" stroke-width="0.4" opacity="0.4">
        <animate attributeName="opacity" values="0.1;0.4;0.1" dur="1.2s" repeatCount="indefinite" />
      </path>
      <path d="M140 -2000V40L155 55V2000" stroke="#D97706" stroke-width="0.5" stroke-linecap="round"
        stroke-linejoin="round" opacity="0.2" />
      <path d="M120 -2000V45L105 60V2000" stroke="#D97706" stroke-width="0.5" stroke-linecap="round"
        stroke-linejoin="round" opacity="0.2" />
      <path d="M160 -2000V35L185 60V2000" stroke="#D97706" stroke-width="0.5" stroke-linecap="round"
        stroke-linejoin="round" opacity="0.2" />
      <path d="M100 -2000V50L80 70V2000" stroke="#D97706" stroke-width="0.5" stroke-linecap="round"
        stroke-linejoin="round" opacity="0.2" />
      <path d="M140 -2000V40L155 55V2000" stroke="#FDE68A" stroke-width="0.5" stroke-dasharray="4 12" opacity="0.6">
        <animate attributeName="stroke-dashoffset" from="16" to="0" dur="1s" repeatCount="indefinite" />
      </path>
      <path d="M120 -2000V45L105 60V2000" stroke="#FDE68A" stroke-width="0.5" stroke-dasharray="4 12" opacity="0.6">
        <animate attributeName="stroke-dashoffset" from="16" to="0" dur="1.5s" repeatCount="indefinite" />
      </path>
      <circle r="1.5" fill="#FFFBEB" style="filter: drop-shadow(0 0 4px #FDE68A);">
        <animateMotion dur="25s" repeatCount="indefinite" path="M160 -2000V35L185 60V2000" />
        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="25s" repeatCount="indefinite" />
      </circle>
      <circle r="1.5" fill="#FFFBEB" style="filter: drop-shadow(0 0 4px #FDE68A);">
        <animateMotion dur="31s" repeatCount="indefinite" path="M100 -2000V50L80 70V2000" />
        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="31s" repeatCount="indefinite" />
      </circle>
      <circle r="1.5" fill="#FFFBEB" style="filter: drop-shadow(0 0 4px #FDE68A);">
        <animateMotion dur="22.5s" repeatCount="indefinite" path="M140 -2000V40L155 55V2000" />
        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="22.5s" repeatCount="indefinite" />
      </circle>
      <circle r="1.5" fill="#FFFBEB" style="filter: drop-shadow(0 0 4px #FDE68A);">
        <animateMotion dur="37.5s" repeatCount="indefinite" path="M120 -2000V45L105 60V2000" />
        <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="37.5s" repeatCount="indefinite" />
      </circle>
      <circle cx="155" cy="280" r="2" fill="#D97706">
        <animate attributeName="r" values="1.5;3;1.5" dur="1.5s" repeatCount="indefinite" />
        <animate attributeName="fill" values="#D97706;#FFFBEB;#D97706" dur="1.5s" repeatCount="indefinite" />
      </circle>
      <circle cx="105" cy="240" r="2" fill="#D97706">
        <animate attributeName="r" values="1.5;3;1.5" dur="1.2s" repeatCount="indefinite" />
        <animate attributeName="fill" values="#D97706;#FFFBEB;#D97706" dur="1.2s" repeatCount="indefinite" />
      </circle>
    </svg>
  </div>
</div>
All Prompts