How to bulk css clip-path generation with automation scripts
- Step 1Organize your shape SVGs — Place all shape SVGs in a shapes/ folder with semantic names (hero-diagonal.svg, card-skew.svg, divider-wave.svg). These names become the constant identifiers in the output file.
- Step 2Run the conversion script — The script reads each SVG, sends the path data to the JAD Clip Path Generator API with the target container dimensions, and receives the polygon() string. All values are written to src/constants/clip-paths.ts as named exports.
- Step 3Import in your components — Import CLIP_PATHS.heroDiagonal in your Hero component and apply it: style={{ clipPath: CLIP_PATHS.heroDiagonal }}. TypeScript autocompletes the constant name, preventing typos at runtime.
Frequently asked questions
How do I ensure clip-path values are correct for different container aspect ratios?+
Percentage-based polygon values are aspect-ratio-independent only if the original SVG and the container have the same aspect ratio. For different ratios, use the API's normalizeToContainer parameter with the target container's width and height to compute corrected percentages.
Can the script handle SVGs with multiple paths representing the same clip shape?+
The API's mergeCompoundPaths option combines all paths in the SVG into a single compound clip path before converting to polygon(). This is useful for shapes defined as multiple disconnected path elements.
How do I add clip-path values to a Style Dictionary token pipeline?+
Define a custom token type 'clipPath' in your Style Dictionary config. The batch script outputs tokens in the DTCG format (value, type, description) which Style Dictionary transforms into platform-specific outputs (CSS variables, iOS Swift, Android XML).
What simplification level should I target for animated clip paths?+
For CSS transition animations, target 6–12 points per clip path. Fewer points animate more smoothly. For clip paths that only appear statically (no animation), up to 30 points is acceptable. The API's simplify parameter accepts a tolerance value (0.5–5.0) that controls the Ramer-Douglas-Peucker simplification level.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.