skills.rest
ZhangHanDong
ZhangHanDongCOMMUNITY
Explore all skills by this author →
GitHub

makepad-2.0-vector

Create resolution-independent vector graphics in Makepad 2.0 using SVG-like Splash syntax.

747|87|Updated Jan 10, 2026
Search Tags:#svg#gradients#vector graphics#makepad#Splash#rust ui#tween animation
One-click install
npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-2-0-vector
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: makepad-2.0-vector
Source: https://github.com/ZhangHanDong/makepad-skills/tree/main/skills/makepad-2.0-vector
Command: npx skills add https://github.com/ZhangHanDong/makepad-skills --skill makepad-2-0-vector

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building icons, illustrations, and animated vector graphics in Makepad 2.0 requires knowing the Vector widget's SVG-style property model, which differs from standard widget draw_bg properties and has subtle pitfalls like Tween loop syntax and hex color escaping.

Core Features & Use Cases

  • Inline Vector Shapes: Define Path, Rect, Circle, Ellipse, Line, Polyline, and Polygon shapes directly in Splash with SVG path data and viewbox coordinate spaces.
  • Gradients, Filters & Transforms: Apply linear/radial gradients, DropShadow filters, and Group transforms including animated Rotate, Scale, and Translate.
  • Tween Property Animation: Animate any shape property (fill, stroke, opacity, cx, d path morphing) with Tween values supporting loops, delays, and keyframes.
  • Use Case: Build a themed icon set for a Makepad app by defining reusable Vector icons with let bindings, stroke-based paths, and theme colors that adapt to dark/light modes.

Quick Start

Ask the AI to create a Makepad 2.0 Vector icon with an SVG path, rounded stroke caps, and a pulsing opacity animation using Tween.

Frequently Asked Questions about makepad-2.0-vector

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

FAQPage Schema
How do I draw SVG paths in Makepad 2.0?▼

Use the Vector widget with a Path child and set the d property to standard SVG path data like "M10 10 L20 20 Z". Set viewbox with vec4 to define the coordinate space, and style with fill, stroke, and stroke_width properties.

How to animate vector graphics in Makepad 2.0?▼

Use Tween as a property value on any shape property, such as opacity: Tween{from:0.3 to:1.0 dur:1.5 loop_:true}. Tween animates fill, stroke, position, radius, and even path morphing via the d property.

What is the difference between Vector and Svg widgets in Makepad?▼

Vector defines shapes inline in Splash code for programmatic graphics and icons, while Svg loads external .svg files via crate_resource() or http_resource(). Use Vector for inline icons and Svg for pre-made SVG assets or URL-loaded files.

Why does my Makepad Tween animation only play once?▼

The loop_ property must be a boolean true or a numeric repeat count, not a string. Writing loop_:"indefinite" fails silently and plays once; use loop_:true for indefinite looping instead.

Why do hex colors cause parse errors in Makepad script_mod?▼

Hex colors containing the letter e adjacent to digits are misread as exponent notation by the parser. Prefix them with #x, for example #x2ecc71 instead of #2ecc71, to avoid the parse error.

When should I use SDF2D shaders instead of the Vector widget?▼

Use SDF2D shaders for animated shapes, hover effects, and custom widget backgrounds requiring per-pixel GPU control. Vector is better for static icons and illustrations defined with SVG path data, gradients, and filters.

Related Skills

Explore More Software Engineering Skills→
ZhangHanDongZhangHanDong
745

robius-widget-patterns

Implement reusable Makepad widget patterns for overlays, modals, and lists.

Community
Intermediate
sampaio-techsampaio-tech
19

button-system

Generate iOS-style Flutter buttons with customizable sizes, colors, icons, and typography.

Official
Intermediate
mahg-esmahg-es
3

theme-design

Design CSS theme systems with design tokens, color palettes, and typography scales.

Official
Intermediate
gtpgg1013gtpgg1013

rendering-animate-svg

Wrap animated SVG elements in a container div for hardware-accelerated rendering.

Community
Intermediate