27. SVG gradient animation

Most SVG elements are animatable, including SVG gradients.

Here the SVG <circle>’s horizontal position is animated (cx), together with the radii (fr and r) of the <radialGradient>’s start and end circles, plus also the position of its smallest (yellow) circle (fx and fy).

export function Example() {
    return (
        <svg width={350} height={150} xmlns="http://www.w3.org/2000/svg">
            <defs>
                <motion.radialGradient
                    id="gradient1"
                    fr={0.2}
                    fx={0.32}
                    fy={0.32}
                    r={0.7}
                    animate={{ fr: 0.05, fx: 0.2, fy: 0.35, r: 0.6 }}
                    transition={{
                        repeat: Infinity,
                        repeatType: "mirror",
                        ease: "easeInOut",
                        duration: 3
                    }}
                >
                    <stop offset="0%" stopColor="#ff0" />
                    <stop offset="100%" stopColor="#c50" />
                </motion.radialGradient>
            </defs>

            <motion.circle
                fill="url(#gradient1)"
                cx={75}
                cy={75}
                r={75}
                animate={{ cx: 275 }}
                transition={{
                    repeat: Infinity,
                    repeatType: "mirror",
                    ease: "easeInOut",
                    duration: 3
                }}
            />
        </svg>
    );
}