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:


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

GDPR

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.



Leave a Reply