Scribble.js

100%

✓ Published0🌍 Public

Last edited Mar 7, 2016

Created on Aug 2, 2015

Scribble.js animates the drawing of an SVG path by progressively revealing its stroke. It uses the `getTotalLength()` method to measure each path, sets `stroke-dasharray` and `stroke-dashoffset` to hide the line initially, and then tweens the offset to simulate hand-drawn scribbling. The example includes an inline SVG (rendered as a stylized text-like design) with several paths, and a script that applies a 3-second erase-and-draw animation loop to each path sequentially using the Tween.js library, with the overall animation driven by requestAnimationFrame.

AI-generated description

Trace SVG paths.

INSTALL

npm install https://gist.github.com/abernier/e082a201b0865de1a41f/archive/42f199f7137d4e5137b4e2f879f58db2c213d8c9.tar.gz

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://rawgit.com/tweenjs/tween.js/v16.3.4/src/Tween.js"></script>
<script src="https://rawgit.com/caolan/async/v1.5.2/dist/async.js"></script>
<script src="https://rawgit.com/abernier/e082a201b0865de1a41f/raw/69eeade18397b8ac525e5d022b4876d98d838ccb/index.js"></script>

USAGE

see: https://gist.github.com/abernier/e082a201b0865de1a41f#file-index-html-L31

ISC Licensed

Similar vizzes

Loading thumbnail…

SVG path animation

This example animates the stroke of SVG path elements to create a continuous drawing effect. It uses D3.js (v3) with a queue to load an external SVG file containing complex path data, then applies an infinite, looping transition. The animation interpolates the `stroke-dasharray` attribute using `d3.interpolateString` and `transition.attrTween`, calculating the path’s total length with `getTotalLength()` to reveal each path progressively. The paths are styled with CSS, setting a black stroke on a transparent fill.

KKoGor

77% match

Loading thumbnail…

SVG path animation

An animated marker follows a wiggly SVG path while the path itself appears to draw itself in a continuous loop. The example uses D3.js version 3 to load an external SVG file via `d3.xml` and then animates both the path’s `stroke-dasharray` and the marker’s position using `transition.attrTween` and `path.getPointAtLength`. The marker is a red circle repositioned at each animation tick, while the dash array interpolation creates the synchronous drawing effect. The animation runs infinitely via a recursive transition callback.

KKoGor

74% match

Loading thumbnail…

HTML Starter

This example showcases a line drawing of an intricate shape that animates itself onto the screen using a stroke-dash technique. The path is drawn over three seconds with a linear ease. The code uses D3.js version 3.5.6 to select the body, append an SVG, and create the path. It then leverages `path.node().getTotalLength()` and transitions with `attrTween` to animate the `stroke-dasharray` and `stroke-dashoffset` attributes, creating the effect of the line being traced. The underlying data is a static, pre-defined SVG path.

AAndrew Yan

74% match

Loading thumbnail…

a

This example shows an animated SVG path drawing itself over time, tracing an intricate, meandering line across an 800×600 canvas. The path is styled with `stroke-dasharray` and `stroke-dashoffset` and animated using a CSS `@keyframes` rule, which transitions the offset to zero over four seconds. The visualization relies on native SVG and CSS animation within an HTML document, with no external libraries or data bindings. The code is written for React, though the example itself is a standalone markup file demonstrating the core technique.

Xxyzcorrupt@gmail.com

73% match

Loading thumbnail…

Animate SVG path on scroll

An SVG path is drawn incrementally as the user scrolls, stopping when it reaches a fixed horizontal marker line. The visualization uses D3 to map scroll position to the length of the path, animating the path’s stroke-dashoffset to reveal it progressively. A fixed marker div acts as the target line, and the path data consists of a series of points with varying x-coordinates, creating a jagged line. The example demonstrates scroll-driven SVG animation, built with D3 and Lodash, and is intended for use in an unreleased side project.

Aajayjayayy

72% match

Loading thumbnail…

Animate SVG path on scroll

An SVG path of a hand-drawn line animates as the user scrolls, revealing the path incrementally down a tall 20,000-pixel viewport. Using D3 and Lodash, the example maps the browser’s scroll position to the length of the path, drawing only up to a fixed horizontal line (indicated by a marker div). As the user scrolls, the path appears to draw itself progressively, stopping when it reaches the marker. The visualization demonstrates a scroll-driven animation technique applied to a single SVG path with a minimal, fixed marker overlay.

Aajayjayayy

72% match

Loading thumbnail…

Stroke Dash Interpolation

A closed path, rendered as a dark stroke using a cardinal-closed line generator, loops through seven points on an SVG canvas. A dashed gray duplicate of the same path overlays it, while the dark stroke animates its `stroke-dasharray` from a zero-length dash to the full path length and back, creating a continuous drawing effect. The animation uses `transition.attrTween` with `d3.interpolateString` and `getTotalLength()` to compute the path length, cycling indefinitely via the transition’s `end` event. The example relies on D3 v3’s `d3.svg.line` and SVG path elements.

Mmbostock

71% match

Loading thumbnail…

SVG path animation

An SVG rendering of a PlayStation 4 controller uses D3.js to animate each path's stroke-dasharray attribute. The `transition.attrTween` method repeatedly interpolates between `"0,l"` and `"l,l"` (where `l` is the path's total length from `getTotalLength()`), creating a continuous drawing effect. An infinite loop via the `each` event restarts the animation, while CSS styles paths as unfilled black strokes.

KKoGor

71% match