← Back to Canvas

Documentation

Complete guide to using CSSVector 2.0

Getting Started

CSSVector 2.0 introduces a professional pen tool that works just like Adobe Illustrator. Follow these steps to create your first shape:

  1. Select the Pen Tool - Click the pen icon in the toolbar or press P
  2. Click to add points - Click anywhere on the canvas to create anchor points
  3. Close your path - Click on the first point to complete the shape
  4. View generated code - The CSS, Tailwind, and SVG code appears automatically
  5. Copy or export - Use the copy button or download as a file

Tools & Features

Pen Tool

Create custom shapes by clicking to add anchor points. The pen tool supports:

  • Click to add straight anchor points
  • Click on the first point to close the path
  • ESC to cancel the current path
  • Enter to close the path (if 3+ points)

Select Tool

Click on existing shapes to select them and adjust their curves:

  • Click any point to select a path
  • Drag control handles (purple dots) to create and adjust curves
  • Transform points and handles for perfect Bezier curves

Grid Snapping

Toggle the grid icon to enable/disable snapping:

  • Points snap to a 20px grid when enabled
  • Useful for creating precise, aligned shapes
  • Grid is visible when snapping is active

Undo/Redo

Full history support with keyboard shortcuts:

  • Ctrl+Z (Cmd+Z on Mac) to undo
  • Ctrl+Y or Ctrl+Shift+Z (Cmd+Y on Mac) to redo
  • History includes all path creation and modifications

Code Output Modes

CSS Mode

Generates CSS with clip-path property. Two variations are provided:

Polygon (for simple shapes):

.shape-123 {
  clip-path: polygon(10% 20%, 30% 40%, 50% 60%);
  background-color: #22D3EE33;
  border: 2px solid #22D3EE;
}

Path (for curved shapes):

.shape-123-path {
  clip-path: path('M 100 100 L 200 200 Z');
  background-color: #22D3EE33;
  border: 2px solid #22D3EE;
}

Tailwind Mode

Generates HTML with inline clip-path styles:

<div class="w-full h-full" style="clip-path: polygon(10% 20%, 30% 40%)"></div>

SVG Mode

Exports your shapes as standard SVG with path elements:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
  <path d="M 100 100 L 200 200 Z" fill="#22D3EE33" stroke="#22D3EE" stroke-width="2" />
</svg>

Keyboard Shortcuts

Drawing

  • ESC - Cancel current path
  • Enter - Close current path

History

  • Ctrl+Z - Undo
  • Ctrl+Y - Redo
  • Ctrl+Shift+Z - Redo (alt)

Tips & Best Practices

  • Start with simple shapes to get familiar with the pen tool
  • Use the select tool to refine your shapes after drawing
  • Enable grid snapping for geometric shapes and precise alignment
  • Drag control handles to create smooth, flowing curves
  • Use undo/redo liberally - experiment without fear!
  • Export to SVG for use in design tools or web projects
  • Close paths to create filled shapes
  • The first point pulses when you have 3+ points - click it to close

Using Generated Code

The generated code is production-ready and can be used directly in your projects:

  • CSS clip-path: Apply to any div to clip its content to your shape
  • SVG export: Use in img tags, CSS backgrounds, or embed inline
  • Tailwind: Drop into your HTML with Tailwind classes
  • Combine with backgrounds: Add gradients, images, or colors behind your clips
  • Animate: Use CSS transitions or animations on the clip-path property

Advanced Techniques

Creating Smooth Curves

After placing points, switch to select tool and drag the control handles that appear on each point. These handles control the Bezier curve tension and direction.

Complex Shapes

Build complex shapes by combining multiple paths. Each path is generated as a separate CSS class that you can layer together.

Responsive Design

The CSS clip-path uses percentages, making your shapes responsive. They'll scale with the container element.