My story: RanPic

Default profile pictures are ubiquitous across the modern web. When a new user signs up without uploading a photo, platforms often assign either a generic gray silhouette or a basic grid-based avatar—such as the pixelated 5×5 Identicons pioneered by GitHub and Gravatar. While deterministic and functional, these conventional avatars can feel rigid, low-resolution, and visually repetitive.

RanPic was created to reimagine default user identity graphics as vibrant, organic, kaleidoscope-like abstract artworks. Rather than constraining designs to pixel grids, RanPic uses smooth geometric primitives, dynamic color harmonies, and kaleidoscopic symmetry to generate unique, high-resolution avatars. Users can select a dominant hue, fine-tune color saturation, adjust layer ordering, and generate distinctive visuals instantly. You can test the generator live at ranpic.netlify.app.

A common challenge in procedural graphic generation is avoiding the visual chaos of uniform pseudo-randomness. When coordinates and sizes are chosen with purely flat distributions, shapes scatter unnaturally, creating noisy and unappealing compositions.

To achieve natural clustering and aesthetic balance, RanPic implements a custom Gaussian normal distribution using the Box-Muller transform. This algorithm samples random numbers centered around a mean with calibrated standard deviation, guiding coordinates, shape dimensions, luminosity, and saturation toward organic focal points rather than flat random noise.

Each avatar composition renders between 15 and 25 geometric primitives, randomly alternating between triangles and rotated ellipses.

The color system is built on the HSLA model. Users select a base hue (0° to 360°) using an interactive full-spectrum slider with a real-time color preview swatch. Saturation is dynamically calculated from a user-adjustable saturation skew slider, while luminosity is sampled from a normal distribution across the brightness spectrum. Furthermore, an alpha transparency probability model applies variable opacity (ranging from 0.6 to 1.0) to 60% of shapes, producing a delicate optical layering where overlapping geometric figures interact.

To grant users creative control over visual depth, RanPic features an interactive layer sorting engine. Users can order the generated shape stack by opacity, saturation, or luminosity in either ascending or descending sequence. Sorting by opacity pushes translucent shapes to the background while bringing solid forms forward (or vice versa), while luminosity sorting creates glowing radial highlights or dramatic dark accents that completely transform the composition's mood.

The hypnotic mandala aesthetic is achieved through a multi-step four-fold symmetry pipeline:

1. Quadrant Extraction. All geometric shapes are first rasterized onto a base canvas quadrant (256×256 pixels) transferred via an ImageBitmap.

2. Symmetrical Transformations. The extracted quadrant is cloned into three mirrored variations using 2D canvas transformation matrices: a horizontal flip, a vertical flip, and a 180-degree rotation.

3. Final Composition. The four quadrants are stitched together onto a 512×512 final canvas, creating a seamless kaleidoscope.

Users can toggle between white, deep black, or transparent alpha backgrounds. An integrated checkerboard preview ensures transparent avatars can be clearly inspected before export.

Complex 2D canvas calculations (generating normal distribution variables, drawing rotated ellipses and multi-point paths, matrix transformations, and encoding high-resolution PNG blobs) can easily monopolize the main browser thread. On mobile devices or lower-powered hardware, doing this work on the main thread would cause dropped frames, janky slider dragging, and unresponsive button interactions.

RanPic resolves this by offloading the entire rendering pipeline to a dedicated background thread using the standard Web Workers API and OffscreenCanvas API. When the user clicks “Generate” or adjusts generation parameters, the Vue front-end dispatches an initialization message to the worker. The worker handles all procedural math, draws to an isolated OffscreenCanvas, applies quadrant transformations, and asynchronously converts the final canvas into an image blob, which is posted back to the main thread and mapped to a reactive object URL.

Clicking or tapping the rendered image triggers an immediate one-click download with an auto-generated random filename.

The project originally began as a server-side proof-of-concept implemented in PHP using the GD graphics library. While functional, server-rendered image generation incurred unnecessary network latency, required dedicated server compute resources for every image generation, and prevented offline usage.

To modernize the architecture, I completely redesigned and rewrote RanPic as a 100% client-side single-page application using Vue 3 , TypeScript, Vite, and Tailwind CSS. The responsive interface includes custom-styled spectrum range inputs and system-aware dark mode support.

RanPic is configured as a standalone Progressive Web App (PWA) powered by vite-plugin-pwa. The build pipeline generates a custom web application manifest and automatically registers an auto-updating service worker that precaches all HTML, CSS, JavaScript, worker scripts, and icons. As a result, RanPic can be installed directly to the home screen on iOS, Android, or desktop, operating fully offline with zero internet connectivity. The production build is continuously deployed to Netlify for rapid, global edge delivery.