SVG Animation Viewer

🎬 Animation Display

Loading animation...

Ready - Animations will play automatically

00.0s

Animations: 0 Cycle: 1 Speed: 1.0x

🎮 Controls

Playback

Loop Control

Speed Control

Debug & Info

📝 SVG Code Editor

SVG Code Editor Chars: 0

<svg width="1000" height="700" viewBox="0 0 1000 700" style="background: #0a0a12;">
    <defs>
        <linearGradient id="blueWhite" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#00aaff"/>
            <stop offset="100%" stop-color="#ffffff"/>
        </linearGradient>
        <linearGradient id="blueArmor" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#0066cc"/>
            <stop offset="100%" stop-color="#003366"/>
        </linearGradient>
        <linearGradient id="redBlack" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#ff3333"/>
            <stop offset="100%" stop-color="#000000"/>
        </linearGradient>
        <radialGradient id="jointMetal" cx="40%" cy="40%" r="60%">
            <stop offset="0%" stop-color="#cccccc"/>
            <stop offset="100%" stop-color="#666666"/>
        </radialGradient>
    </defs>
    
    
    <line x1="0" y1="550" x2="1000" y2="550" stroke="#444466" stroke-width="3"/>
    
    
    <g id="robot1" transform="translate(300,350)">
        
        <rect x="-40" y="-60" width="80" height="120" rx="5" fill="url(#blueArmor)" stroke="#0066cc" stroke-width="3">
            <animate attributeName="height" values="120;140;120" dur="1s" begin="0s; 14.5s" repeatCount="2" fill="freeze"/>
        </rect>
        <circle cx="0" cy="-80" r="25" fill="#00aaff">
            <animate attributeName="cy" values="-80;-85;-80" dur="0.8s" begin="0s; 14.5s" repeatCount="4" fill="freeze"/>
        </circle>
        
        <rect x="-50" y="-30" width="15" height="60" fill="#00aaff">
            <animateTransform attributeName="transform" type="rotate" values="0;30;0;-20;0" dur="2s" begin="0.5s; 15s" repeatCount="2" fill="freeze"/>
        </rect>
        <rect x="35" y="-30" width="15" height="60" fill="#00aaff">
            <animateTransform attributeName="transform" type="rotate" values="0;-30;0;20;0" dur="2s" begin="0.5s; 15s" repeatCount="2" fill="freeze"/>
        </rect>
    </g>
    
    
    <g id="robot2" transform="translate(700,350)">
        
        <rect x="-40" y="-60" width="80" height="120" rx="5" fill="url(#redBlack)" stroke="#cc0000" stroke-width="3">
            <animate attributeName="height" values="120;140;120" dur="1s" begin="0.2s; 14.7s" repeatCount="2" fill="freeze"/>
        </rect>
        <circle cx="0" cy="-80" r="25" fill="#ff3333">
            <animate attributeName="cy" values="-80;-85;-80" dur="0.8s" begin="0.2s; 14.7s" repeatCount="4" fill="freeze"/>
        </circle>
        
        <rect x="-50" y="-30" width="15" height="60" fill="#ff3333">
            <animateTransform attributeName="transform" type="rotate" values="0;-30;0;20;0" dur="2s" begin="0.7s; 15.2s" repeatCount="2" fill="freeze"/>
        </rect>
        <rect x="35" y="-30" width="15" height="60" fill="#ff3333">
            <animateTransform attributeName="transform" type="rotate" values="0;30;0;-20;0" dur="2s" begin="0.7s; 15.2s" repeatCount="2" fill="freeze"/>
        </rect>
    </g>
    
    
    <text x="500" y="50" text-anchor="middle" fill="#00f3ff" font-family="monospace" font-size="32" font-weight="bold">
        TRANSFORMER ANIMATION
    </text>
    
    
    <g transform="translate(100,620)" opacity="0.7">
        <line x1="0" y1="0" x2="800" y2="0" stroke="#666" stroke-width="3"/>
        <circle id="playhead" cx="0" cy="0" r="8" fill="#00f3ff" opacity="0.8">
            <animate attributeName="cx" values="0;800;0" dur="14.5s" begin="0s" repeatCount="indefinite"/>
        </circle>
    </g>
    
    
    <text x="500" y="670" text-anchor="middle" fill="#00f3ff" font-family="monospace" font-size="16">
        14.5 SECOND CYCLE - CLICK RESET TO LOOP
    </text>
</svg>

💡 IMPORTANT FIXES:

Animations now start automatically with begin="0s"
Speed control works by cloning animations with new durations
Use "Reset All" when changing speed or if animations stop
Animations have fill="freeze" for better control

⚡ SVG ANIMATION VIEWER - FIXED ⚡