SVG Circuit Library

A scalable, mathematically precise vector-based library for building beautiful electronic schematics in pure HTML/SVG.

Read Detailed Description

The components in this library are strictly designed on 100x100 and 200x200 grid systems. This methodology ensures that when you visually stack or align modules, their input and output pins seamlessly snap together without complex manual wire routing or overlapping. Each symbol is defined efficiently once within an SVG <defs> block and seamlessly instantiated multiple times across the page using the standard <use> element.

Component Catalog & Exporter
Example: Symmetrical Astable Multivibrator
VCC IN GND R1 (1k) R2 (47k) D1 Q1 R3 (47k) R4 (1k) D2 Q2 C1 (10µF) C2 (10µF)
Example: NE555 Timer Internal Schematic
VCC 8 GND 1 5kΩ 5kΩ 5kΩ 2/3 VCC 1/3 VCC Comp 1 Comp 2 Discharge Reset 4 Threshold 6 Control 5 Trigger 2 Output 3 Discharge 7
How to Design Elements (Tutorial)

Every component in this library is mathematically designed within a standard 100x100 coordinate grid. To ensure elements snap together perfectly without manual wire routing, align physical connection points strictly to precise grid coordinates. For example, a transistor places its Base at (0, 50), Collector at (50, 0), and Emitter at (50, 100).

0 50 100 0 50 100 Center (50, 50) Base (0, 50) Collector (50, 0) Emitter (50, 100) viewBox="0 0 100 100"

Designing Larger Modules (e.g. analog components)

Complex components can use larger module footprints (like 200x200) to accommodate more pins. To maintain full compatibility with the rest of the libraries, ensure all connection points strictly map to the standard 50-unit snapping grid.

0 50 100 150 200 0 50 100 150 200 In+ (0, 50) In- (0, 150) Out (200, 100) V+ (100, 0) V- (100, 200) viewBox="0 0 200 200"