Skip to main content
SimilarExport ZIP
100%

Julia Set

✓ Published0🌍 Public
KKristin Baumann
Last edited Feb 21, 2025
Created on Apr 23, 2024
Forked from Mandelbrot

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.

AI-generated description

Math from The Coding Train: https://www.youtube.com/watch?v=fAsaSkmbF5s

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Mandelbrot

This example renders a smoothed grayscale Mandelbrot set on a 400×500 canvas, iterating each pixel’s complex coordinates up to 75 times to detect divergence. A dark teal gradient maps iteration counts via `d3.scaleLinear`, with non-diverging points drawn black. The custom `Canvas.svelte` component manages a 2D drawing context, while individual `Pixel.svelte` components register draw functions with the context to paint 1×1 rectangles. Computation follows the algorithm from The Coding Train, using an animation frame loop for rendering.

KKristin Baumann
73% match
Loading thumbnail…

Fork of Svelte + D3: Canvas & renderless components

This example shows 34,000 circles on a canvas, each updated every five seconds with random positions and radii. A Svelte renderless component system separates canvas management from rendering logic: a canvas component provides a draw context, while circle components register individual draw functions and use Svelte's `tweened` motion with `cubicOut` easing to animate transitions between data updates. The visualization uses D3's `scaleLinear` and `scaleSequential` with `interpolateMagma` to map random values to coordinates and colors.

Rrudi.oreillymeehan@gmail.com
72% match
Loading thumbnail…

Mandelbrot

This visualization renders a slice of the Mandelbrot set as a 360 by 360 grid of pixels on an HTML canvas. Each pixel’s color is computed by iterating the complex function `z = z² + c` for up to 200 iterations; colors, from black to a teal gradient, are derived from the iteration count using `d3.scaleLinear`. The visualization uses Svelte components (`App.svelte`, `Canvas.svelte`, `Pixel.svelte`) where the canvas context manages drawing and invalidation for rendering.

KKristin Baumann
71% match
Loading thumbnail…

Fork of Svelte + D3: Canvas & renderless components

Ten thousand tweened circles animate across a full-screen canvas, cycling through new random positions and radii every two seconds with a magma color scale. The Svelte example pairs a renderless Canvas component with a Circle component that registers draw functions via Svelte’s context API, using `d3.scaleLinear`, `scaleSequential`, and `interpolateMagma` for mapping. Each circle’s attributes transition smoothly through `tweened` stores with `cubicOut` easing, while `requestAnimationFrame` batches canvas redraws for efficient animation.

Rrudi.oreillymeehan@gmail.com
71% match
Loading thumbnail…

Sierpinsy Triangle

This example renders a colorful Sierpinski triangle fractal using the HTML5 Canvas API. The visualization recursively draws the triangle to a depth of five, with each smaller triangle assigned a random bright hue via the `hsl()` color function. It uses basic Canvas drawing methods like `moveTo`, `lineTo`, and `fill`, and the display automatically resizes with the window.

CCurran Kelleher
70% match
Loading thumbnail…

Mandelbrot

This interactive visualization computes and renders the Mandelbrot set as a static canvas image. The code iterates through each pixel, applying a mathematical formula to determine whether points in the complex plane diverge or remain bounded, coloring each point based on the iteration count. It uses a gray-scale gradient, with darker values for points that escape quickly and black for those within the set. Rendering is handled through a custom Svelte Canvas component, which registers individual drawing functions for each pixel, using the Canvas 2D API’s `fillRect` method. The computation logic is adapted from The Coding Train’s tutorial on the Mandelbrot set.

KKristin Baumann
70% match
Loading thumbnail…

Svelte + D3: Canvas & renderless components

Ten thousand semi-transparent dots pulse in a two-second loop, their positions, sizes, and magma-scale colors assigned by random functions mapped through D3 scales. Svelte components manage the lifecycle: a canvas component coordinates drawing and invalidation, while individual circle components use `svelte/motion` tweens to animate between updates, rendering efficiently via Canvas API calls.

MMatthias Stahl
69% match
Loading thumbnail…

Fork of Svelte + D3 Starter

This gallery example presents a set of colored circles scattered across a 1000x500 SVG canvas. A Svelte component iterates over an array of JavaScript objects, each containing x, y, radius, and fill color values, to render `<circle>` elements with a semi-transparent orange background. The visualization uses the Svelte `{#each}` block to map data to SVG shapes, with styling applied via CSS to achieve a 0.7 opacity level, demonstrating a minimal integration of D3 data structures within the Svelte framework.

CCurran Kelleher
68% match