Vector Art Fundamentals
Learn how vector graphics actually work through hands-on interactive tools. No software to install - everything runs in your browser.
How Vector Art Works
There are two fundamentally different ways to store an image on a computer.
Raster images (like photos) store a grid of colored pixels. When you zoom in, you eventually see the individual squares. The image has a fixed resolution - it can't be scaled up without losing quality.
Vector images store mathematical instructions. "Draw a circle here. Make it this big. Fill it with blue." When you zoom in, the computer just recalculates and redraws. The image stays crisp at any size.
This difference matters because vector art can be scaled to any size - from a tiny app icon to a massive billboard - without any loss in quality. It's why logos, icons, illustrations, and fonts are almost always created as vectors.
Raster vs Vector: Zoom Comparison
Drag the slider to zoom in. Watch what happens to each version.
Key Takeaways
- Raster = pixels. Vector = math.
- Vectors stay crisp at any zoom level.
- This is why logos and icons are made with vector tools.
Understanding Bezier Curves
Every curve in vector art is a Bezier curve. Understanding how they work is the single most important skill in vector graphics.
A Bezier curve has two types of points:
Anchor points are where the curve passes through. These are the endpoints - the curve is "anchored" here.
Control handles determine the curve's shape. They act like magnets, pulling the curve toward them. The longer the handle, the stronger the pull. The direction of the handle determines which way the curve bends.
In the tool below, the squares are anchor points. The circles are control handles. Drag them around to see how they affect the curve.
Bezier Curve Playground
Drag the anchor points (squares) and control handles (circles) to shape the curve.
Smooth vs Corner Nodes
There are two types of anchor points:
Smooth nodes keep handles aligned in a straight line. When you move one handle, the other moves too (in the opposite direction). This creates smooth, flowing curves.
Corner nodes let handles move independently. This creates sharp corners where two curves meet at an angle.
Smooth vs Corner Nodes
Click a node to select it, then toggle between smooth and corner. Watch how the handles behave differently.
Key Takeaways
- Anchor points are where the curve passes through.
- Control handles determine the curve's shape and direction.
- Smooth nodes = flowing curves. Corner nodes = sharp angles.
Building With Shapes
You don't always have to draw complex shapes from scratch. Often, it's easier to combine simple shapes using boolean operations.
There are four main boolean operations:
Unite - Combines shapes into one. Like pressing two pieces of clay together.
Subtract - Cuts one shape out of another. The top shape acts like a cookie cutter.
Intersect - Keeps only the overlapping area. Everything else disappears.
Divide - Splits shapes into separate pieces wherever they overlap.
Boolean Operations Sandbox
Drag the shapes to position them, then click an operation to see the result.
Shape Building Challenges
Professional designers use boolean operations constantly. A coffee cup is a rectangle united with a handle. A moon is one circle subtracted from another. Complex logos are often just clever combinations of simple shapes.
Build the Shape
Use boolean operations to recreate the target shape on the left.
Key Takeaways
- Boolean operations combine simple shapes into complex ones.
- Unite joins, Subtract cuts, Intersect keeps overlap, Divide splits.
- Think in primitives first, then combine.
Drawing Paths
The Pen tool is the most powerful (and most intimidating) tool in vector software. But once you understand how it works, it becomes second nature.
Here's the key insight: the Pen tool draws Bezier curves. That's it. Everything you learned in Module 2 applies here.
Click to place a corner point (straight lines).
Click and drag to place a smooth point with handles (curves).
The tool below works exactly like the Pen tool in Illustrator, Figma, or any other vector software.
The Path Editor
Click to add points. Click and drag to add curved points. Click the first point to close the shape.
Tracing Practice
The best way to learn the Pen tool is to trace. Below, you'll see a ghost shape. Your job is to recreate it by placing points in the right spots.
Trace the Shape
Place points on the guide to recreate the shape. Points will snap when you're close.
Key Takeaways
- Click = corner point. Click + drag = smooth curved point.
- Close the path by clicking the first point.
- Tracing is the best practice for the Pen tool.
Stroke and Fill
Every vector shape has two visual properties:
Fill is the color inside the shape. Think of it as paint filling a bucket.
Stroke is the outline around the shape. Think of it as a pen tracing the edge.
You can have both, either, or neither. A shape with no fill and no stroke is invisible (but still there - useful for clipping masks and other tricks).
Stroke & Fill Visualizer
Toggle stroke and fill, adjust properties, and see the effect in real-time.
Key Takeaways
- Fill = inside color. Stroke = outline.
- Stroke width and position significantly change the appearance.
- You can have fill only, stroke only, both, or neither.
Color for Vector Art
Great vector art usually uses a limited color palette. Rather than picking random colors, professionals build cohesive palettes where colors work together.
The easiest way to create a palette is to start with one color, then generate tints (lighter versions) and shades (darker versions). This gives you a range of values that automatically harmonize.
Palette Builder
Pick a base color and watch as a harmonious palette is generated.
Color Harmony
When you need multiple distinct colors (not just shades of one), color theory provides reliable formulas based on the color wheel.
Color Harmony Explorer
Click a harmony type to see related colors on the wheel.
Key Takeaways
- Limit your palette for cohesive artwork.
- Build palettes from tints and shades of a base color.
- Use color harmonies when you need multiple distinct colors.
Layers
In vector art, shapes stack on top of each other like sheets of paper. Shapes higher in the stack appear in front of shapes lower in the stack.
This stacking order (also called z-order) determines what's visible and what's hidden behind other shapes.
Layers are how you organize and control this stacking. You can:
- Reorder layers by dragging
- Hide layers temporarily with the visibility toggle
- Adjust opacity to make layers semi-transparent
Layer Stacking
Drag layers in the panel to reorder. Click the eye to toggle visibility.
Key Takeaways
- Shapes stack like sheets of paper - top layer is in front.
- Reorder by dragging in the layers panel.
- Use visibility and opacity to control what's shown.
Putting It All Together
Time to use everything you've learned. In this final project, you'll build a simple icon step-by-step, combining:
- Basic shapes
- Boolean operations
- Color palette
- Layer management
Follow the guided steps below. At the end, you'll have created a polished icon from scratch.
Guided Icon Builder
Follow each step to build the icon. Complete one step before moving to the next.
Create the base circle
Click "Add Circle" to place a large circle in the center. This will be the icon's background.
What You've Learned
Congratulations! You now understand the core concepts of vector art:
- How vectors differ from pixels
- How Bezier curves and anchor points work
- How to combine shapes with boolean operations
- How to draw paths with the Pen tool
- How stroke and fill affect appearance
- How to build harmonious color palettes
- How layer stacking controls visibility
These concepts apply to every vector program: Illustrator, Figma, Affinity Designer, Inkscape, and more. The tools look different, but the fundamentals you just learned are the same.