Why Vector Networks in Penpot Are Rethinking the Future of Node-Based Editing

Vector networks are not just another feature in Penpot — they represent a shift in how we think about node-based editing. Unlike traditional vector editors that treat paths as a sequence of connected points, Penpot's vector network model allows nodes to connect in multiple directions, forming a graph rather than a simple chain. This changes fundamental assumptions about how paths behave, how boolean operations work, and how we edit complex shapes. For experienced designers who have spent years mastering bezier curves and anchor points, this paradigm requires unlearning some habits and adopting new mental models. In this guide, we'll dissect what makes vector networks different, where they excel, and where they might trip you up.

Field Context: Where Vector Networks Show Up in Real Work

Vector networks in Penpot are most useful in scenarios where traditional path editing becomes cumbersome. Consider a typical icon design workflow: you need to create a shape with multiple overlapping contours, like a gear with teeth or a complex UI icon with cutouts. In traditional vector editors, you'd draw each contour as a separate path, then use boolean operations to combine them — often resulting in a tangled mess of overlapping paths and unpredictable results. With Penpot's vector network, you can draw a single network of nodes that defines the entire shape, including holes and overlapping regions, without boolean operations.

The practical difference becomes clear when editing. In a traditional path, moving a node affects only its immediate neighbors. In a vector network, a node can have multiple connections — you can branch a path, create loops, or connect different parts of the shape. This is particularly powerful for creating shapes with internal holes or for designing characters with separate limbs that share a common body. For example, when designing a map icon with a pin and a circle, you can create a single network where the pin's point connects to the circle's edge, and the interior of the circle is defined as a hole within the same network.

Another real-world scenario is UI design for responsive layouts. Vector networks allow you to create flexible shapes that maintain their structure when scaled or morphed. Since nodes are connected in a graph, you can add or remove nodes without breaking the overall shape — something that's much harder with traditional paths where deleting a node can break the path into separate segments. This makes vector networks ideal for creating reusable components that need to adapt to different sizes or aspect ratios.

Teams working on design systems often find vector networks useful for creating consistent icon sets. Because the network structure is more robust to edits, you can create a base shape and then derive variations by adding or removing nodes, without worrying about boolean operation failures. The ability to edit the network topology — adding branches or merging nodes — opens up workflows that are simply not possible in traditional vector editors.

Real Project Example: A Complex Icon Set

Imagine you're designing an icon set for a navigation app. You need icons for a car, a pedestrian, a bicycle, and a bus. Each icon has multiple overlapping parts: wheels, body, handlebars, etc. In a traditional editor, you'd draw each part as a separate shape and use boolean union or subtract to combine them. But if you need to adjust the thickness of all lines later, you'd have to edit each path individually. In Penpot, you can draw the entire icon as a single vector network, with nodes connecting the different parts. Changing the stroke width or adjusting a node's position updates the whole icon consistently.

Foundations Readers Confuse: How Vector Networks Differ from Traditional Paths

Many designers assume vector networks are just a different term for compound paths or grouped shapes. They are not. A compound path is a collection of independent paths that are treated as a single object for fill and stroke purposes — each sub-path remains a separate sequence of nodes. In Penpot's vector network, all nodes exist in a single connected graph. This means you can have a node that connects to three other nodes, creating a T-junction, which is impossible in a traditional path.

Another common confusion is with boolean operations. In traditional editors, boolean operations (union, subtract, intersect) create new paths by combining or subtracting overlapping regions. The result is a new path that may have a different node structure than the originals. In Penpot, boolean operations are implicit in the network topology. You can create a shape with a hole simply by drawing a closed loop inside another closed loop and connecting them — the interior region becomes a hole automatically. This eliminates the need for separate boolean operations, reducing the risk of unexpected results.

The concept of "closed path" also changes. In a traditional path, a closed path is a single loop where the start and end nodes are connected. In a vector network, you can have multiple closed loops within the same network — for example, a shape with two separate holes. The network can have multiple "faces" (enclosed regions) that share nodes. This is closer to how 3D modeling tools handle polygon meshes than how 2D vector editors work.

One more point of confusion is the role of direction. Traditional paths have a direction (the order of nodes), which affects how strokes and fills are rendered. In a vector network, nodes don't have a fixed order — the network is undirected. This means you can't rely on path direction for effects like dash arrays or stroke alignment. Penpot handles this by treating the network as a set of edges with properties, but it's a different mental model.

Key Differences at a Glance

• Node connectivity: In traditional paths, each node (except start/end) has exactly two neighbors. In vector networks, a node can have any number of connections.
• Boolean operations: Traditional editors require explicit boolean operations. Penpot's network handles holes and overlaps through topology.
• Editing flexibility: Adding or removing nodes in a traditional path can break the path. In a network, you can add branches or merge nodes without breaking the shape.
• Stroke and fill: Traditional paths have a single direction; vector networks are undirected, affecting stroke rendering.

