mcpField
R
rendering-animate-svg

rendering-animate-svg

github.com/theorcdevDevelopment2.1k108 installsUpdated 2d ago
Repository

About rendering-animate-svg

rendering-animate-svg is a coding guideline for animating SVG-based 8-bit UI elements. It recommends animating a wrapper element rather than the SVG itself, including for transforms and transitions.

Key features

  1. 01Animate a wrapper instead of SVG
  2. 02Covers CSS transforms and transitions
  3. 03Applies to pixel-art icon hover effects

Use cases

  1. 01Implementing a pixel-art spinner
  2. 02Adding hover animations to 8-bit icons

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/theorcdev/8bitcn-ui --skill rendering-animate-svg

After installing, type/rendering-animate-svgin Claude Code to confirm it loaded.

Details

From the project README

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):

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):

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:

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.

Comments

Markdown supported