100%

Motion Design Demo

✓ Published0🌍 Public

Last edited Nov 14, 2025

Created on Nov 14, 2025

This example demonstrates motion design principles through an animated visualization of rotating vertical lines. The piece shows parallel lines distributed across the canvas, each rotating independently around its center with a phase shift based on horizontal position, creating an organic wave-like effect with endpoint circles marking each rotation axis. Built with p5.js, the animation uses the Canvas API with a semi-transparent rectangle overlay to create a fading trail effect that emphasizes movement over time. The rotation speed is tied to `frameCount`, and the layout responds dynamically to window resizing.

AI-generated description

Motion Design: Rotating Lines Animation

Overview

This project demonstrates fundamental motion design principles through an animated visualization of rotating vertical lines. It creates a mesmerizing, organic effect by applying independent rotational motion to parallel lines distributed across the canvas, combined with a trailing fade effect to emphasize movement over time.

Concept: Motion Design

Motion design uses animation and movement to communicate ideas, create visual interest, and guide user attention. This project explores several core motion design principles:

Key Motion Design Principles Demonstrated

1. Independent Motion

Each vertical line rotates independently around its own center point
The rotation angle is determined by both elapsed time (frameCount) and the line's horizontal position (x / width)
This creates a phase-shifted wave effect where lines near the left rotate differently than those on the right

2. Temporal Layering (Trails & Persistence)

Instead of clearing the canvas each frame, a semi-transparent rectangle is drawn
This creates a "fade trail" that gradually diminishes previous frames
Emphasizes the path of motion and creates a sense of velocity and continuity

3. Rhythm & Pacing

The rotation speed is controlled by frameCount * 0.01, establishing a consistent, measurable rhythm
The consistent timing creates predictable, danceable motion that feels intentional rather than random

4. Endpoint Emphasis

Circles drawn at the endpoints of each line serve as anchor points
These visual markers help track the motion of each line and emphasize the rotation points

5. Responsive Scale

The animation adapts to window dimensions, maintaining the motion design across different viewport sizes
Lines are evenly spaced with a consistent interval, scaling the number of elements to fit the screen

Technical Implementation

Technologies

p5.js: Creative coding library for drawing and animation
D3.js: Included for potential data visualization extensions
HTML5 Canvas: Renders the animation to the browser

How It Works

MIT Licensed

Similar vizzes

Loading thumbnail…

Canvas Animation

This canvas animation draws a rotating, flower-like pattern of curved lines radiating from a central point, with small solid circles placed at each outer endpoint. The design morphs continuously as the entire shape rotates and dashed lines shift in a repeating loop. Built with raw JavaScript and the Canvas API, the code uses a quadratic curve for each spoke, along with rotation transforms, dashed strokes, and a semi-transparent overlay to create the illusion of motion. The animation is driven by `requestAnimationFrame`, updating the line dash offset and rotation angle over time.

11Cr18Ni9

73% match

Loading thumbnail…

Motion

The visualization shows two sets of black circles arranged in a diagonal pattern, with one circle from each set rotating around a fixed point to create a sense of continuous motion. The animation is driven by `d3.timer`, which repeatedly updates the `transform` attribute of the circles using an SVG `rotate` transformation. The rotation angle is calculated from the elapsed time since page load, with one set rotating around the first circle’s position and the other around the fifth circle’s position. Built with D3 v4 and rendered as SVG, the code uses hardcoded coordinates for the circles and relies on CSS classes to select and animate them, creating a simple kinetic composition without any external data source.

CCJKraenzle

72% match

Loading thumbnail…

Wave Motion

A grid of faint circular outlines fills the background, representing water parcels in a calm state. Overlaid on this, bright dots travel along the perimeters of each ring, rotating in coordinated, wave-like patterns that ripple across the canvas. The animation uses a d3-timer to update the rotation angle for each dot, with position and rotation calculated from the grid index and elapsed time. Two layered Canvas 2D contexts render the static rings and the moving dots, with devicePixelRatio scaling for sharp display on high-DPI screens.

Mmbostock

72% match

Loading thumbnail…

Moving Circular Grid

This example presents an interactive SVG art piece inspired by Sol LeWitt’s geometric work, featuring a static circular clipping region that reveals rotating horizontal lines. The implementation uses raw JavaScript to create SVG elements directly, with CSS animations driving the 20-second rotation of the horizontal group. Vertical lines span the full canvas without clipping, contrasting with the circular boundary. The code builds the scene by appending `rect` elements for both line sets, with a `clipPath` defining the visible circle.

CCurran Kelleher

71% match

Loading thumbnail…

Random Fun Stuff

A canvas animation draws a continuously evolving radial burst of lines from the center of the screen. Using the HTML5 Canvas API's `getContext('2d')`, the code repeatedly strokes line segments from the center to coordinates computed from sine and cosine functions of the current time and angle. Each frame, a semi-transparent white rectangle gradually fades previous strokes, creating a fading trail effect. The animation runs via `requestAnimationFrame`, recalculating angles and positions with the `Date.now()` timestamp to produce a dynamic, rotating pattern.

CCurran Kelleher

70% match

Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization generates evolving geometric patterns from a grid of circles. The code maps a 30×30 grid of points through sine and cosine functions using time-based parameters, causing the positions and sizes of the circles to shift continuously. Each frame applies a semi-transparent black overlay before redrawing, creating fading trails that enhance the motion effect. The rendering uses the Canvas 2D API’s `arc()` and `fillRect()` methods, with colors computed from sine waves tied to the grid position and animation time. The visualization is inspired by a mathematical patterns tutorial and runs as an infinite loop via `requestAnimationFrame`.

PPeter S

70% match

Loading thumbnail…

Fun-animation

This example shows a screen-filling SVG animation of thin vertical lines that pulse outward into thicker bars over time. A circular mask reveals the animation at the center, with the mask radius itself expanding and contracting rhythmically. The code generates lines with a gradient color scheme based on their horizontal position, skipping every third line, and animates a subset of lines using SVG’s native `<animate>` element. The visualization uses raw JavaScript and the SVG DOM API, with no external libraries.

GGabriel Ing

70% match

Loading thumbnail…

Mathematical Graphic Patterns

This animated canvas visualization generates evolving geometric patterns from a grid of circles. Each frame, the code computes positions and radii using trigonometric functions of time and grid coordinates, creating swirling, morphing shapes with shifting colors. The animation runs continuously via `requestAnimationFrame`, with a semi-transparent black overlay (Canvas `fillRect`) producing trailing motion blur effects. The canvas resizes dynamically to fit the window, and all rendering uses the native Canvas 2D API, including `arc` and `fill` for circle drawing. No external libraries are used; the math-driven design follows the original MIT tutorial’s approach.

CConvert-Jade

69% match