Patterns That Usually Work: Effective Vector Network Techniques

Based on experience with Penpot's vector networks, several patterns consistently produce good results. The first is to start with a rough network of nodes that define the overall shape, then refine. Unlike traditional paths where you might draw a perfect curve from the start, it's often faster to place nodes at key corners and intersections, then adjust curves and connections later. This works because adding nodes to a network doesn't break existing connections — you can insert a node in the middle of an edge without losing the shape.

Another effective pattern is to use the network to create "live" boolean operations. Instead of drawing separate shapes and combining them, draw the entire shape as a single network with overlapping closed loops. For example, to create a donut shape, draw an outer circle and an inner circle as part of the same network — the inner circle becomes a hole automatically. If you need to adjust the size of the hole, you simply move the nodes of the inner circle, and the hole updates accordingly.

For symmetrical shapes, use the mirror or duplicate features in Penpot to create half of the network, then duplicate and flip it, merging the nodes along the symmetry axis. This creates a single network that is perfectly symmetrical. Because the network is a graph, you can merge nodes by snapping or using the "connect nodes" tool, creating a seamless connection.

When dealing with curves, Penpot's vector networks support bezier handles on nodes, just like traditional paths. However, because nodes can have multiple connections, you need to be careful: each edge has its own bezier handles, and a node can have different handles for each incident edge. This allows for smooth transitions at junctions — for example, a node where three curves meet can have different tangents for each edge, creating a smooth T-junction.

Finally, use the "fill" tool to see how the network will be filled. Penpot's fill algorithm detects enclosed faces within the network. If a face is not filled as expected, check that the edges form a closed loop — gaps or unconnected nodes will cause the fill to leak. A good practice is to use the "show nodes" view to visually inspect the network for open edges.

Step-by-Step: Creating a Simple Icon with Vector Network

1. Start with a rough sketch of the icon shape using straight lines between nodes.
2. Add nodes at corners and intersections. Don't worry about curves yet.
3. Refine the network: add nodes where needed, delete redundant ones, and connect nodes to create the desired topology.
4. Convert straight edges to curves by adjusting bezier handles. Each edge can have its own handles.
5. Check fill: ensure all desired faces are closed. Use the fill tool to verify.
6. Adjust node positions and handles to fine-tune the shape.

Anti-Patterns and Why Teams Revert

Despite the power of vector networks, teams sometimes revert to traditional paths or compound shapes. One common anti-pattern is trying to force a traditional path workflow into the network model. For example, drawing a complex shape as a single network with dozens of nodes, then struggling to edit because the network becomes too tangled. The network model works best when the shape has a clear graph structure — multiple branches, loops, or holes. For simple shapes (a rectangle, a circle), a traditional path is simpler and faster.

Another anti-pattern is neglecting to close loops properly. In traditional paths, a closed path is a single loop; if you forget to close it, the fill is simply not applied. In a vector network, an open edge can cause the fill to "leak" into unexpected areas, creating unwanted holes or fills. Teams often revert because they spend too much time debugging fill issues caused by stray unconnected nodes.

Overusing the network for everything is another pitfall. Just because you can create a single network for an entire illustration doesn't mean you should. Large networks with hundreds of nodes become hard to navigate and edit. The performance of Penpot's vector network rendering also degrades with very complex networks. It's better to split the illustration into multiple networks (e.g., one per object) and use grouping to organize them.

Teams also revert when they need precise control over stroke rendering. Because vector networks are undirected, some stroke effects (like dash arrays that depend on path direction) may not work as expected. If your design requires dashed lines that follow a specific direction, a traditional path might be more reliable. Penpot's stroke implementation for networks is still evolving, and some features like stroke alignment (inside, outside, center) may behave differently.

Finally, collaboration can be a challenge. When multiple team members edit the same vector network, changes to node positions or connections can have ripple effects that are hard to predict. Unlike traditional paths where edits are localized, moving a node in a network can affect multiple faces and edges. Teams that rely on strict version control may find it easier to work with traditional paths until Penpot's collaboration features mature.

Common Mistakes Checklist

• Using vector networks for simple shapes that don't need branching or holes.
• Leaving nodes unconnected, causing fill leaks.
• Creating networks with too many nodes, making editing cumbersome.
• Expecting traditional stroke direction behavior.
• Not using grouping to separate complex scenes into manageable networks.

Maintenance, Drift, and Long-Term Costs

Vector networks, like any data structure, incur maintenance costs over time. One issue is "node drift" — as you edit a network, nodes can become misaligned or disconnected, especially if you move nodes without checking their connections. In a traditional path, if you move a node, the path remains a single chain; in a network, moving a node can accidentally disconnect it from some edges, breaking the topology. Regular inspection of the network graph is necessary to ensure all intended connections are intact.

