Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

Morphing SVG icons v1.0.0

Use this resource to build or review SVG icons that morph into one another

New

  • 536 downloads
  • 225 likes
  • 164 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install morphing-svg-icons

With no option, the skill goes to ~/.agents/skills/; add --agent claude-code (or codex, cursor…) to target an agent.

First time: connect the CLI with

npx --yes palatekit@latest login

The agent draws every icon with exactly three lines, collapsing unused ones at the center. It sets the easing curve, rotation of variants and reduced-motion handling. When reviewing, it lists findings with severity and gives a Block or Approve verdict.

Mostly picked by

Updated November 2, 2026

A menu icon morphing into a cross by moving three strokes.

Details

Works in
Install guides
Generates with
Your agent's model
Licence
MIT

Similar resources

View all

What you get

  • SKILL.md: three-line model, drawing and motion rules, broken/correct pairs table
  • A report format with severity and verdict

Good fit for

  • Animating a menu button that becomes a cross
  • Keeping an icon set consistent in an interface
  • Reviewing an existing animated icon component

Not for

  • A plain crossfade between two SVG images
  • Complex illustrations
  • Projects without React or an animation library

Tags

  • svg
  • icons
  • animation
  • morphing
  • accessibility

About

You say

"Build an icon that morphs from a down arrow to a check mark using the three shared SVG lines."

A menu icon morphing into a cross by moving three strokes.

Skill published by raphaelsalaja under the MIT license.

Show more

Prerequisites

You bring
The icons to animate or the component to review

How to use it

  1. Name the icons to connect or the file to review
  2. The agent builds or audits the component
  3. Check the result and fix the flagged findings

Content preview

Files

  • LICENSE1 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • SKILL.md4.6 KB

Origin and licence

Modified by PalateKit

Author
raphaelsalaja
Source
github.com/raphaelsalaja/skills/tree/ec613aae89819c9ce61d03701cd91e67b0ed1e03/skills/morphing-icons
Licence
MIT

Notice

Version modifiée de « morphing-icons » (raphaelsalaja, MIT) : traduction française et fiche par PalateKit.

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

Which animation library is assumed?

The examples mention a spring hook (useSpring) and useReducedMotion, as in Motion. Adapt them to your tool.

What is timing-functions?

A neighbouring skill for button timing. It is not needed for this one to work.