Skip to main content
SimilarExport ZIP
100%

Exercise 1: SVG Fundamentals

✓ Published0🌍 Public
AAnna Arias-Duart
Last edited Oct 18, 2024
Created on Oct 18, 2024

This visualization shows a field of one hundred orange circles with a dotted timeline marking dates from October 2023 to October 2024. Each circle fades from full to zero opacity over five seconds using SVG `animate` elements. The code generates non-overlapping circle positions through random sampling and overlap detection, while the timeline uses SVG circle elements as dots and text labels for month ticks. The rendering relies entirely on native SVG APIs and JavaScript math.

AI-generated description

Sunrise/sunset.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG rendering with lines and circles positioned across a 1040×1194 canvas. The visualization uses basic SVG primitives—`line` and `circle` elements—with explicit coordinates and strokes to show connections between nodes. Orange and purple lines, one dashed, link three circular markers, illustrating how vector graphics define shapes through attributes like `cx`, `cy`, `x1`, `y1`, and `stroke-dasharray`. The code relies solely on native SVG markup with no JavaScript libraries, as shown in the static `index.html`.

Jjoseph@opportunityatwork.org
78% match
Loading thumbnail…

SVG Fundamentals

A field of fifteen circles drifts side to side in a smooth wave-like pattern. Built with D3.js, the animation uses `setInterval` to update positions every frame, calculating each circle's `cx` and `cy` from sine and cosine functions. The SVG canvas is created via `d3.select('body').append('svg')`, and circles are joined to the data with a streaming `join('circle')` operation.

GGT-GillesTeuwen
78% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates foundational SVG graphics with nested circles forming a target-like shape and two animated curved paths. It shows how basic geometric primitives combine to create a visual hierarchy, with the outer circle acting as a frame and inner circles layered by size and fill color. The paths use quadratic Bezier curves and animate their opacity through SVG’s native `<animate>` element, specifying keyTimes and values over a ten-second loop. The code relies on raw SVG markup and a small JavaScript console log, with no external libraries or data binding.

Tthedatacurious
77% match
Loading thumbnail…

Circles

A field of 1,000 small circles drifts randomly across an SVG canvas, wrapping around the edges when they exit the viewport. A text label in the corner displays a live frames-per-second counter. The animation uses `d3.timer` to update each circle's `cx` and `cy` attributes every frame, with positions stored in a data array generated from `d3.range(1000)` and `Math.random`. The code runs on D3 v3 and renders purely with SVG elements.

Mmbostock
77% match
Loading thumbnail…

Circles with SVG

This example displays twelve pastel-colored circles scattered across an SVG canvas, each positioned at fixed coordinates with varying radii. The visualization demonstrates static SVG rendering with a simple, decorative composition, using no external libraries or JavaScript for interaction. The circles are defined directly in markup with individual `fill` attributes, while CSS centers the SVG on a light gray background and applies a subtle shadow and rounded corners. The code relies on basic SVG elements and inline styling, with `index.js` containing only a placeholder console statement.

223100098@lums.edu.pk
77% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG rendering by drawing two circles on a 1000-by-1000 canvas. The first circle uses default black fill, while the second circle is styled with a red fill and a thick stroke width of 10. Each shape is defined declaratively in the markup with explicit `cx`, `cy`, and `r` attributes. The visualization illustrates how SVG’s coordinate system and presentation attributes control geometry and appearance without any JavaScript logic, serving as a baseline for more complex data-driven graphics in the VizHub V3 environment.

AAnnie Chiu
77% match
Loading thumbnail…

svg funds

This example shows a simple SVG visualization of a single orange circle centered on a blank canvas. The code consists of a minimal HTML file with inline CSS and JavaScript, and renders the circle using an SVG `<circle>` element with fixed coordinates and radius. It uses React as the framework and raw SVG attributes for positioning, demonstrating basic SVG rendering without any data-driven or interactive behavior.

Nnarada0923
76% match
Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example shows an animated sunrise and sunset over a stylized landscape. A large circle representing the sun moves vertically against a sky backdrop, while two overlapping Bezier-curved paths depict rolling landmasses in the foreground. The visualization uses pure SVG and the Web Animations API through `<animate>` elements to cycle gradient colors and the sun's position over a 15-second loop. All rendering is handled by inline SVG markup, with no JavaScript or external libraries.

Mmark.horne99@gmail.com
76% match