Another long-term cost is the complexity of reusing network shapes in other projects. Exporting a vector network to SVG preserves the graph structure, but not all SVG editors interpret vector networks correctly. If you need to share assets with teams using other tools (Illustrator, Sketch), the network may be converted to traditional paths, losing the topological information. This can lead to unexpected edits or loss of hole definitions. It's important to test exports early in the workflow to avoid surprises.

Performance is another consideration. While Penpot's vector network rendering is efficient for moderate complexity, very large networks (hundreds of nodes with many connections) can slow down the editor. This is especially noticeable when using boolean operations or fill detection. As the network grows, the time to compute faces increases. For production work, it's wise to keep individual networks under a few dozen nodes, and use multiple networks combined with grouping for complex illustrations.

Finally, there's the cost of training and onboarding. New team members who are accustomed to traditional vector editors need time to learn the network paradigm. This can slow down initial productivity. Teams that switch to Penpot for its vector networks should allocate time for experimentation and learning, and create internal documentation of best practices specific to their workflows.

Mitigation Strategies

• Regularly check network connectivity using the "show nodes" view.
• Export test SVGs early to verify compatibility with downstream tools.
• Keep individual networks small; use groups for complex scenes.
• Create a team style guide with vector network conventions.

When Not to Use This Approach

Vector networks in Penpot are not a universal replacement for traditional path editing. There are clear scenarios where the traditional model is more appropriate. First, if your work involves primarily simple geometric shapes with no overlapping contours or holes, traditional paths are simpler and faster. Drawing a rectangle or a circle as a vector network adds unnecessary complexity.

Second, if you rely heavily on precise stroke effects that depend on path direction — such as dashed lines, arrowheads, or stroke alignment — traditional paths are more reliable. Penpot's vector network stroke implementation is still maturing, and some features may not behave as expected. For production work with strict stroke requirements, it's safer to use traditional paths until the network model catches up.

Third, if you need to collaborate with teams using other vector tools (Adobe Illustrator, Figma, Sketch), vector networks may cause interoperability issues. While Penpot exports SVG, the network structure is not always preserved when imported into other editors. If your workflow involves frequent round-tripping between tools, stick with traditional paths or compound shapes to ensure compatibility.

Fourth, for very complex illustrations with hundreds of shapes, a single vector network becomes unwieldy. The performance cost and editing difficulty outweigh the benefits. In such cases, use multiple separate networks or traditional paths, and organize them with layers and groups.

Finally, if your team is not willing to invest in learning the new paradigm, forcing vector networks will lead to frustration and reduced productivity. The learning curve is real, and without buy-in from the team, the feature may cause more harm than good. Start with a small pilot project to evaluate whether vector networks fit your team's workflow before committing to them for all projects.

Open Questions / FAQ

How does Penpot's vector network handle SVG export?

Penpot exports vector networks as SVG paths, but the network topology is not directly represented in standard SVG. The export converts the network into one or more SVG path elements, with holes represented using the even-odd fill rule or separate subpaths. This means that when you import the SVG into another tool, the network structure is lost — you get a static path. For round-trip editing within Penpot, the network is preserved in the native format. If you need to maintain editability across tools, consider exporting to Penpot's native format or using a plugin.

Can I use vector networks for 3D-like shapes?

Vector networks are fundamentally 2D, but they can simulate some 3D effects through overlapping faces and gradients. For example, you can create a network that represents a cube's faces as separate closed loops within the same network, then apply different fills to each face. However, true 3D modeling is beyond Penpot's scope. For isometric or pseudo-3D designs, vector networks can be useful for maintaining consistent topology across faces.

What is the performance impact of vector networks on large files?

Performance depends on the number of nodes, edges, and faces in the network. For networks with fewer than 100 nodes, the editor remains responsive. Beyond that, operations like fill detection and node dragging may become sluggish. Penpot is actively optimizing, but for large-scale illustrations, it's best to split the design into multiple smaller networks. Using groups and layers can help manage complexity.

Will Penpot add more advanced network features like booleans or pathfinder?

Penpot's development roadmap includes improvements to vector networks, such as better boolean operations, path simplification, and more robust stroke handling. The open-source community is also contributing plugins that extend functionality. Check the official Penpot blog and GitHub repository for the latest updates. As of now, the core network editing is stable, but advanced boolean operations are not yet as polished as in some commercial tools.

For teams considering a switch, we recommend starting with a small project to evaluate the fit. Vector networks offer a genuine alternative to traditional path editing, but they require a shift in mindset. When used appropriately, they can streamline complex shape creation and reduce reliance on boolean operations. When misapplied, they can add unnecessary complexity. The key is to understand the topology of your shapes and choose the right tool for each part of your design.