Digital Art · Creative Coding · Web Technologies

Art Made with Code

Generative, interactive, and algorithmic visual works - exploring the intersection of design, technology, and human perception through HTML, CSS, JavaScript, and Canvas.

"Code is not merely a tool - it is a medium. Like ink on paper or light through glass, programming languages carry their own aesthetic possibilities. My digital works explore how algorithms can generate beauty, how interaction can create meaning, and how the web browser itself becomes a gallery wall."
Sara Bensalem - Artist Statement
01 - Generative Works

Algorithmic Compositions

Interactive visual compositions generated in real-time using JavaScript and the HTML5 Canvas API. Each piece responds to viewer interaction - move your cursor to influence the work.

Mondrian Generator Preview
JavaScript · Canvas · Interactive Controls · Downloadable

Mondrian Generator

An interactive De Stijl composition tool - customize primary colors, grid density, line weight, and recursion depth. Download your creation as a Pantone-style swatch card with QR code.

interactivede-stijlparametricdownloadable
Launch Tool →
JavaScript · CSS · Mathematical Functions

Tessellation Study

Geometric tessellations generated from architectural proportioning systems - exploring the mathematical foundations of Islamic geometric art through code.

geometrypatternarchitecture
JavaScript · Perlin Noise · Color Theory

Chromatic Field

A living color field that breathes and shifts - noise-driven gradients inspired by the way natural light transforms architectural surfaces throughout the day.

noisecolorambient
JavaScript · Canvas · Recursive Algorithms

Recursive Canopy

A fractal tree system that grows and sways in response to cursor movement - each branch angle determined by recursive subdivision and noise perturbation.

fractalrecursiveorganic
02 - Typographic Experiments

Letters in Motion

Explorations of typography as living, dynamic form - where letterforms become data visualizations, respond to interaction, and challenge the static conventions of print design.

JavaScript · Canvas · Typography

Décomposition

Letterforms deconstructed into constituent geometric elements - each character broken into arcs, stems, and serifs, then reassembled algorithmically.

typographydeconstructionmotion
JavaScript · SVG · Animation

Waveform Script

Text rendered as oscillating waveforms - where the written word becomes a visual frequency, merging linguistic meaning with mathematical rhythm.

wavestextaudio-visual
03 - CSS Compositions

Pure Stylesheet Art

Visual compositions created entirely with CSS - no images, no JavaScript. Exploring the expressive boundaries of stylesheets as an artistic medium.

Pure CSS · Transforms · Blend Modes

Interference Pattern

Overlapping CSS radial gradients with mix-blend-mode create moiré-like interference patterns - pure visual mathematics without a single line of JavaScript.

css-onlyblend-modesoptical
Pure CSS · Grid · Custom Properties

Grid Meditation

A rhythmic composition of CSS Grid cells animated with staggered delays - exploring the contemplative potential of systematic repetition and variation.

css-onlygridrhythm

source.js