Get It Right - 1: SVG Fundamentals

100%

Get It Right - 1: SVG Fundamentals

✓ Published1🌍 Public

Last edited Nov 27, 2022

Created on Nov 27, 2022

This example demonstrates a minimalist SVG composition inspired by Nadieh Bremer’s talk on gradients and filters, featuring a glowing sun-like circle layered over a vertically striped backdrop. The rendering uses a custom linear gradient (`<linearGradient>`) with abrupt color stops to create a bold, banded sky, while a blurred circle (via `<feGaussianBlur>`) produces a halo effect around a solid core. The scene is drawn entirely with raw SVG elements—`<rect>` and `<circle>`—inside a static `index.html`, with no external libraries or data-binding. A hidden `<defs>` section defines both the gradient and blur filter for reuse.

AI-generated description

Episode 1 exercise for Get it Right in Black and White

This is mainly inspired from "SVG Beyond Mere Shapes" by Nadieh Bremer, which shows cool examples of using gradients and filters in data visualizations.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Get It Right - 1: SVG Fundamentals

This example demonstrates SVG fundamentals through a minimalist composition of concentric circles over a vertically layered linear gradient. The code defines a multicolor gradient with abrupt color stops and applies a Gaussian blur filter, though the blur is not currently used on any visible elements. A single `<g>` group centers two overlapping circles in pale yellow against the dark purple-to-orange gradient background. The visualization uses only native SVG tags such as `linearGradient`, `feGaussianBlur`, `rect`, and `circle`, with no external libraries, highlighting basic shape rendering and fill techniques.

MMinki-Lee

82% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates core SVG shapes—circles, rectangles, lines, paths, and arcs—along with interactive styling. It applies CSS transitions to rectangles on hover and scales paths via hover transforms, while also showing inline SVG attribute definitions and global style overrides. The code also defines radial and linear gradients with animation elements, though the accompanying `sunshine.html` contains incomplete markup and references undefined gradient IDs, making the animated scene non-functional. The primary `index.html` file serves as a static showcase of SVG fundamentals.

Ccssergio

79% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles, rectangles, and lines—positioned on a 960×500 canvas. It shows how fill, stroke, stroke-width, and fill-opacity attributes control appearance, with overlapping translucent rectangles creating color blends. The code uses native SVG markup directly embedded in the HTML, without any JavaScript libraries or D3 APIs. A set of navy lines and white circles forms a simple geometric pattern, while the README references “Get it Right in Black & White: Episode 1” as the source video tutorial.

KKai Stewart

78% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates core SVG fundamentals using four primitive shapes: a circle with a red-to-blue radial gradient, a larger circle with a centered radial gradient, a blue-outlined rectangle, and a red line. The SVG markup defines two radialGradient elements within a defs block, using stop tags to specify color transitions. A linearGradient is also declared but not referenced by any shape. The 800x400 canvas is rendered directly in HTML, with gradients using the url(#id) reference syntax.

Aalexscott-untitled

78% match

Loading thumbnail…

Circle with Gradient

A full-screen SVG displays a single circle centered on a 960-by-500 canvas, rendered with a vertical linear gradient that transitions from a pale cream top to a warm brown bottom. The example uses the SVG `<circle>` and `<linearGradient>` elements, with `gradientUnits` set to `userSpaceOnUse` to align the gradient precisely to the circle’s bounding box. The static scene demonstrates how to create a subtle, polished 3D-like shading effect using only vector primitives and no JavaScript libraries.

CCurran Kelleher

77% match

Loading thumbnail…

SVG Fundamental

This example demonstrates fundamental SVG drawing and animation techniques within an HTML page. It renders a landscape scene with a moving sun, animated gradient backgrounds, and layered curved landmasses defined by SVG path elements. The code uses native SVG features including `radialGradient` and `linearGradient` definitions, `<circle>`, `<rect>`, and `<path>` elements, and the `d` attribute with commands like `M`, `L`, `Q`, and `C`. Animations are implemented with the `<animate>` element, changing the sun’s `cy` position and color stops over fifteen-second cycles.

BBart van Pelt

77% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes and their interactive behavior. Static geometry appears first, including circles, rectangles, lines, and paths with varied fills and strokes, while CSS transitions animate rectangle properties on hover. The visualization then explores advanced SVG features using embedded animations and gradients. A radial gradient defines a sun-like circle with an animated vertical position, while linear gradients fill layered landscape paths. The code also includes a path with an arc and quadratic curve, plus an incomplete gradient definition referencing a missing `sky-gradient` ID. SVG styling uses CSS selectors for shape customization and hover effects.

Ccssergio

77% match

Loading thumbnail…

SVG Fundamentals

This example displays a simple SVG scene with a black circle and a thick navy diagonal line on a 960 by 500 canvas. The visualization demonstrates fundamental SVG rendering through raw markup, using the `<circle>` and `<line>` elements with explicit coordinate and styling attributes. The code is embedded in a minimal HTML page, relying on the browser’s native SVG support without any JavaScript or external libraries, making it a pure static illustration of vector graphics basics.

Hhaithamradhi

76% match