Skip to main content
100%

JuliaLang logo using Fourier series

✓ Published0🌍 Public
WWikunia
Last edited Nov 9, 2020
Created on Nov 9, 2020

The animation draws the JuliaLang logo as a red trace produced by a chain of rotating white circles, each representing a Fourier coefficient. It uses FFTW and FFTViews to compute the discrete Fourier transform of points sampled from the logo’s path, which is extracted via Javis’ `pathtopoly` and reordered with TravelingSalesmanHeuristics. Javis drives the per-frame rotation of each circle and the line-drawing trace, rendered at 1920×1080.

AI-generated description

Similar vizzes

Loading thumbnail…

Visualzing digits

This visualization animates the sequence of digits in a constant (such as π) by drawing curved, color-coded transitions between each consecutive digit pair around a circular clock-like layout. As frames advance, it reveals bars whose radial length encodes the cumulative frequency of each digit transition, while optional dots highlight repeated identical digits. Built with Julia and Luxor, it uses `arc2r` for the circular digit ring, `BezierPathSegment` with `setblend` for gradient transition curves, and `poly` for the frequency bars, sourced from parsed BigFloat digits or prime numbers.

WWikunia
62% match
Loading thumbnail…

Julia Set

This example renders a Julia set fractal on a canvas, using a teal-to-black color scale to depict iteration counts across a 360×360 grid. The visualization animates smoothly by tweening a pixel index through Svelte’s `tweened` motion, recalculating the fractal values as the index progresses. Each pixel is drawn as a 1×1 rectangle via the Canvas API, with Svelte’s context system coordinating registration and invalidation between the `Canvas` and `Pixel` components, while d3 scales map coordinates and iteration values.

KKristin Baumann
59% match
Loading thumbnail…

Logo

The visualization displays the text "vis.my.part" as a logo, with two layered orange shadow copies that animate horizontally to create a depth effect against the dark background. The text is rendered as individual SVG elements using D3 v7's data join, with each character positioned via transform attributes. The animation uses D3's transition system with a 2500-millisecond duration to shift the shadow layers by incremental pixel offsets, while the foreground remains static. The design utilizes custom spacing calculations, branding colors from CSS variables, and the Major Mono Display font.

Sscheenmi@gmail.com
58% match
Loading thumbnail…

Fork of Messing around with Sine Wave Circles

Four overlapping horizontal bands of blue, yellow, turquoise, and white circles undulate vertically across a blue background. Each band contains 50 circles whose vertical positions are driven by sine and cosine functions of time and circle index, creating wave-like patterns. The animation uses a `d3.timer` to update the `cy` attributes of SVG circles every frame, with each band offset using different amplitudes. The visualization is built with D3 v7 and renders through a dynamically created SVG element.

Mmuhuribiz
58% match
Loading thumbnail…

Fork of Messing around with Sine Wave Circles

Four overlapping sine waves animate across the screen as rows of filled circles. Blue and crimson circles trace complementary sine and cosine paths, while smaller turquoise and orange circles follow similar curves with tighter spacing. The visualization uses D3 v7’s `d3.timer` to update each circle’s `cy` attribute based on a time offset, rendering 200 circles per wave in an SVG. It demonstrates periodic motion through D3’s data-join and selector methods.

AAndre J Denais
58% match
Loading thumbnail…

GO! Logo

This example renders the IFRC GO logo as a field of colored circles using Mitchell’s best-candidate algorithm. It shows a dense packing of red-hued circles that together form the logo’s shape, with colors varying via `d3.interpolateReds`. The scene is drawn on a Canvas element, and the algorithm places each circle by rejecting random candidates outside the logo’s path, checked with `context.isPointInPath`, while a d3 quadtree enforces spacing. The animation runs for 20 seconds, adding circles gradually via a `d3.timer`.

TThanaporn-sk
57% 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
57% match
Loading thumbnail…

J Exercise 1

This visualization demonstrates a static composition of overlapping geometric shapes that form an abstract flag-like design, built entirely with Scalable Vector Graphics. The piece combines a large rectangle filled with a white-to-black linear gradient, overlaid with semi-transparent yellow, red, and blue bands, alongside a green circle and a rotated square. The only dynamic element is a thick red line that animates its horizontal endpoints back and forth, while also subtly shifting vertically through an SVG `<animateMotion>` path. The code relies on core SVG elements like `<rect>`, `<line>`, `<circle>`, and `<animate>`, with no external JavaScript libraries.

Zzaioris
57% match