Freehand drawing

100%

Freehand drawing

✓ Published0🌍 Public

Last edited Aug 20, 2016

Created on Aug 20, 2016

This freehand drawing application lets users sketch lines with a mouse, stylus, or finger on an SVG canvas, with a palette of ten colors from ColorBrewer’s Dark2 scheme and a trash icon to clear all strokes. It renders each stroke as a smooth, basis-interpolated path via `d3.svg.line`, while using `d3.behavior.drag` to capture pointer movement. Unlike a simpler variant, the app stores all drawing data in a DOM-independent object (logged to the console on stroke completion), and separates the UI and canvas into two stacked SVG elements to prevent accidental drawing when interacting with controls.

AI-generated description

A simple freehand drawing application, based on Bostock's Line Drawing gist.

Use your stylus, fingers or mouse to draw. The color of the line can be changed by interacting with the color palette, and the canvas can be cleared by clicking the trash in the upper-right corner of the UI.

The application uses two stacked SVG elements, one for the UI and one for the canvas. This is used to disable drawing when interacting with UI elements.

Unlike Bostock's example, this application maintains a DOM-independent object to store all the drawing's data (just look at the JavaScript console each time you complete a line).

Colors are from Colorbrewer's Dark2 palette.

forked from <a href='http://bl.ocks.org/nitaku/'>nitaku</a>'s block: <a href='http://bl.ocks.org/nitaku/d79632a53187f8e92b15'>Freehand drawing</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Freehand drawing

This freehand drawing application lets users create smooth, colored lines with a mouse, stylus, or finger, using a palette of Colorbrewer Dark2 colors and a trash button to clear the canvas. It maintains all drawing data in a DOM-independent JavaScript object, logging completed lines to the console. Built with D3 v3, it renders strokes as SVG paths via `d3.svg.line()` with basis interpolation, and uses `d3.behavior.drag` to capture pointer movement. Two stacked SVG layers separate the drawing surface from UI controls, preventing accidental marks when interacting with the interface.

TThanaporn-sk

97% match

Loading thumbnail…

Free Hand Line D3 v4

This example demonstrates freehand line drawing in an SVG canvas. The visualization begins with a pre-generated curve and prompts the user to drag the mouse anywhere to create additional paths. It uses D3 v4's drag behavior and line generator with a basis curve to smoothly interpolate the points collected during the drag. The rendered path is styled as a tomato-colored dashed stroke, and the code creates the SVG container dynamically on the page.

CChandrakantThakkarDigiCorp

80% match

Loading thumbnail…

Line Drawing

This example demonstrates freehand line drawing through mouse drag interaction. A user presses and holds to create a smooth, flowing path rendered as an SVG stroke on a white canvas. The interaction is built using `d3.drag` to capture pointer events, while `d3.line` with the `d3.curveBasis` curve generates the smooth B-spline path through the collected points. The path elements are appended directly to the SVG container, and the code styles them with a black, three-pixel-wide stroke for a clear visual result.

Mmbostock

79% match

Loading thumbnail…

Quick, Draw! d3 & SVG demo

This example visualizes hand-drawn faces from the Quick, Draw! dataset, rendering multiple strokes as smooth, gooey lines on an SVG canvas. It maps the raw drawing coordinates into point objects and uses `d3.line` with `curveBasis` to create the paths. The strokes are grouped and laid out in a grid, with a blur and color matrix filter applied to the entire group. Pan and zoom are handled via the `d3.zoom` API, and the code styles the groups directly for performance.

TThanaporn-sk

74% match

Loading thumbnail…

Javascript

This example demonstrates a basic canvas-based drawing application. Users can sketch freehand on the canvas by dragging the mouse, with sliders and color pickers to adjust pen width and color. The code uses JavaScript with the HTML5 Canvas API, including methods like `ctx.lineTo`, `ctx.stroke`, and `ctx.clearRect` to manage drawing and erasing. It is a direct illustration of interactive vector graphics in the browser, independent of D3.js.

SShane Carey

74% match

Loading thumbnail…

Drawing pad

This interactive drawing application allows users to paint freeform strokes on a Canvas element. It uses a toolbar to select stroke color and line width, and includes a clear button to reset the drawing surface. The code uses the Canvas `getContext`, `lineTo`, and `stroke` methods to render paths as the user drags the mouse, with the canvas resizing to fit the window. The interface is styled with CSS flexbox and a gradient title.

CCora

72% match

Loading thumbnail…

Etch-A-Sketch

An interactive drawing application that recreates the classic Etch-A-Sketch toy in the browser. Users navigate a drawing cursor with arrow keys or WASD controls, while additional keyboard shortcuts adjust line thickness, cycle through six draw colors, and toggle drawing on and off. The application renders an SVG line path using React state management, with the drawing path constructed incrementally as the cursor moves across a 960 by 500 pixel canvas.

NNicholas Smith

68% match

Loading thumbnail…

D3 testing

A collection of hand-drawn SVG shapes and paths demonstrates how to style vector graphics with D3 v5. The example renders a static composition of lines and curved paths on a 960×500 SVG canvas, using the `select` method to target the SVG element. CSS classes define stroke properties, including color, width, and round line caps and joins, while the `overflow: hidden` body style trims the viewport. The code focuses on basic SVG styling and selection patterns rather than data binding or dynamic updates.

Mmarissaverdonck

67% match