Search code examples
animationsvghsl

HSL color models in animation

Currently I am using the animate tag to cycle through some colors.

<animate attributeName="stop-color" begin="0s" dur="16s" values="#00ffff;#ff00ff;#00ffff" repeatCount="indefinite" />

How are the colors being interpolated, and can I use HSL instead of RGB?

Thanks.

Solution

  • interpolation of colours is defined in the SVG specification. Basically distance is the standard vector distance between the colours in the RGB colour space.

    Even though you can specify the end states in HSL in most UAs these days you won't get HSL interpolation. Your HSL endpoint colours would be converted to RGB and then the interpolation would take place in the RGB colour space.