UD5 Toolkit
WebGPU Bunny Demo - Online Simple 3D Renderer
Render the classic Stanford Bunny with a basic WebGPU pipeline. Rotate and zoom. Check if your browser supports WebGPU.
Tessellation Maker - Online M.C. Escher Style Tiling
Tessellation Maker
Drag the slider to add/remove control points (resets shape).
A tessellation (or tiling) is a pattern of shapes that fit together without any gaps or overlaps, covering a plane. They are often studied in geometry and art.
You edit the top and left edges of a square. The opposite edges are automatically mirrored so the shape can tile perfectly. Drag the control points on the highlighted base cell to create unique shapes.
Maurits Cornelis Escher was a Dutch graphic artist known for his mathematically inspired woodcuts, lithographs, and mezzotints. His work features impossible constructions, explorations of infinity, and tessellations of interlocking figures like birds, fish, and lizards.
Yes! Click the "Download PNG" button to save your tessellation as a high-quality PNG image.
The small circular handles on the base cell (first tile) let you modify the top and left edges. Drag them to create interlocking shapes — the other tiles update automatically.
Live Drawing Board - Online Freehand Sketch & Save
A beautiful full‑screen drawing canvas with variable brush sizes, colors, and an eraser. Export your sketch as PNG. All data stays local.
Canvas Compositing Demo - Online Blend & Clip Visual
Draw shapes and experiment with globalCompositeOperation. See Porter‑Duff operators in action. Great for game devs.
Flappy Bird Clone - Online Side‑Scroll Tap Game
Help the bird fly through pipes without touching them. Click or tap to flap. Track your high score in localStorage. Classic time‑waster.
scroll‑start Property Playground - Online Carousel Initial Snap
Define the initial scroll position for a scroll container with scroll‑start. Test with and without snapping. New feature.
Canvas Splatter Paint - Online Random Jackson Pollock
Move your mouse or finger to create colorful paint splatters on canvas. Great stress reliever. Download as PNG.
CSS Paint Cost Benchmark - Online Measure Style Performance
Add many complex CSS styles and measure frames per second. Isolate expensive properties. Practical performance lab.
Intersection Observer Sandbox - Online Visual Threshold
Adjust root, margin, and threshold. See a live log of intersection events as you scroll. Debug lazy loading.
Soap Recipe Calculator - Online Lye & Oil Saponification
Create a custom soap recipe by selecting oils and their percentages. Get precise lye and water amounts. Safety warnings included.
CSS Paint Worklet Live Editor - Online Houdini Sandbox
Write a paint worklet in JavaScript and see it used as a CSS background instantly. Experiment with Houdini. Local.
HTML Meta Inspector - Online View All Page Meta
Paste a URL and extract all meta tags, Open Graph, Twitter Cards, and JSON‑LD. View in a friendly table. Client‑side fetch.
GeoJSON Map Previewer - Online Render on Interactive Map
Paste GeoJSON and instantly see it drawn on a draggable map. Supports points, lines, and polygons. Local fetch of tiles.
CSS Paint Worklet Playground - Online Houdini Backgrounds
Register and apply a custom paint worklet to draw a background pattern dynamically. Write the paint function in the browser.
Tip Pool Splitter - Online Fair Share for Staff
Divide pooled tips among staff based on hours worked or weighted percentages. Ensures fair distribution. Instant local calculation.
JavaScript Proxy Playground - Online Observe Object
Apply a Proxy to an object and see the get/set traps log fired in real time. Understand metaprogramming. Local.
Tie‑Dye Pattern Visualizer – Online See Fold & Dye Result
Click on a fold technique (spiral, crumple) and see a predicted color pattern. Print folding guide.
Friendship Bracelet Pattern Maker – Online Knots & Colors
Choose colors and knot types to design a bracelet pattern. See visual guide. Save locally.
Bead Pattern Designer – Online Visual Stringing Sequence
Drag colored beads onto a virtual thread to design a repeating pattern. See total length. Save locally.
Crossword Solver - Online Find Words by Pattern ?a?e
Enter word pattern with ? for unknown letters and known letters to find matching dictionary words. Essential crossword help. Local dictionary.
Fun IQ Puzzle Challenge - Online Pattern Recognition Test
Complete a series of visual pattern puzzles and get a fun estimated score. Purely for entertainment. No data collected.
Sewing Pattern Layout Optimizer - Online Minimize Waste
Place rectangular pattern pieces on a virtual fabric width to optimize cutting layout and reduce waste. Simple manual drag & drop. Local only.
Image to Cross Stitch Pattern - Online Convert Photo to Grid
Upload a photo and convert it to a pixelated cross-stitch pattern with DMC floss color matching. Adjust size and color count. Local processing.
Emoji Background Pattern Generator - Online Repeat CSS
Select emojis and arrange them into a seamless tiling background. Copy the CSS data‑URI or download as image.
Halftone Dot Pattern Generator - Online Pop Art Effect
Create a halftone dot pattern from two colors. Adjust dot size and spacing. Get the CSS or download as image.
Canvas Pattern Maker - Online Repeat Image Tiles
Upload a small image and see it tiled as a canvas pattern. Export the pattern or copy the JavaScript.
Background‑Blend‑Mode Explorer - Online Layer Patterns
Stack multiple background images and blend them with colors. Create unique textures. Copy the CSS code instantly.
CSS Checkerboard Pattern - Online Background Generator
Create a customizable checkerboard or grid background using pure CSS gradients. Adjust cell size and colors. Copy the code.
Text Watermark Tile Generator - Online Pattern Overlay
Create a repeating text pattern from a short string for watermarking documents or images. Download SVG pattern.
Morse Code Ringer - Online Custom SMS Alert Pattern
Create a custom vibration or beep pattern from a short Morse code message. Design unique ringtone ideas.
Image to Embroidery Pattern - Online Cross‑Stitch Chart
Convert a photo into a color‑reduced embroidery or cross‑stitch pattern with DMC thread colors. Adjust size and palette. Print chart.