Prompt Details
Model
(gemini-3.5-flash)
Token size
3,948
Example input
[Describe the visual subject and geometric style. e.g., A minimalist robotic arm moving a glass sphere on a conveyor belt]: A single, elegant horizontal line that splits into complex, vibrating quantum wave functions (sine and cosine waves overlapping).
[Describe the exact physics and choreography of the animation. Enter "None" for static SVGs. e.g., Multi-joint mechanical articulation, elastic bounce, smooth pendulum swing, or UI pulse]: High-frequency harmonic oscillation, simulating a plucked musical string or a quantum particle wave, dampening down to a flat line and repeating.
[Provide specific hex codes, general color names, or themes. e.g., #FF5722, 'currentColor' for CSS inheritance, or 'Cyberpunk Neon']: #FFFFFF (Base string), #4DA6FF (Quantum glow overlay).
[Define the viewBox grid size. e.g., 24x24 for standard UI icons, 100x100 for complex hero illustrations.]: 48x48
[Set to `true` for an infinite animation loop, or `false` for a single-play interaction. Default: true]: true
Example output
**(Quantum Wave Function Oscillation)**
*Animation Thought Process*:
To create a mathematically precise and elegant representation of a single horizontal line splitting into complex, vibrating quantum wave functions within a 48x48 canvas, I will implement a structural multi-path SVG configuration.
1. **Canvas & Layout**: The canvas is 48x48. The baseline horizontal string rests exactly in the vertical middle at $y=24$, spanning from $x=0$ to $x=48$.
2. **Path Morphing for Realism**: I will configure separate `<path>` nodes targeting the baseline, a primary sine component, and a cosine-shifted high-frequency component. By using pure CSS `@keyframes` manipulating the `d` attribute, I can achieve continuous fluid morphing.
3. **Harmonic Damping**: The keyframes will start from a flat line, burst into high-frequency maximum amplitude configurations, and progressively step down through decaying amplitudes back to a completely flat state to create a perfect loop.
4. **Colorization & Layers**: The base string will use a clean crisp `#FFFFFF`. The quantum interference waves will leverage `#4DA6FF` with an integrated soft glow using standard vector blending modes and stroke-opacity variations to maintain clean visibility without heavy raster performance penalties on a 48x48 frame.
5. **Master Synchronization**: A unified CSS variable `--duration: 4s;` will manage the shared timeline.
```xml
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="100%" height="100%">
<defs>
<filter id="quantumGlow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="1.2" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<style>
.bg-dark {
fill: #030712;
}
.wave-base {
stroke: #ffffff;
stroke-width: 0.75;
fill: none;
stroke-linecap: round;
animation: waveAnimateOne var(--duration) cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
.wave-overlay {
stroke: #4DA6FF;
stroke-width: 0.5;
fill: none;
stroke-linecap: round;
opacity: 0.8;
filter: url(#quantumGlow);
animation: waveAnimateTwo var(--duration) cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
.wave-secondary {
stroke: #00FFCC;
stroke-width: 0.4;
fill: none;
stroke-linecap: round;
opacity: 0.6;
animation: waveAnimateThree var(--duration) cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
@keyframes waveAnimateOne {
0% { d: path("M 0,24 Q 12,24 24,24 T 48,24"); }
10% { d: path("M 0,24 Q 12,12 24,24 T 48,24"); }
25% { d: path("M 0,24 Q 12,34 24,14 T 48,24"); }
40% { d: path("M 0,24 Q 12,17 24,29 T 48,24"); }
55% { d: path("M 0,24 Q 12,28 24,21 T 48,24"); }
70% { d: path("M 0,24 Q 12,22 24,25 T 48,24"); }
85% { d: path("M 0,24 Q 12,24 24,24 T 48,24"); }
100% { d: path("M 0,24 Q 12,24 24,24 T 48,24"); }
}
@keyframes waveAnimateTwo {
0% { d: path("M 0,24 C 12,24 12,24 24,24 C 36,24 36,24 48,24"); }
12% { d: path("M 0,24 C 8,6 16,42 24,24 C 32,6 40,42 48,24"); }
28% { d: path("M 0,24 C 8,36 16,8 24,24 C 32,40 40,12 48,24"); }
44% { d: path("M 0,24 C 8,16 16,32 24,24 C 32,16 40,32 48,24"); }
60% { d: path("M 0,24 C 8,29 16,20 24,24 C 32,28 40,19 48,24"); }
75% { d: path("M 0,24 C 8,22 16,25 24,24 C 32,23 40,26 48,24"); }
90% { d: path("M 0,24 C 12,24 12,24 24,24 C 36,24 36,24 48,24"); }
100% { d: path("M 0,24 C 12,24 12,24 24,24 C 36,24 36,24 48,24"); }
}
@keyframes waveAnimateThree {
0% { d: path("M 0,24 Q 6,24 12,24 T 24,24 T 36,24 T 48,24"); }
15% { d: path("M 0,24 Q 6,14 12,24 T 24,24 T 36,34 T 48,24"); }
32% { d: path("M 0,24 Q 6,30 12,24 T 24,24 T 36,18 T 48,24"); }
48% { d: path("M 0,24 Q 6,20 12,24 T 24,24 T 36,27 T 48,24"); }
64% { d: path("M 0,24 Q 6,26 12,24 T 24,24 T 36,22 T 48,24"); }
80% { d: path("M 0,24 Q 6,24 12,24 T 24,24 T 36,24 T 48,24"); }
100% { d: path("M 0,24 Q 6,24 12,24 T 24,24 T 36,24 T 48,24"); }
}
</style>
<rect class="bg-dark" width="48" height="48" />
<g style="--duration: 3.5s;">
<path class="wave-overlay" d="M 0,24 C 12,24 12,24 24,24 C 36,24 36,24 48,24" />
<path class="wave-secondary" d="M 0,24 Q 6,24 12,24 T 24,24 T 36,24 T 48,24" />
<path class="wave-base" d="M 0,24 Q 12,24 24,24 T 48,24" />
</g>
</svg>
```
Final Thoughts: The architecture sets absolute bezier control structures that interpolate smoothly inside modern render engines. By mapping staggered frequencies across three independent paths under a single shared clock wrapper, we get an organic quantum interference pattern that gracefully flattens into a singular resting baseline.
**Clarifying Questions**
1. Would you like the damping phase to remain completely flat for a longer period of time at the end of the loop to emphasize the resting state?
2. Should I introduce an explicit particle marker (like a tiny neon geometric circle) moving along the wave to represent the localized quantum state?
In-order to prevent generating images instead of SVG Animations, make sure to start your revisions or followups with `[Only Edit and Generate the SVG text]`.
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
7
Views
GEMINI-3.5-FLASH
Stop fighting with broken XML, detached joints, and messy CSS keyframes. This engineering-grade prompt transforms LLMs into professional Vector Graphics Animators. Designed for Everyone, including designers and marketers, this prompt uses strict negative constraints, forward kinematics, and a unified master clock to generate mathematically precise, self-contained, CSS-animated SVGs. Perfect for complex loading screens, dynamic UI icons, and web illustrations.
...more
Added 1 week ago
