Mirek SVG Fundamentals

100%

Mirek SVG Fundamentals

✓ Published0🌍 Public

Last edited Mar 20, 2023

Created on Mar 20, 2023

A demonstration of basic SVG shapes and animation, this example shows a stylized green leaf drawn with a path and paired with two light-gray circles. The entire shape group moves horizontally across a 960-by-500 canvas via an SVG `<animateMotion>` element, which follows a linear path from left to right over ten seconds. The drawing uses raw SVG elements—`<circle>`, `<path>`, and `<g>`—with attributes for fill, stroke, and transforms, relying purely on browser-native SVG rendering without any external JavaScript libraries.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

Loading thumbnail…

MIREK SVG Fundamentals

This example demonstrates fundamental SVG shapes and attributes in a static 960×500 canvas. It shows overlapping red and green circles, a thick navy diagonal line, a horizontal path with rounded corners, and a black angular polyline. The code uses raw SVG elements—`circle`, `line`, and `path`—with inline fill, stroke, and stroke-width styling. Rendering relies on the browser’s native SVG support via the `svg` tag, with no external JavaScript libraries or data sources.

MMirekBXL

87% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, lines, and paths, rendered directly on an SVG canvas. It also shows a hover-triggered CSS transition that gradually changes a rectangle’s fill color to green, alongside a nested SVG with multiple ellipses and an animated circle that moves vertically using the SVG `<animate>` element. The code uses plain SVG markup with inline styling and attributes, such as `fill`, `stroke`, `stroke-width`, and `values` for animation, without relying on external libraries. The composition serves as a raw tutorial of core SVG capabilities.

CCaroline Ghisolfi

80% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the basic building blocks of SVG graphics, including circles, rectangles, a custom path, and a line, all rendered directly on an HTML page. It shows how CSS can animate rectangular elements smoothly over three seconds, and how a hover effect triggers a green fill with a thick stroke. The code uses the native `svg` element and its child tags like `circle`, `rect`, `path`, and `line`, with styling applied via an embedded `<style>` block. It serves as a bare-minimum introduction to SVG fundamentals using only HTML and JavaScript without any external libraries.

Mmegan-grannan

80% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling in a static scene. It shows a blue circle, two diagonal lines, and a black polyline path, all defined within an inline SVG element. The code uses raw SVG markup with elements like `<circle>`, `<line>`, and `<path>`, applying attributes such as `stroke`, `stroke-width`, and `fill`. A separate file, hover.html, explores CSS transitions on SVG circles, changing fill color and stroke width over three seconds when hovered.

Nnim@brejnholt.dk

80% 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

79% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shape elements—circles, rectangles, lines, and paths—statically positioned on a 960×500 canvas. It shows how fill, stroke, stroke-width, and coordinate attributes control appearance, while explaining that no z-index exists; the document order determines stacking. The code uses raw SVG markup within an HTML page, with CSS resets for margins and overflow. Path commands like `M` and `L` illustrate absolute positioning, contrasting with relative `l` syntax, providing a hands-on introduction to SVG’s drawing model for future data-visualization work.

TTheo-0201

79% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG shapes in a static 960x800 canvas, using plain SVG markup directly in the HTML. It shows three circles with different radii and colors, a yellow rectangle with a navy stroke, a red diagonal line, and a black polyline path defined by an M/L command sequence. The rendering relies on native SVG elements such as circle, rect, line, and path, with attributes like cx/cy, width/height, and stroke-width. No JavaScript or external libraries are involved, highlighting core SVG syntax for geometry and styling.

Ddomiauer

79% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and attributes, including circles, rectangles, lines, and paths, all rendered directly on an 800-by-400 canvas. It shows how fill, stroke, and stroke-width control appearance, such as a green circle with a thick navy outline and a yellow rectangle with a navy border. A red path combines straight lines and quadratic Bézier curves (Q), while another path uses an arc command (A) to form a curved teardrop shape. The code uses inline SVG elements within an HTML document, with no external JavaScript libraries.

Ccharlesjou

79% match