Simran

@siminspace·4 public vizzes

Fork of SVG Playing Around and Studying

This piece shows an idyllic, animated landscape with a gradient sky, a sun, layered land, trees, and three birds. It is constructed entirely with procedural SVG elements, including paths and groups, and uses CSS animations. The scene is generated dynamically through a custom JavaScript engine that creates SVG elements via `document.createElementNS`, with the sky’s color shifts driven by SVG `<animate>` elements. The birds and landforms are built from static path data, while the sun appears as a moving element with a radial gradient fill. The work explores SVG structure and animation.

Dec 21, 2022

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example shows an animated sunrise and sunset over a stylized mountain landscape, using purely declarative SVG markup. The sky and two layered terrain paths transition through a daily color cycle via `<animate>` elements on radial and linear gradients, while the sun circles vertically between the mountains and horizon. The piece demonstrates core SVG fundamentals—shapes, paths, gradients, and declarative animation—without relying on JavaScript or external libraries, and explicitly defines its geometry and timing in the document itself.

Dec 21, 2022

Loading thumbnail…

Introduction of SVG

This example introduces SVG graphics by constructing a simple abstract composition. It shows a series of colored horizontal bands forming a background, overlaid with a vertical rounded rectangle and several circles arranged in a flower-like pattern. The piece uses pure SVG elements, including `rect` and `circle`, with colors defined through `linearGradient` defs. These gradients use different rotation angles to create varied shading on the circles. The code is authored specifically for a React environment, but the rendering is handled entirely by the browser's native SVG support, with no external libraries involved.

Dec 20, 2022

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes, using two circles to show how the `fill` property controls color. The first circle uses the default black fill, while the second explicitly sets `fill="red"`. The code creates a static SVG graphic directly in an HTML page, relying on the native SVG API within the markup. It serves as a minimal introduction to vector graphics structure, using only the `<circle>` element and its `cx`, `cy`, and `r` attributes, with no additional libraries or interaction.

Dec 20, 2022