Advanced QR Code Generator with Custom Patterns & SVG Export

Description:

This enterprise-grade QR code generation engine implements the complete QR code specification (ISO/IEC 18004) to create customizable, high-quality QR codes with advanced pattern optimization. Built with vanilla JavaScript, it demonstrates complex algorithm implementation, Reed-Solomon error correction, and sophisticated data encoding techniques for professional applications.

Unlike basic QR generators that rely on third-party libraries, this implementation features automatic version selection, intelligent mode detection, optimal mask pattern selection, and customizable module shapes - delivering professional-grade QR codes with complete control over the generation process.

The application showcases bit-level data encoding, error correction coding, pattern optimization algorithms, and SVG rendering - essential capabilities for building sophisticated data encoding applications that require precise control over the output quality.

The Challenge:

Most QR code generators either rely on heavy third-party libraries or provide limited customization options. I wanted to create a completely self-contained, standards-compliant QR code generator that implements the full QR specification while providing extensive customization options and optimal visual results.

Development Story:

This project required deep understanding of the QR code specification and error correction algorithms. The most complex aspect was implementing the Reed-Solomon error correction system that ensures QR codes remain scannable even with up to 30% damage, while optimizing mask patterns for maximum readability.

Key Challenge: Creating a fully self-contained QR generation engine that handles all version sizes (1-40), multiple encoding modes (Numeric, Alphanumeric, Byte), and automatically selects optimal parameters while maintaining high performance and visual quality.

Technologies Used:

• HTML5 - Semantic structure with canvas fallback and accessibility
• CSS3 - Responsive design with CSS custom properties and animations
• JavaScript ES6+ - Bitwise operations, binary encoding, and matrix manipulation
• Reed-Solomon Algorithm - Custom implementation for error correction coding
• SVG Generation - Vector-based output with customizable module shapes
• Web Workers - Background processing for large QR code versions

Technical Architecture:

• Complete QR Implementation - Full ISO/IEC 18004 specification compliance
• Multi-Mode Encoding - Automatic detection and optimization of encoding modes
• Error Correction - Custom Reed-Solomon implementation for data integrity
• Mask Optimization - Penalty score calculation for optimal pattern selection
• Vector Output - SVG generation with multiple module shape options

Technical Implementation:

• Data Encoding: Multi-mode detection with automatic version selection
• Error Correction: Custom Reed-Solomon implementation for ECC generation
• Pattern Placement: Finder, alignment, timing, and format pattern integration
• Mask Evaluation: Penalty score calculation across 8 mask patterns
• SVG Rendering: Vector output with rectangle, circle, and rounded shapes

Core Functionality:

• Full QR code specification support (versions 1-40 with all ECC levels)
• Intelligent mode detection (Numeric, Alphanumeric, Byte encoding)
• Automatic version selection based on data capacity
• Optimized mask pattern selection for best readability
• High-quality SVG export with customizable module shapes

User Experience:

• One-click generation with intelligent parameter selection
• Visual feedback with QR code preview and detailed metadata
• Multiple module shape options (rectangle, circle, rounded corners)
• Comprehensive QR code information display (version, mask, ECC level, size)

Technical Features:

• Full QR specification compliance (versions 1-40)
• Custom Reed-Solomon error correction implementation
• Intelligent mode detection and version selection
• Mask pattern optimization with penalty scoring
• Vector SVG output with multiple styling options

How to Use:

• Enter any text, URL, or data to encode in the QR code
• The system automatically selects optimal version and encoding mode
• Click 'Generate QR Code' to create your QR code
• Download as SVG for scalable, high-quality output
• View detailed QR code parameters below the generated code

Code Highlight:

// Reed-Solomon error correction implementation
function generateECC(data, ecBytes) {
    const gf = new GF(0x11d, 0);
    const msg = [...data, ...Array(ecBytes).fill(0)];
    
    for (let i = 0; i < data.length; i++) {
        const coeff = msg[i];
        if (coeff !== 0) {
            for (let j = 0; j < ecBytes; j++) {
                msg[i + j + 1] ^= gf.mul(gf.genPoly[j], coeff);
            }
        }
    }
    return msg.slice(data.length);
}

Key Learnings:

• Mastered complex data encoding algorithms and bit-level operations
• Deep understanding of error correction mathematics and Reed-Solomon codes
• Learned to implement full international standards from specification documents
• Gained expertise in matrix manipulation and pattern optimization algorithms

Future Enhancements:

• QR code with embedded logo/image support
• Animated QR code generation with dynamic content
• Bulk QR code generation from CSV/Excel files
• QR code scanning and decoding functionality
• Custom color schemes and gradient support
• PNG/JPEG export with configurable resolution

Github:

Live demo:

Recommended Tools:

This project is hosted on Hostinger - get 20% off your first plan with my referral code.

Features:

• Responsive design
• Minimal design
• Full QR code specification support (versions 1-40)
• All error correction levels (L, M, Q, H)
• Intelligent encoding mode detection
• Automatic version selection
• Optimized mask pattern selection
• SVG export with multiple shape options
• Real-time QR code generation
• Comprehensive metadata display
• No external dependencies
• Lightweight and fast performance

Tags:

• #javascript
• #qr-code
• #data-encoding
• #error-correction
• #svg-generation
• #web-utility
• #algorithm-implementation
• #reed-solomon
• #vanilla-js