Simple Weaving Draft Generator - Online 4-Shaft Pattern Creator
Create a simple 4-shaft weaving draft by clicking warp/weft threads. See plain weave, twill, satin. Educational for weavers. Local only.
UD5 Toolkit
Online Animated Paper Folding Guide — Step by Step
Create a simple 4-shaft weaving draft by clicking warp/weft threads. See plain weave, twill, satin. Educational for weavers. Local only.
Visually experiment with Flexbox container and item properties. See the layout update in real time and copy the CSS. Learn by doing, fully interactive.
Find the ideal height to hang art based on wall and furniture dimensions. Follow gallery standard 57‑inch center rule.
Generate the Koch snowflake fractal to a desired iteration level. See how the perimeter grows. Interactive geometric art.
Visually configure scroll‑snap containers and items. Adjust alignment, stop behavior, and padding. Copy the clean CSS instantly.
Create a 'SALE' or 'NEW' corner ribbon in pure CSS. Adjust colors, position, and text. Great for e‑commerce.
Set width, height, depth, and colors to generate an isometric box using CSS transforms. Copy to your project.
Fill in a form to generate a clean, ATS‑friendly one‑page resume. Customize sections, colors, and export as print‑ready PDF. Personal data stays in your browser.
See the difference between clone and slice on inline boxes that break across lines. Useful for multi‑line headings.
Fill in your details and instantly get a clean, printable one-page resume. No sign up, no data leaves your browser.
Generate standard 1D barcodes including CODE128, EAN-13, and UPC-A. Download as image for product labeling or inventory. All processing happens locally.
Learn how to let content extend a few pixels beyond a clip boundary with overflow‑clip‑margin. Interactive playground.
Interactively add and adjust multiple box shadows on a sample element. Drag sliders for offset, blur, spread, and color. Copy the clean CSS code instantly.
Generate a random HTML/CSS card with different box model properties. Inspect and guess the size. For learners.
Change all alignment and justification values and see the flex items move. Indispensable for learning Flexbox.
Calculate how many bottles of puzzle glue you need based on puzzle dimensions. Save a trip to the store. Simple area math.
Create colorful digital sticky notes on a corkboard. Drag, edit, and delete. Notes persist in local storage. No login.
Enter container width, number of items, gap, and flex‑basis. See the resulting sizes instantly. Plan your flex layout.
Design layered box shadows interactively and get the CSS code in real time. Adjust offset, blur, spread, and color. Essential tool for UI designers.
Upload an image and get a suggested alt text description using a local vision model (WASM). Improve SEO and accessibility fast.
Enter spring constant and displacement to find force and stored energy. Visual compression.
Create beautiful, syntax-highlighted screenshots of your code snippets. Choose themes and export as PNG. All client-side canvas rendering.
Select meal type and recommended portion to see suggested plate diameter for appealing plating. Psychology of presentation.
Enter an amount and see a virtual stack of $100 bills with height comparison to everyday objects.
Adjust margin, border, padding, and content sizes interactively and see the rendered box model. Get the exact CSS. Teach or learn layout.
Generate a React custom hook boilerplate with state, effect, and cleanup. Pick the pattern and copy.
Interactive check: if your tile backsplash or paneling adds thickness, determine if you need box extenders.
Load images or use colors and apply all 15 CSS blend modes. Visual tester for creative effects.
Visually design a custom :focus‑visible outline style. Copy the CSS. Better than the default.
Create outlined text with the text‑stroke property. Adjust width and color. Preview and copy the CSS.