(Inline) Animation

• Avoid inline animation

• Difficult to make changes to

• Content, presentation, animation, etc. should be kept separate

    <!-- Pattern definition -->
    <pattern id="gridPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#ddd" stroke-width="1"/>
    </pattern>

    <!-- Filter for glow effect -->
    <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"/>
        <feColorMatrix in="blur" type="saturate" values="2"/>
    </filter>

    <!-- Mask for fading effect -->
    <mask id="fadeMask">
        <linearGradient id="fadeGradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" style="stop-color:white;stop-opacity:1" />
            <stop offset="100%" style="stop-color:white;stop-opacity:0" />
        </linearGradient>
        <rect width="500" height="400" fill="url(#fadeGradient)"/>
    </mask>
</defs>

<!-- Background with pattern -->
<rect width="500" height="400" fill="url(#gridPattern)"/>

<!-- Animated circles with glow -->
<g>
    <circle cx="250" cy="200" r="80" fill="url(#glowGradient)" opacity="0.7">
        <animate attributeName="r" 
                 values="80;90;80" 
                 dur="4s" 
                 repeatCount="indefinite"/>
    </circle>
    <circle cx="250" cy="200" r="60" 
            fill="none" 
            stroke="#FF4500" 
            stroke-width="2"
            filter="url(#glow)">
        <animateTransform attributeName="transform"
                        type="rotate"
                        from="0 250 200"
                        to="360 250 200"
                        dur="10s"
                        repeatCount="indefinite"/>
    </circle>
</g>

<!-- Animated paths -->
<g>
    <path d="M150,150 Q250,50 350,150" 
          fill="none" 
          stroke="#4169E1" 
          stroke-width="3">
        <animate attributeName="d" 
                 values="M150,150 Q250,50 350,150;
                         M150,150 Q250,250 350,150;
                         M150,150 Q250,50 350,150" 
                 dur="6s" 
                 repeatCount="indefinite"/>
    </path>
</g>

<!-- Dynamic text with mask -->
<g mask="url(#fadeMask)">
    <text x="250" y="300" 
          text-anchor="middle" 
          font-size="24" 
          fill="#333"
          font-family="Arial">
        SVG Animations
        <animate attributeName="y" 
                 values="300;290;300" 
                 dur="3s" 
                 repeatCount="indefinite"/>
    </text>
</g>

<!-- Morphing polygon -->
<polygon points="200,100 300,100 350,200 300,300 200,300 150,200"
         fill="none"
         stroke="#9932CC"
         stroke-width="2">
    <animate attributeName="points"
             values="200,100 300,100 350,200 300,300 200,300 150,200;
                     220,120 280,120 320,200 280,280 220,280 180,200;
                     200,100 300,100 350,200 300,300 200,300 150,200"
             dur="8s"
             repeatCount="indefinite"/>
</polygon>

<!-- Particle effect -->
<g>
    <circle cx="250" cy="200" r="2" fill="#FFD700">
        <animate attributeName="cx" 
                 values="250;270;250" 
                 dur="2s" 
                 repeatCount="indefinite"/>
        <animate attributeName="cy" 
                 values="200;220;200" 
                 dur="2s" 
                 repeatCount="indefinite"/>
        <animate attributeName="opacity" 
                 values="1;0;1" 
                 dur="2s" 
                 repeatCount="indefinite"/>
    </circle>
    <circle cx="250" cy="200" r="2" fill="#FF4500">
        <animate attributeName="cx" 
                 values="250;230;250" 
                 dur="3s" 
                 repeatCount="indefinite"/>
        <animate attributeName="cy" 
                 values="200;180;200" 
                 dur="3s" 
                 repeatCount="indefinite"/>
        <animate attributeName="opacity" 
                 values="1;0;1" 
                 dur="3s" 
                 repeatCount="indefinite"/>
    </circle>
</g>