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: