Pigment Mixing Simulator - Online Color Blending Tool
Mix two or more colors using subtractive (CMYK‑like) blending. See what happens when you combine real paints. Brush effect canvas.
UD5 Toolkit
Experience real-time fluid dynamics rendered entirely in your browser using WebGL. Click, drag, and watch colorful ink swirl and diffuse like liquid in water.
WebGL Fluid Simulation is a browser-based implementation of fluid dynamics that uses your GPU (Graphics Processing Unit) to simulate the behavior of liquids in real time. It solves the Navier-Stokes equations — the mathematical formulas that describe how fluids move — directly in your browser using shader programs. The result is a beautiful, interactive visualization where colorful "ink" disperses, swirls, and flows naturally as you interact with it.
The simulation processes several steps per frame: Advection moves the dye and velocity fields along the flow; Diffusion spreads the ink and velocity naturally; Pressure solving ensures the fluid remains incompressible (like real water); and Vorticity confinement preserves fine swirling details. All these calculations run as WebGL fragment shaders on your GPU, enabling smooth 60fps performance even with complex fluid patterns.
Yes! This tool is fully optimized for mobile and tablet devices. The simulation automatically adjusts its internal resolution based on your device's capabilities. Touch interactions are supported — simply swipe and tap on the screen to add ink and create fluid motion. The control panel is responsive and adapts to smaller screens for comfortable one-handed use.
You can choose from five color presets: Rainbow (full spectrum colors that shift based on velocity direction), Ocean Blue (calming blue-teal gradients reminiscent of tropical waters), Fire (warm oranges and reds like flames), Aurora (vibrant greens, cyans, and purples inspired by the Northern Lights), and White Ink (classic monochrome for a clean, elegant look). Each mode creates a distinctly different visual experience.
Yes. The underlying math is based on the incompressible Navier-Stokes equations, which are the fundamental equations governing fluid motion. The simulation uses a grid-based Eulerian approach with semi-Lagrangian advection and Jacobi iteration for pressure solving — techniques widely used in computational fluid dynamics (CFD). While simplified for real-time performance, the core physics accurately models how real fluids behave.
Use the camera button (📸) in the control panel to capture a high-resolution screenshot of your current canvas. The image will be downloaded directly to your device as a PNG file. You can share it on social media, use it as wallpaper, or incorporate it into digital art projects. For the best results, let the simulation run for a while to build up complex, beautiful patterns before capturing.
Beyond being visually mesmerizing, fluid simulations are used in video game development (realistic water and smoke effects), film VFX (ocean waves, explosions), engineering (aerodynamics testing, weather modeling), medical imaging (blood flow analysis), and digital art. This browser-based tool demonstrates how accessible GPU computing has become — complex physics that once required supercomputers now runs in real time on consumer devices.
All modern browsers support WebGL, including Chrome (version 9+), Firefox (version 4+), Safari (version 8+), Edge (version 12+), and Opera (version 12+). For the best experience, we recommend using an up-to-date version of Chrome or Firefox with hardware acceleration enabled. The simulation will automatically fall back gracefully on older hardware, though frame rates may vary.
Mix two or more colors using subtractive (CMYK‑like) blending. See what happens when you combine real paints. Brush effect canvas.
Visualize Brownian motion with hundreds of particles. Adjust temperature and viscosity to see diffusion changes. Educational science tool.
Render 1000 styled elements using inline styles vs. CSS classes and compare time. Understand CSS‑in‑JS trade‑offs.
Recreate the target CSS linear gradient by adjusting stops and colors. A unique game for front‑end developers to master gradients.
See how `animation‑composition: replace, add, accumulate` works by layering animations on the same property. Understand the spec.
Keep one selected color and turn the rest of the image to grayscale. Eye‑catching selective color effect. Pure canvas.
Apply a realistic oil painting texture to your photo. Adjust brush size and roughness. Brush stroke simulation.
Generate dynamic placeholder images by specifying width, height, colors, and text. View instantly as a URL you can embed in mockups. Canvas-based.
Fill in a component name and generate a complete Stencil.js component with TSX, CSS, and test files. Quick start.
Load a sprite sheet, define frames, and play an animation on a canvas. Control frame rate and loop. Game dev tool.
Create beautiful, syntax-highlighted screenshots of your code snippets. Choose themes and export as PNG. All client-side canvas rendering.
Create a looping animated gradient background with multiple color stops. Copy the complete CSS keyframes. Eye‑catching.
Create a random magical item with a name, effect, and lore for your RPG session. Perfect for dungeon masters. No API.
Apply real-time CSS filters or canvas effects to a video and download the processed output. Experiment with video post-processing locally.
Control a lunar module and try to land softly on the moon. Manage fuel and thrust. Classic arcade physics. Canvas.
Generate an SVG placeholder image with custom text, width, height, and colors. Use as a placeholder service. Pure SVG.
Search and copy HTML entities for arrows, math, currency, and symbols. See the glyph and code. Fast reference.
Drop a PDF and extract any embedded JavaScript or form actions. Check for malicious code. Privacy‑friendly analysis.
Add a soft vignette to your photo. Control radius, darkness, and feathering. Creates a classic photographic look.
Limit browser gestures on an element: pan‑x, pinch‑zoom, manipulation. Draw on a canvas to test. Mobile dev helper.
Generate a subtle or heavy noise/grain texture as a CSS background. Adjust intensity and color. Copy the small code.
Rotate the hue of any image globally. Turn a red car blue instantly. Download the result. Works entirely in the browser.
Chain multiple CSS filter functions and see the result on an image. Copy the filter string. No upload.
Automatically remove white background from an image and make it transparent. Adjust tolerance. Save as PNG.
Generate a link to an SVG placeholder image with a custom width, height, and text. Use as dummy image src. No server.
Add a dramatic fire or flame overlay to any image. Realistic blending. Adjust intensity. Download the hot result.
Interactive cheatsheet for JavaScript regular expressions with live examples. Click any token to see its explanation and test it on sample text immediately.
Generate the doGet() and doPost() boilerplate for a Google Apps Script web app. Ready to paste into the editor.
Preview different touch feedback patterns (scale, color, ripple) for mobile buttons. Copy the CSS and HTML. Improve mobile UX.
Click on a box to set the transform‑origin point and see how rotations and scales change. Copy the CSS.