The past few weeks/months Steve Ruiz has been teasing a lot of the work he has been doing on tldraw, an app to draw diagrams. never too late for a second pass on the UI — Steve Ruiz (@steveruizok) November 2, 2021 About two weeks ago he released it, and also made the source code …
Tag Archives: drawing
perfect-freehand — Draw perfect pressure-sensitive freehand lines
What a wonderful package by Steve Ruiz: Draw perfect pressure-sensitive freehand lines The results are stunning imo. In the recording above you can see me write hello using the trackpad on my Mac. Yep, that’s without a stylus! Embedded below you can find a Vanilla JS demo, inspired upon the code from the React code …
Continue reading “perfect-freehand — Draw perfect pressure-sensitive freehand lines”
VoCSSels — Easily create 3D CSS & HTML Voxel Models
Crazy work by Jamie Coulter: Build your own 3D CSS and HTML models, export them to CodePen and share with the community. Simply Draw, Extrude, Paint and export! VoCSSels — Easily create 3D CSS & HTML Voxel Models → ❤️ Be sure to give his work a heart on CodePen there.
Drawing Tip: A thicker pen hides mediocrity
Your drawings probably look rubbish because you’re using an old biro that happened to be laying around. Nobody’s used one of these since cassette tapes stopped needing to be fixed, so throw that in the drawer full of batteries, twine and assorted electrical tape from whence it came. Instead, go thicker. Go felt tip. Go …
Continue reading “Drawing Tip: A thicker pen hides mediocrity”
Creating Pixel Art with CSS
Using box-shadow, it’s possible to create a pixels on screen: See the Pen Pixel Art 3: Side-by-Side Box-Shadow by Jacque (@jschrag) on CodePen. As you can define multiple box-shadow entries – comma-separated – it’s possible to draw multiple pixels on screen … Creating Pixel Art with CSS →
Scribit, a robot that can draw on walls
Scribit is a vertical plotter that can draw any content sourced from the web – and update it in real time. It is mounted on a wall using only 2 plugs and a wire in between. You send it an image from within the app and it will start drawing (with support for 4 colors …
Rough.js – Create SVGs with a hand-drawn, sketchy, appearance
Rough.js is a light weight (~8k), Canvas based library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. To get started first create a rough canvas: const rc = rough.canvas(document.getElementById(‘canvas’)); On that rough canvas you can …
Continue reading “Rough.js – Create SVGs with a hand-drawn, sketchy, appearance”
AutoDraw: Fast Drawing for Everyone
After Quickdraw a few months ago – in which A.I. guesses what you are doodling – now comes AutoDraw from Google. AutoDraw is a new kind of drawing tool. It pairs machine learning with drawings from talented artists to help everyone create anything visual, fast. AutoDraw’s suggestion tool uses the same technology used in QuickDraw, …
Two Point Perspective Drawing Hack
As a kid I used to make loads of these kind of images. Pencil in one hand, ruler in the other. Turns out I could’ve ditched the ruler: (via)