All Prompts
All Prompts

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>