rendering-animate-svg

SKILL.md

Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a and animate the wrapper instead. Important for 8-bit components with pixel art icons and animations.

This applies to all CSS transforms and transitions (transform, opacity, translate, scale, rotate). The wrapper div allows browsers to use GPU acceleration for smoother animations, which is especially noticeable for retro pixel art animations.

Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations. Source: theorcdev/8bitcn-ui.

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/theorcdev/8bitcn-ui --skill rendering-animate-svg Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor

View raw