Canvas Path Animations using SVG
Draw anything along an arbitrary path by combining the Canvas API with two little-known SVG methods - getTotalLength() and getPointAtLength().
Yoav I. Kadosh's Blog
Tutorials and live code examples for web developers, focused on React, CSS, animation, graphics, and more!
Latest posts
Bosch GAS 12-25 PL Reinforced Replacement Parts
Risk Matrix
MockPilot – Turn any webpage into an editable mockup
MockPilot
Turn any live webpage into an editable mockup on your desktop, using natural language - no design or coding skills needed. Capture full pages or single components from any URL, auto-extract typography, colors, components and icons into a reusable asset library, then edit in plain English with an AI that keeps everything on-brand. Export as clean, standalone HTML. Free & open source, for macOS and…
3D Card Effect
Generative Gradient Blobs
Photo Easel
IKEA Highchair Footrest Clamp
Wall Chess
Adjustable Hole Drill Storage Box (120mm)
KeyFlip Assembly Instructions
KeyFlip
My Thoughts on the AI Revolution
Is AI going to replace engineers? A post about AI, written with the aid of AI.
useCanvasAnimation()
A React hook for rendering canvas animations
Debugging "max serverless size exceeded" in Next.js
How to debug the "A Serverless Function has exceeded the unzipped maximum size of 250 MB" error in Next.js & Vercel
Gallery Wall Picture Frames
Guitar Tuner Battery Cap
Picture Frame Spacer & Level
Light Switch Mount for HSW
3D Pen Holder for HSW
Cart Coin (5 Shekels)
Bosch Multitool Holder
Tool Set Holder for HSW
Brick Drawer Handle
Planter Box
A custom built wooden planter box that wraps the corner of my apartment
Skipping Rope Handles
HSW for AMS Riser V2 (Honeycomb Storage Wall)
Brick Base Plate with Logo (22x22)
Star of David Pendant (Freeform/Sketchy)
Half-Shekel Coin
iPhone 15 Pro Camera Guard
Israel Keychain
Lego Cabinet
A Lego cabinet that I built for my son, with 6 drawers, internal dividers, 3d printed handles and side panels, and wheels
GradientArt Speed Tutorial - How to create a shingles pattern
GradientArt - 2023 New Features
Waterfall Tables
Two beautiful waterfall tables made from oak, ipe and poplar wood
GradientArt Tutorial - How to create the Minecraft Creeper
Solar Eclipse
<MouseTracker/>
A react component that follows your mouse
Rabbit Hutch
A 2-story outdoor rabbit hutch with a hiding spot for our rabbits
Friendship Bench
A wooden bench I made for my daughter's school, in memory of the Dee family
Book Shelves
A set of narrow book shelves I made for a spot in our hallway
useGlobalState()
Sharing state between React components without context or fancy libraries
usePerishable()
A React hook for creating perishable elements for animation purposes.
<CodePen/>
A React component for embedding CodePens
3D Color Picker
3D text
A sass function for generating 3D text with a clever use of CSS text-shadow
Notify
A notification/toast library for React, inspired by iOS. The notifications are stacked to conserve space and can be dismissed by using the close button (they automatically disappear when their timeout expires).