Skip to main content
SimilarExport ZIP
100%

Colorful Smoke Rings - Animation Test

✓ Published0🌍 Public
TTom-S82
Last edited Jul 27, 2020
Created on Jul 27, 2020

This example shows a field of concentric circles that simulate colorless, drifting smoke rings, which continuously expand and fade against a dark background. Built with React and D3.js, the visualization generates random positions, radii, stroke colors, and widths for 150 circles, rendering them as SVG elements. The animation is driven by SVG’s native `<animate>` elements, which control radius expansion, stroke-width growth, and opacity fade over a 15-second loop, with the dataset refreshing every 30 seconds. This test explores basic SVG animation with React’s state management and SMIL animations, replacing data with random placement to focus on motion and visual effect.

AI-generated description

A program that draws concentric circles that expand and end up immitating drifting smoke rings.

Notes:

Success/Failure Notes:

  • I originally tried to accomplish this with the Styled-Components plug-in. Although it worked, it proved to be too resource-intensive, especially when so many DOM objects had to be re-rendered.
  • I also experimented with the onAnimationIteration and onAnimationEnd global event handlers but couldn't reliably get them to work for this project. Further learning required...
MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Selection Exploration 1

Fifteen animated circles bounce vertically across the screen, their radii oscillating in a wave-like pattern. The visualization uses D3.js selection and join operations within a React framework to update SVG circle positions at 60 frames per second. Data is procedurally generated using sine functions of time and index, rendered directly to an SVG canvas.

Ttomasnihlen
77% match
Loading thumbnail…

Random circles

This example shows a dense field of overlapping circles rendered in an SVG, with their positions and colors appearing randomized across the display. Built with React, the component generates a triply-nested loop that creates circles using the `<circle>` element, calculating each `cx` and `cy` position by multiplying array values with `Math.random`. The fill color is derived from the array index arithmetic, producing a gradient-like effect in the RGB scale. The visualization relies on React’s `ReactDOM.render` to mount the SVG into the DOM, with no external data source.

NNita
77% match
Loading thumbnail…

Circles Part2

Ten randomly placed light blue circles animate smoothly across the screen in a full-window SVG. The example uses React state to trigger a D3 v5 transition that shifts each circle horizontally; upon transition completion, new random x-coordinates are generated and the animation repeats. Data binding via `selectAll` and `join` keeps the circles synchronized with the changing state.

Mmbooch22
76% match
Loading thumbnail…

Fork of Fork of Fork of Random circle shapes with react July 4,2022 -2

This example shows a dense field of randomly positioned, semi-transparent rectangles and circles rendered with React and SVG, each with randomized stroke widths, opacity, and dynamically generated RGB colors. The layout is produced by a fixed array of 200 values calculated from a simple arithmetic formula, mapped through React components to create the visual elements. Using D3 v7 only to select the body and append a base SVG, the code primarily relies on React’s `ReactDOM.render` and custom components like `My_circle` to generate the shapes, with no interactive or animated behavior.

Qqwxyyigesm
76% match
Loading thumbnail…

Fork of Random Circles

This example shows a field of 50 randomly placed circles that drift continuously across the screen through a series of small random steps. Each circle’s position updates on every tick of a d3.timer, while the SVG attributes for cx and cy are rebound to reflect the changing data. The visualization uses D3 v6 for selection, data binding, and animation, with circles styled in steelblue via a CSS class. A React wrapper is present, though the core rendering and movement are handled entirely by the D3 code in circles.js.

Mmbooch22
76% match
Loading thumbnail…

Concentric circles

This example displays a field of overlapping concentric circles, arranged radially around a central point. The circles vary in size, color, and position, creating a textured, abstract composition. Using React and SVG, the code generates 50 sets of circles, with each circle's radius and fill color calculated from randomized values. The positions are derived from trigonometric functions, and the entire visualization is rendered through the `ReactDOM.render` method into an SVG container.

NNita
76% match
Loading thumbnail…

Tutorial3

This example shows a dense scatter of overlapping circles with randomized positions, radii, and translucent colors, drawn using React and SVG. The circles are generated via three nested array maps, producing a layered, chaotic composition. A larger SVG path renders a stylized figure in the center, while the background is black and the page title references "Buddha in colors." The visualization demonstrates how React can drive generative SVG output with minimal code, mixing randomness with structured layout.

Aanusharamana0@gmail.com
76% match
Loading thumbnail…

D3 Test

Fifteen circles with dynamically changing radii, positions, and colors pulse in a smooth, endless animation, driven by sine-wave values generated in the `makeData` function. The example uses the D3 library (v7.8.5) with its `select`, `range`, and data-join `join` pattern to render SVG circles directly to the document body. Animation runs via `setInterval` at roughly 60 frames per second, updating a time parameter that alters each circle’s `r`, `cx`, `cy`, and `fill` attributes. The visualization demonstrates real-time data binding and SVG attribute updates with a minimal, dependency-light setup.

NNick Hogle
76% match