Some Examples » 30. SVG gradient animation

30. SVG gradient animation

Most SVG elements are animatable, including SVG gradients.

Code component

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 default function CC_30_SVG_gradient_animation(props) {
    return (
        <div>
            <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>
        </div>
    )
}

Code override

How do you animate an SVG with a code override? By inserting the SVG as its children:

export function SVG_gradient_animation(Component): ComponentType {
    return (props) => {
        const { style, ...rest } = props

        return (
            <Component
                {...rest}
                style={{ ...style, backgroundColor: "transparent" }}
                children={
                    <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>
                }
            />
        )
    }
}

Other examples of using children in a code override:

30. SVG gradient animation

Code component

Code override

Join the Mighty Guides mailing list ( ± 6 emails/year )

Leave a Reply Cancel reply