UD5 Toolkit
Binary Number Explainer - Online Visual Bit Representation
Enter a decimal number and see a visual breakdown of bits, place values, and bitwise operations. Learn binary easily.
Tag: Visual Math Tools
20+ toolsCSS Filter Visual Editor - Online Apply & Chain Filters
Add multiple CSS filters (grayscale, blur, hue‑rotate) to an image. See the combined effect. Copy the CSS filter value.
CSS Blend Mode Playground – Online background-blend-mode & mix-blend-mode
Load images or use colors and apply all 15 CSS blend modes. Visual tester for creative effects.
CSS Grid Placement Playground - Online Visual Area Builder
Drag items into grid cells and see the resulting grid‑area or line‑based placement code. Learn how auto‑placement and spanning work.
Traceroute Simulator - Online Visual Hop Path
Simulate a traceroute by entering a destination IP. Learn about AS paths and latency. Does not send real packets; educational visualisation.
Breathing Exercise Timer - Online Inhale Hold Exhale Visual Guide
Animated circle guides your breathing: breathe in, hold, breathe out. Customizable ratios (e.g., 4-7-8). Soothing colors, optional bell sound. Purely local.
CSS Grid Layout Builder - Online Visual Drag & Drop
Add rows and columns, merge cells, and set gaps visually. Get the grid‑template CSS and HTML. Fast layout prototyping.
CSS Transition Playground - Online Visual Easing Curve Builder
Choose a property, duration, and bezier curve. Trigger the transition and see the animation. Copy the complete CSS rule.
AudioContext Sandbox - Online Web Audio API Visual Programming
Connect oscillators, gain nodes, and filters with a visual graph. Hear the result in real time. Learn Web Audio interactively.
Text to Binary Grid - Online Visual Representation
Enter text and see each character's 8‑bit binary laid out in a black‑and‑white grid. Beautiful data art. Local.
Cron Job Simulator - Online Visual Schedule Tester
Set a cron expression and see a calendar of the next 1,000 execution times. Never miss a schedule again.
Visual CSS Specificity Calculator - Online (0,0,1) Style
Enter a CSS selector and see its specificity broken down into A,B,C columns with a visual weight comparison. Learn specificity.
Collatz Conjecture Visualizer - Online Hailstone Numbers
Enter a number and see its Collatz sequence graphed. Watch the steps until it reaches 1. Mesmerizing math.
CSS Grid Auto Placement Demo - Online How Items Flow
See how grid-auto-flow: row vs column changes item placement. Add and remove items to understand the algorithm. Visual.
GraphQL Query Builder - Online Visual Construct Request
Build a GraphQL query by selecting fields and nesting visually. Copy the built query string. For learning and fast prototyping.
Venn Diagram Builder - Online 2‑ & 3‑Set Overlap Visualizer
Create simple 2‑ or 3‑set Venn diagrams by entering comma‑separated lists. Shareable via URL fragment. No account.
Decision Tree Builder - Online Visual Yes/No Path
Build a simple decision tree by adding yes/no nodes. Flowchart style. Export as text outline.
Keyboard Layout Tester - Online Visual Key Press Viewer
Press any key and see it light up on a standard QWERTY layout. Check functionality or demonstrate shortcuts.
Digital Hourglass - Online Visual Timer with Sand
An animated hourglass that you can set for any time. Watch the sand flow. Beautiful and calming timer.
Prime Factor Tree Generator - Online Visual Factorization
Enter a number and see an animated factor tree breaking it down to primes. Perfect for teaching factorization.