domiauer

@domiauer·3 public vizzes

SVG Fundamentals Sunrise/Sunset

A 15-second SVG animation depicts a day-night cycle over a stylized landscape. The sun rises and sets by translating its circle's center position along the y-axis, while the sky and land gradients continuously shift color between aliceblue and indigo. Using the W3C SVG `<animate>` element, the example synchronizes color stops and the sun's `cy` attribute to create seamless loops, with all geometry defined through inline SVG paths and `<rect>` elements.

Dec 5, 2022

Loading thumbnail…

SVG Fundementals1

A single blue rectangle with a thick navy border sits centered on an SVG canvas, demonstrating basic vector graphics styling. The CSS defines a `rect` selector with a blue stroke, navy fill, and 20-pixel stroke width, plus a 3000ms transition on all properties. Hovering the rectangle triggers a CSS `:hover` rule that changes the fill to red and increases the stroke width to 100 pixels, animating the change smoothly. This example shows how pure CSS can drive interactive SVG styling without any JavaScript libraries, using the native SVG `rect` element and CSS transitions.

Dec 5, 2022

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.

Dec 5, 2022