Skills
.Work. You
Rest

css-svg-properties

Community

Master CSS styling and animation for SVGs.

Design & Creative#css#styling#animation#svg#geometry
AuthorBenavidesMichael
Version1.0.0
Installs0

System Documentation

What problem does it solve?

CSS-based styling and animation for SVG elements, enabling predictable visuals without inline attributes or complex scripting.

Core Features & Use Cases

  • Core painting properties: fill, stroke, opacity, and their advanced variants for scalable vector graphics.
  • Geometry and transforms: control cx, cy, r, width, height, d, clip-path, mask, and transitions with CSS.
  • Animations & interactivity: keyframes, transitions, and hover states for responsive SVG visuals; CSS variables for theming.
  • Use Case: create an inline SVG icon system with themeable colors and a hover animation without touching SVG markup.

Quick Start

Create an inline SVG and apply CSS classes to demonstrate fill, stroke, and a basic animation.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: css-svg-properties
Download link: https://github.com/BenavidesMichael/portfolio/archive/main.zip#css-svg-properties

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.