Motif

100%

✓ Published0🌍 Public

Last edited Jan 2, 2020

Created on Nov 27, 2019

The visualization loads an external SVG line drawing, then cycles through a random color palette, recoloring the background, filled shapes, and open path strokes with smooth 4-second transitions. The author uses a golden-ratio-based color generator to create harmonious hues, and filters the SVG paths into closed and open sets to apply distinct fill and stroke treatments. This creates an ambient, slowly shifting color motif.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Motif - Test

The visualization shows a single large circular motif centered on a white background. The motif consists of three concentric circles, each drawn with thin black outlines. The outermost circle is surrounded by a larger, partially visible ring, and the innermost element is a small solid circle at the center. The code sets up an SVG canvas and defines functions for generating random colors, but the current output is purely the static motif.svg image—no dynamic coloring or animation is applied. The piece appears to explore geometric symmetry and minimalism, with the layered rings creating a sense of depth against the empty white space.

BBrunoDumas

86% match

Loading thumbnail…

500 glowing dots

Five hundred glowing dots scatter across a dark, square SVG canvas. Each dot consists of a larger outer circle filled with a cyan radial gradient and a smaller, brighter white inner circle created using SVG `radialGradient` definitions. A plain `for` loop generates the dots at random positions within a fixed boundary, using D3 v4 to append `circle` elements and apply CSS classes for styling. The result is a dense, luminous field of varied-sized orbs against a near-black background.

PPatrick Wojda

71% 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

70% match

Loading thumbnail…

Untitled

Fifty circles, one per vertical position, traverse the SVG horizontally in a looping animation. Using d3.scalePoint for y-coordinates and d3.scaleLinear with HSL interpolation for fill colors, each circle transitions across the width, then snaps back and restarts via d3.active and nested transitions. The page initially displays “Loading…” before an unrelated JavaScript module (getCars, generateReport) asynchronously populates a message element with a filtered car report, though that data does not affect the visualized motion.

Jjesramyep1263

69% match

Loading thumbnail…

Fork of SVG Fundamentals

The visualization demonstrates layered SVG path strokes on a solid orange background, creating a geometric composition of angular line work. Each path element is rendered without fill, except one inner path that uses yellow fill, while all strokes appear in yellow with a consistent width of five pixels. The paths are defined using SVG’s `d` attribute with absolute and relative commands like `M`, `l`, and `L`, producing a series of intersecting diagonal and horizontal lines that suggest depth or motion. The example relies on basic SVG markup embedded directly in an HTML document, with CSS styling applied to the `path` elements.

Ccachetetanger

69% match

Loading thumbnail…

Random lines

The visualization displays a dense field of 800 randomly colored, semi-transparent lines radiating from a central point, creating a chaotic, abstract burst of color. Each line is positioned using trigonometric functions with randomized radius values, and its stroke color is generated via the `rgb()` function with random values. The SVG elements are appended using D3.js v6, with the main group rotated 90 degrees and translated to center the composition. The lines are rendered statically with a stroke-width of 5 and opacity of 0.5, creating overlapping visual depth.

NNita

69% match

Loading thumbnail…

silly-path-transitions

Clicking the window cycles a single set of black path elements through three random data shapes: multi-line charts, scatterplots, and bar charts. Each click generates new random data, updates the x– and y–axis domains, and animates the paths' `d` attributes using D3 transitions. The visualization relies on D3 v3's `d3.svg.line`, `transition().attr()`, and data joins, with utilities from `d3-jetpack` and `d3-starterkit`, to morph the same SVG elements between distinct geometric forms.

11wheel

69% match

Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel

69% match