Use SVG Animation for Yubikey images

[zachmargolis]

Prompted by a question on #10323 (comment)

Results

Filesizes (uncompressed)

	before (GIF)	after (SVG)	Δ	% reduction
Desktop	125kb	4kb	-121kb	96.8%
Mobile	129kb	4kb	-125kb	96.9%

Process

• A few more details in Slack
• relies on adding <animate> and <animateTransform> to replace the <svg-animate> and anim: attributes that the Figma plugin used
• I ended up poking around the plugin source to find how it encoded its animations

[zachmargolis]

Testing it locally, it animates! However, it looks like the CSS rounded corners are conflicting with the ones built in to the SVG, will try to remedy

Screen.Recording.2024-04-04.at.12.15.55.PM.mov

[zachmargolis]

Testing it locally, it animates! However, it looks like the CSS rounded corners are conflicting with the ones built in to the SVG, will try to remedy

Screen.Recording.2024-04-04.at.12.15.55.PM.mov

Fixed in 91421d1, result:

[jc-gsa]

Looks great, much smoother!