Mariko Iwata

@MarikoIwata·2 public vizzes

Fork of Exercise 1: SVG Fundamentals

A fork of an SVG fundamentals exercise depicts an animated sunrise and sunset across a stylized landscape. The visualization uses a radial gradient for the sky and two linear gradients for layered terrain paths, all defined within SVG `<defs>` elements. A `<circle>` element represents the sun, and SMIL `<animate>` tags oscillate its vertical position and the gradient stop colors over a 15-second loop, transitioning from aliceblue to indigo and steelblue to simulate the changing sky. No external JavaScript libraries are used; the rendering relies entirely on native SVG markup.

Sep 3, 2023

Loading thumbnail…

SVG fundameentals

This example demonstrates fundamental SVG shapes rendered directly in a web browser. It shows circles, rectangles, and lines positioned on a coordinate plane, with properties like fill color, stroke color, and stroke width. The code uses raw SVG markup within an HTML page, with external CSS styling. The visualization is purely illustrative and requires no JavaScript libraries, relying instead on the browser's native SVG rendering capabilities.

Sep 3, 2023