Source
svg<svg viewBox="0 0 640 360" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#090f1f" />
<stop offset="100%" stop-color="#12263a" />
</linearGradient>
<linearGradient id="beam" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#9dff5d" />
<stop offset="100%" stop-color="#46c7ff" />
</linearGradient>
<filter id="glow" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur stdDeviation="10" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<rect width="640" height="360" fill="url(#bg)" />
<g opacity="0.2">
<path d="M0 80 H640 M0 140 H640 M0 200 H640 M0 260 H640" stroke="#ffffff" stroke-width="1">
<animate attributeName="opacity" values="0.05;0.2;0.05" dur="3s" repeatCount="indefinite" />
</path>
</g>
<g transform="translate(320 180)">
<rect x="-180" y="-80" width="360" height="160" rx="22" fill="#0a1424" stroke="rgba(255,255,255,0.2)" />
<rect x="-170" y="-70" width="340" height="140" rx="16" fill="rgba(255,255,255,0.03)" />
<rect x="-145" y="-14" width="290" height="24" rx="12" fill="#132f47" />
<rect x="-145" y="-14" width="120" height="24" rx="12" fill="url(#beam)" filter="url(#glow)">
<animate attributeName="x" values="-145;25;-145" dur="2.4s" repeatCount="indefinite" />
</rect>
<text x="0" y="-30" fill="#e6edf6" text-anchor="middle" font-family="IBM Plex Sans, sans-serif" font-size="23" font-weight="700">SVG Motion Lab</text>
<text x="0" y="42" fill="#9bb3cb" text-anchor="middle" font-family="IBM Plex Sans, sans-serif" font-size="15">Create smooth MP4 exports in seconds</text>
</g>
<circle cx="88" cy="300" r="9" fill="#ff7f66">
<animateMotion dur="4.2s" repeatCount="indefinite" path="M0 0 Q 170 -180, 370 -45 T 552 -154" />
</circle>
<circle cx="88" cy="300" r="4" fill="#9dff5d" opacity="0.7">
<animateMotion dur="4.2s" begin="0.22s" repeatCount="indefinite" path="M0 0 Q 170 -180, 370 -45 T 552 -154" />
</circle>
<circle cx="320" cy="180" r="110" fill="none" stroke="url(#beam)" stroke-width="2" opacity="0.28" stroke-dasharray="8 10">
<animateTransform attributeName="transform" type="rotate" from="0 320 180" to="360 320 180" dur="8s" repeatCount="indefinite" />
</circle>
</svg>
Output Settings
Inline scripts in sandbox
Live Preview
640×360 px