Pure SVG color change animation

Anonymous! — Mon, 03 Jun 2024 18:41:57 +0000

A first SVG animation, using the animate tag to change between several different colors.

1. Create the SVG shape.

This one is just a square <rect> 100 pixels long, with a color fill of blue #0000ff and a stroke color black #000000.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" height="100" width="100" fill="#0000ff" stroke="#000000"> </rect> </svg>

2. Add the animate code

Add the animate tag inside the square's <rect>to flash between multiple colors using hex color codes held in values (#00ff00 green, #ff00ff purple, #ff0000 red) and the timings for each is held by keyTimes. The values in keyTimes must be between 0 and 1.

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" height="100" width="100" fill="#0000ff" stroke="#000000"> <animate attributeName="fill" attributeType="XML" keyTimes="0; 0.5; 1" begin="0s" dur="5s" values="#00ff00;#ff00ff;#ff0000" calcMode="discrete" repeatCount="indefinite"/> </rect> </svg>

3. Run it

You can also embed it within a HTML document, eg in the <body> tag or a <div>.

DEV Community: Anonymous!

Pure SVG color change animation

1. Create the SVG shape.

2. Add the animate code

3. Run it