skills.rest
mohamed-g-shoaib
mohamed-g-shoaibCOMMUNITY
Explore all skills by this author →
GitHub

svg-morphing

Morph SVG icons by transforming three-line geometry between states.

2|Updated Nov 17, 2025
Search Tags:#design#ui#animation#icons#svg#vector#morphing
One-click install
npx skills add https://github.com/mohamed-g-shoaib/personal-portfolio --skill svg-morphing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-morphing
Source: https://github.com/mohamed-g-shoaib/personal-portfolio/tree/main/.agents/skills/svg-morphing
Command: npx skills add https://github.com/mohamed-g-shoaib/personal-portfolio --skill svg-morphing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps designers and developers create morphing SVG icons with a fixed structure to enable smooth transitions between states, avoiding asset swaps and manual redraws.

Core Features & Use Cases

  • Exactly three lines per icon, collapsing extras to invisible points for uniform morphing
  • Rotation groups to ensure natural transitions between oriented shapes
  • Real-world use cases include transforming a hamburger menu into a close icon, or a play button into pause while preserving geometry

Quick Start

Implement the MorphSVG component in your UI and enable a morphable icon set with three-line icons to begin.

Frequently Asked Questions about svg-morphing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create smooth SVG icon transitions without swapping image assets?▼

Smooth SVG icon transitions are achieved by morphing the core line geometry of the icons. This enables seamless state changes, like a hamburger menu to a close icon, without swapping assets or manual redraws.

What is the structure requirement for SVG morphing to work correctly?▼

SVG morphing requires each icon to be represented by exactly three lines. Extra lines must be collapsed to invisible points to ensure a uniform structure for seamless transitions across the icon set.

How does SVG morphing handle transitions between differently oriented shapes?▼

Transitions between differently oriented shapes are handled using rotation groups for same-shape variants. Coordinate morphing is then applied to transition smoothly across different groups during the icon animation.

Can I use this SVG morphing approach for interactive UI components like play and pause buttons?▼

Yes, this SVG morphing approach is designed for UI design and interactive components. It handles real-world use cases like transforming a play button into pause while preserving the underlying vector geometry.

What are the limitations of using a three-line structure for vector icon animation?▼

The primary limitation of vector icon animation here is the strict three-line structure requirement. Icons with complex geometries cannot be morphed naturally unless they are simplified or collapsed into exactly three lines.

Related Skills

Explore More Design & Creative Skills→
raphaelsalajaraphaelsalaja
869

morphing-icons

Create morphing SVG icons from three lines with rotation groups.

Community
Advanced
BintzGavinBintzGavin
94

example-react

Integrate Helios timelines into React applications with hooks and components.

Community
Intermediate
dylantarredylantarre
38

icon-system

Standardize icon delivery with SVG sprites and inline components.

Community
Basic
skeeper75skeeper75

moai-tool-svg

Create, optimize, and transform SVG vector graphics with SVGO.

Community
Advanced