tomdao0

@tomdao0·6 public vizzes

Fork of SVG Fundamentals

A single SVG path demonstrates an arc segment, drawn from point (0,50) to (50,0) with a 50-pixel radius using the `M` and `A` path commands. The canvas is a fixed 960×500 SVG element with the `body` margin zeroed for full-browser display. The code uses no JavaScript libraries, relying solely on native SVG path syntax and the `fill="none"` and `stroke="black"` attributes to render the curve. The example illustrates fundamental vector shape construction without external data.

Jul 2, 2023

Loading thumbnail…

Fork of SVG Fundamentals

A single red triangle is drawn on a blank white canvas using an SVG `<path>` element with an explicit coordinate string. The shape originates from the top, extends to the bottom-right corner, and closes back to the center point, with a thick black stroke and red fill. The page uses raw, hand-coded SVG markup inside an HTML document, with no external libraries or data sources, demonstrating fundamental shape construction and rendering. The fixed 960x500 viewport and minimal styling emphasize the basic geometric output.

Jun 26, 2023

Loading thumbnail…

Fork of SVG Fundamentals

This fork of SVG Fundamentals demonstrates a single blue triangular path rendered on an empty SVG canvas, with the page set to hide overflow and remove default margins. The example uses the native SVG `<path>` element with a fill attribute to draw a closed triangle defined by absolute coordinates. The code also includes a commented-out yellow rectangle, showing an alternative SVG shape, and embeds a YouTube tutorial video about SVG fundamentals. The rendering relies solely on browser-native SVG support rather than external libraries.

Jun 26, 2023

Loading thumbnail…

Fork of SVG shapes and animation sandbox

This visualization demonstrates layered SVG shapes and animations, featuring a horizontally striped sky in blue tones, animated clouds moving along curved paths at varying speeds, and a static pink flower with a green stem. The code uses SVG’s `animateMotion` to drift cloud groups along bezier-like paths, while rects and circles construct the background and flower. Rendered entirely in SVG, the example relies on inline paths and elements for the visual composition.

Jun 17, 2023

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates basic SVG shape rendering, including overlapping circles, rectangles, lines, and paths. The circles show layering, with a red circle beneath a smaller green one, while two rectangles with heavy navy strokes create a partially overlapping composition. A red line and two open paths illustrate different coordinate systems and stroke styles. The code uses raw SVG elements directly in an HTML document, with styling for the page body to remove margins and hide overflow.

Jun 16, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates several core SVG shapes and attributes in a single 960 by 500 pixel canvas. Overlapping circles show fill and layering, while a rectangle uses uppercase tag names with explicit stroke and width properties. A straight line and a cubic Bézier path illustrate coordinate-based drawing. The final open path, rendered without fill, uses relative and absolute line commands. The page is minimal, relying entirely on inline SVG markup within an HTML file, with no external JavaScript libraries or data sources.

Jun 16, 2023