Creating Generative Art with Threlte: A Tribute to Lygia Clarke

The intersection of mathematics, code, and visual art has always fascinated me. Recently, I discovered an incredible tutorial on creating generative artwork inspired by Brazilian artist Lygia Clarke, whose minimalist geometric paintings provide the perfect foundation for algorithmic interpretation.

The original tutorial used React Three Fiber, but I was curious: could I adapt this to work with Threlte, Svelte’s Three.js wrapper, and integrate it seamlessly into my SvelteKit blog? The answer is absolutely yes, and the result is even more elegant.

The Power of Breaking Grids

What makes this generative system compelling isn’t just the grid—it’s how we deliberately break it. Clarke’s original works show intentional deviations from perfect regularity, creating rhythm and visual interest through controlled chaos.

The algorithm starts with a systematic grid but introduces several layers of variation:

1. Column Width Variation

Rather than uniform columns, the system designates certain columns as “small” and others as “wide,” then uses Simplex noise to add organic variation to these base proportions.

2. Color Distribution Rules

Colors aren’t randomly distributed. The system follows rules inspired by Clarke’s work—certain colors appear more frequently in wider columns, while others are restricted to narrower sections.

3. Noise-Driven Positioning

Every element’s final position is influenced by 2D noise functions, creating smooth, organic variations that feel natural rather than computerized.

Why Threlte?

Adapting this from React Three Fiber to Threlte revealed some interesting advantages:

Reactive by Design: Svelte’s reactivity makes it trivial to update the entire artwork when parameters change. No need for complex state management—just reactive statements.

Smaller Bundle Size: The Threlte version is significantly lighter than its React counterpart, loading faster and consuming less memory.

Simpler Component Architecture: Svelte’s straightforward component model makes the code more readable and maintainable.

Technical Implementation

The core challenge was translating React Three Fiber’s useFrame hook to Threlte’s equivalent, and managing the instanced mesh updates efficiently. Here’s how the key pieces work:

// Reactive calculations update automatically when props change
let squares = $derived(mounted ? calculateSquares(width, height, columns, rows, smallColumns) : [])
let colors = $derived(mounted ? calculateColors(columns, rows, palette, smallColumns) : new Float32Array())

// Animation loop updates instance matrices
$effect(() => {
    if (mounted && useFrame) {
        useFrame(() => {
            if (!meshRef || !squares.length) return
            
            for (let i = 0; i < squares.length; i++) {
                const { x, y, scaleX, scaleY } = squares[i]
                dummy.position.set(x, y, 0)
                dummy.scale.set(scaleX, scaleY, 1)
                dummy.updateMatrix()
                meshRef.setMatrixAt(i, dummy.matrix)
            }
            meshRef.instanceMatrix.needsUpdate = true
        })
    }
})

The beauty lies in how Svelte 5’s new reactivity primitives ($derived, $effect, $state) automatically recalculate the grid when any parameter changes, while Three.js handles the heavy lifting of rendering thousands of instances efficiently.

Beyond the Grid

What started as a recreation exercise opened up endless possibilities. Try different settings in the interactive version above:

• Richter Mode: Set columns to 1 and rows to high values for stripe patterns reminiscent of Gerhard Richter’s work
• Mondrian Style: Use the monochrome palette with high contrast settings
• Organic Flow: Increase the grid size and use the ocean palette for more fluid, natural-feeling compositions

The system demonstrates how simple rules, when combined with controlled randomness, can generate infinite variations while maintaining artistic coherence.

What’s Next?

This exploration has me thinking about other generative art techniques that could work beautifully in Svelte:

• Flow Fields: Using vector fields to guide particle movement
• Recursive Patterns: Self-similar structures that scale infinitely
• Data-Driven Art: Translating real datasets into visual patterns

The combination of Svelte’s developer experience, Threlte’s Three.js integration, and the web’s accessibility makes it an incredibly powerful platform for generative art experimentation.

Want to dive deeper? Check out the original tutorial that inspired this adaptation, and experiment with the interactive version above. Each generation creates something unique.