Den Farbkreis mit seinen 13 Teilstücken habe ich in Illustration gezeichnet, coloriert und als SVG exportiert.
See the Pen SVG animated sliced color circle with mouseover event by Norbert Mesch (@itsnorbat) on CodePen.
Animation des Kreissegments
Jedes Kreiselement ist mit einem animateTransform-Element versehen worden um das Kreissegment wenige Pixel aus dem Kreis heraus zu animieren. Das Ereignis wird mittels mouseover ausgelöst.
<animateTransform attributeName="transform" type="translate" from="0 0" to="-5 -20" begin="mouseover" dur="0.3s" repeatCount="1" fill=""/>
Rotation
Die Rotation des Kreises wurde ebenfalls mit einem animateTransform-Element (type=“rotate“) realisiert.
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360,200,200" to="0,200,200" begin="0s" dur="13s" repeatCount="indefinite"/></g>