Skip to main content
SimilarExport ZIP
100%

Fork of SVG Fundamentals

✓ Published0🌍 Public
AArunkumar Shanmugasundaram
Last edited Jun 28, 2021
Created on Jun 28, 2021
Forked from SVG Fundamentals

A React-based fork of the SVG Fundamentals example renders a nested set of circles and two quadratic bezier paths directly in an SVG canvas. The circles use inline `fill` attributes, while the paths employ a `path` element with `M` and `Q` commands. An SVG `<animate>` element modulates the paths' `opacity` attribute over a 10-second loop, producing a blinking effect. The example demonstrates basic SVG shapes and declarative animation without external libraries.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates SVG fundamentals using a series of concentric circles in grey, gold, and silver, accompanied by two curved paths animated with changing opacity. The static circles establish the visual structure, while the paths use SVG `<animate>` elements with `keyTimes` and `values` to create a pulsing effect over a 10-second loop. The code relies on native SVG rendering, with the animation controlled declaratively through SMIL. An inline JavaScript `console.log` shows the integration of basic scripting into the HTML page.

CCurran Kelleher
88% 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
86% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes and coordinates within a static 800x600 viewport. It shows rectangles, circles, lines, and a custom path, some with explicit stroke and fill styling. The visualization is built using raw SVG markup, with elements like `<rect>`, `<circle>`, `<line>`, and `<path>` placed directly in the `index.html` file. An open rectangle outlines the drawing area, while overlapping circles and crossed navy lines illustrate basic positioning and layering. The illustration focuses purely on SVG's native rendering capabilities without any additional libraries.

Mmecklybver@gmail.com
84% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes and coordinates within a static 800x600 viewport. It shows rectangles, circles, lines, and a custom path, some with explicit stroke and fill styling. The visualization is built using raw SVG markup, with elements like `<rect>`, `<circle>`, `<line>`, and `<path>` placed directly in the `index.html` file. An open rectangle outlines the drawing area, while overlapping circles and crossed navy lines illustrate basic positioning and layering. The illustration focuses purely on SVG's native rendering capabilities without any additional libraries.

Mmecklybver@gmail.com
84% match
Loading thumbnail…

Fork of SVG Fundamentals

The fork demonstrates basic SVG shape construction inside a plain `index.html` file, using the SVG element itself without any external libraries. It renders two overlapping circles to show layering and opacity effects, a straight line segment, and two paths with explicit coordinate data to illustrate line drawing and path commands. The code is primarily a static, hand-authored SVG canvas, with one path containing a complex cubic Bézier curve sequence and another tracing a simple polylined route.

Rrsrivastav54
82% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—positioned on a fixed 950 by 500 canvas. It shows how to set basic attributes like coordinates, radii, fill colors, and stroke widths directly in markup. The code uses raw SVG elements within an HTML page, with no JavaScript libraries or external data sources, to illustrate static vector graphics rendering in plain CSS and JavaScript context.

UUsman Haider
82% match
Loading thumbnail…

Fork of SVG Fundamentals

This SVG example demonstrates basic shape primitives and path drawing within a 960-by-500 pixel canvas. Overlapping red and green circles highlight layering and transparency, while a navy diagonal line and a green bezier path built from a compact `d` attribute show coordinate-based positioning. A second black path with mixed absolute and relative commands (`M`, `L`, `l`) illustrates command chaining. The code uses raw SVG elements (`<circle>`, `<line>`, `<path>`) with explicit `fill`, `stroke`, and `stroke-width` attributes, all embedded directly in the HTML file, making the rendering approach fully declarative and static.

Jjesramyep
82% match
Loading thumbnail…

Fork of SVG Fundamentals

This fork demonstrates basic SVG shape primitives in a 960 by 500 canvas, rendering overlapping red and orange circles, a yellow rectangle, a navy line, and a black polyline. The embedded README references a YouTube tutorial, and the code directly uses the SVG `<circle>`, `<rect>`, `<line>`, and `<path>` elements. A decorative heart-shaped path with cubic Bézier commands (`c`, `s`) is included, though the HTML contains no additional styling or interaction.

Aarounde
82% match