rendering-animate-svg
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 facts
- Repository
- TheOrcDev/8bitcn-ui
- Last source activity
- January 16, 2026 at 09:09
- Detected SKILL.md language
- English
- Stars
- 2,059
- Forks
- 119
Install options
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Review the source files
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Showing SKILL.md
SKILL.md
Source instructions · Read-only preview- name
- rendering-animate-svg
- description
- 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.
## Animate SVG Wrapper Instead of SVG Element
Many browsers don't have hardware acceleration for CSS3 animations on SVG elements. Wrap SVG in a `<div>` and animate the wrapper instead. Important for 8-bit components with pixel art icons and animations.
**Incorrect (animating SVG directly - no hardware acceleration):**
```tsx
function PixelSpinner() {
return (
<svg
className="animate-spin"
viewBox="0 0 16 16"
>
<rect x="2" y="2" width="4" height="4" fill="currentColor" />
</svg>
)
}
```
**Correct (animating wrapper div - hardware accelerated):**
```tsx
function PixelSpinner() {
return (
<div className="animate-spin">
<svg
viewBox="0 0 16 16"
width="16"
height="16"
>
<rect x="2" y="2" width="4" height="4" fill="currentColor" />
</svg>
</div>
)
}
```
**For 8-bit icon components with hover effects:**
```tsx
function RetroIcon({ icon: Icon, className }: RetroIconProps) {
return (
<div className={cn("transition-transform hover:scale-110", className)}>
<Icon />
</div>
)
}
```
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.
View on GitHub