Creative Coding — Circles Abhyudai Thakur

100%

Creative Coding — Circles Abhyudai Thakur

✓ Published0🌍 Public

Last edited Aug 29, 2025

Created on Aug 29, 2025

Four hundred twenty semi-transparent circles animate between grid, Phyllotaxis spiral, and parametric heart layouts, with color themes cycling through Turbo, Sinebow, Cool, and Warm interpolators. The D3 v7 SVG visualization responds to keyboard shortcuts for layout and theme changes, while hover and click interactions trigger radius transitions and elastic pulse effects via `transition.attr` and `easeElastic`. Circle radii incorporate deterministic jitter, and the responsive design recalculates positions on window resize.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Creative Circles by Charan

Four hundred twenty rainbow-colored circles spiral outward from the center of an SVG canvas, positioned using the golden angle and square-root scaling to form a galaxy-like pattern. Each circle expands from a radius of zero in a staggered transition, then gently pulses in size through a recursive `pulse()` function using `d3.easeSinInOut`. The visualization uses D3 v7’s selection, data join, and transition APIs, with colors generated via `d3.interpolateRainbow` on a light green background.

Ccsabavath@wpi.edu

82% match

Loading thumbnail…

Creative Circles by Charan

Ccsabavath@wpi.edu

82% match

Loading thumbnail…

Creative Circles by Charan

This visualization displays a spiral galaxy of 420 circles that bloom outward from the center, colored with the rainbow spectrum. The circles are positioned using the golden angle and square-root scaling, creating a phyllotaxis-like pattern. Built with D3 v7 and SVG, each circle transitions from radius 0 to its full size with staggered delays, then continuously pulses via chained `transition()` calls with `easeSinInOut`, demonstrating D3's animation capabilities with `interpolateRainbow` for color mapping.

Ccsabavath@wpi.edu

82% match

Loading thumbnail…

Fork of Circles with D3

A fixed full-screen visualization renders seven multi-colored circles on a soft green background. Each circle’s position, size, and color come from a hard-coded data array, drawn using D3’s data join and `attr` methods. A `setInterval` then drives a continuous animation, using D3 transitions with a 1000-millisecond duration to shift each circle’s center and radius in a smooth sine/cosine wave pattern. The result is a lively, looping motion that continuously warps the static layout.

BBismark Kofi Owusu Sarfo

82% match

Loading thumbnail…

Circles with Animation

Eleven concentric circles pulse sequentially from a central point, expanding and collapsing in three alternating colors: red, green, and yellow. Each circle animates its radius from zero up to a multiple of its index times ten pixels, then shrinks back. The visualization uses D3 v5 selections with chained `transition().duration()` calls to animate SVG `circle` elements, setting radius, position, fill, and stroke attributes. The data array of indices 0 through 10 drives the size progression, while CSS opacity at 0.1 gives the overlapping circles a translucent, layered effect.

NNita

81% match

Loading thumbnail…

Fork of Circles with D3

Seven colored circles, each 15 pixels in radius, rest in a horizontal line at the bottom left of a mint-green canvas. Hovering over any circle smoothly animates it into an evenly spaced orbit around the screen’s center, using an ease transition over one second; hovering again returns it to its original spot. The example demonstrates D3 v7’s `select().join()` for SVG element creation and stable keyed data binding, alongside `on('mouseenter')` event handling and the `transition().attr()` API for position tweening. All seven circles—red through violet—exist in a fixed dataset.

BBen Trantanella

81% match

Loading thumbnail…

Circles with D3

Seven circles of varying sizes and colors float on a muted pink background. The visualization demonstrates static circle generation using D3 v7, with each circle’s position, radius, and fill color defined in a hardcoded array. The code uses `select`, `join`, and attribute setters like `.attr('cx')` and `.attr('r')` to render the shapes. A fixed opacity of 0.63 is applied uniformly, and the SVG resizes to its container dimensions.

Iissam.benabid@gmail.com

81% match

Loading thumbnail…

Fork of Circles with D3

This interactive visualization displays seven semi-transparent circles with distinct colors and varying radii on a light green background. Built with D3.js, it demonstrates fundamental plotting techniques within an SVG container. The code uses D3’s `select` and `.join` methods to manage the SVG element and circles, setting attributes like `cx`, `cy`, `r`, and `fill` from a static data array. A method-chaining approach applies the circle properties, while an opacity value creates a layered, overlapping visual effect across the canvas.

RRajesh Rathnam

80% match