skills.rest
gooseworks-ai
gooseworks-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

squiggle-draw-on

Generate jittered SVG path animations with a hand-drawn aesthetic in React.

6|1|Updated May 29, 2026
Search Tags:#animation#motion graphics#svg animation#hand-drawn#vector art
One-click install
npx skills add https://github.com/gooseworks-ai/gooseworks-ads-skills --skill squiggle-draw-on
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: squiggle-draw-on
Source: https://github.com/gooseworks-ai/gooseworks-ads-skills/tree/main/skills/atoms/motion-graphics/effects/squiggle-draw-on
Command: npx skills add https://github.com/gooseworks-ai/gooseworks-ads-skills --skill squiggle-draw-on

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, useCurrentFrame, interpolate, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the need for a motion-graphics primitive that provides a hand-drawn feel to SVG lines, which is essential for visual accents and decorative elements in animations.

Core Features & Use Cases

  • Hand-Drawn Animation: Creates SVG lines with an organic, hand-drawn look through jittered paths.
  • Customizable Line Properties: Adjust stroke color, width, and control points for precise visual results.
  • Animation Control: Configure the animation speed and easing to fit the overall motion design.
  • Use Case: Use this Skill to animate underlines, callouts, or motion-line trails in a video, enhancing the design with a personalized, human touch.

Quick Start

Animate an underline under the header 'Welcome to our product' using the 'squiggle-draw-on' skill with the following parameters.

Frequently Asked Questions about squiggle-draw-on

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

FAQPage Schema
How do I animate SVG lines with a hand-drawn feel in React?▼

You can create hand-drawn SVG animations by generating jittered paths and animating the drawing process. This approach provides an organic, non-perfect aesthetic ideal for visual accents like underlines and callouts.

Can I customize stroke properties and animation speed for hand-drawn SVG paths?▼

Yes, you can customize stroke color, width, and control points for precise visual results. Animation control allows you to configure speed and easing to fit your overall motion graphics design.

Does this hand-drawn SVG animation approach require specific dependencies?▼

Yes, creating hand-drawn SVG animations with this Skill requires React for rendering and manipulating SVG elements. It also relies on frame manipulation and interpolation functions to control the animation logic.

What are the best use cases for hand-drawn vector art animations?▼

Hand-drawn vector art animations are best used for animating underlines, callouts, or motion-line trails in a video. They enhance motion graphics by adding a personalized, human-like touch to decorative visual elements.

How does the jittered path mechanism work for organic SVG line strokes?▼

The jittered path mechanism works by manipulating SVG path coordinates to create non-perfect, organic line strokes. This process yields a human-like appearance by animating the drawing sequence along the jittered vector path.

Related Skills

Explore More Design & Creative Skills→
skeeper75skeeper75

moai-tool-svg

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

Community
Advanced
JustinRoderickJustinRoderick

remotion-render

Render React and Remotion TSX components into MP4 video files.

Community
Intermediate
daodaoleedaodaolee

slack-gif-creator

Create Slack-optimized animated GIFs with PIL primitives and easing functions.

Community
Intermediate
gnipbaognipbao
226

whiteboard-video

Convert text scripts, SVGs, images, or line art into hand-drawn whiteboard videos.

Community
Advanced