mfgok

@mfgok·5 public vizzes

Fork of Dom Manipulate With D3

This example demonstrates how to create a striped visual effect using SVG rectangles masked by a circular window. It uses D3’s `select`, `range`, and data joins to generate 100 horizontal bars, each with a height of 10 pixels and a vertical offset of 20 pixels, filling the full viewport width. The bars are rendered with a `mask` attribute referencing a circular mask, so only the area inside the circle is visible. The code exercises D3’s declarative data binding and the SVG mask API to achieve the clipped pattern.

Sep 25, 2022

Loading thumbnail…

Dom Manipulate

This example demonstrates how SVG masks can create geometric patterns by layering horizontal and vertical stripes over a circular cutout. The code manually constructs SVG elements using the DOM API, creating a full-screen SVG with two masks: one revealing a circle of horizontal stripes and another revealing the inverse. One hundred turquoise rectangles are generated for each orientation, with the masks controlling visibility through white and black fill values. The visualization highlights fundamental SVG manipulation techniques without relying on a visualization library, though D3 is listed as a dependency.

Sep 20, 2022

Loading thumbnail…

Fork of HTML Starter

A minimalist SVG scene depicting a sky gradient, rendered via React and raw SVG elements. A rectangular backdrop uses a `radialGradient` with animated `stop-color` transitions that cycle from aliceblue to indigo over 15 seconds and repeat indefinitely, creating a subtle color-shifting effect. The second gradient stop remains a static steelblue. The example demonstrates how CSS and JavaScript can drive SVG animations without external libraries, relying solely on native SVG `<animate>` elements and inline styling to produce a dynamic, full-viewport visual.

Sep 19, 2022

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This animated SVG scene depicts a stylized sunrise and sunset over a layered landscape. It uses an HTML `<svg>` element with CSS gradients and SVG `<animate>` tags to cycle the sky from aliceblue to indigo, move the sun downward, and shift the horizon colors over a 15-second loop. The two overlapping landscape paths use quadratic and cubic Bézier curves, filled with `radialGradient` and `linearGradient` definitions. All rendering is done directly through the SVG API, with no external JavaScript libraries.

Sep 19, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling through a single static page. It draws a rectangle, four circles, two polygonal paths, and a line within an SVG element. CSS defines the rectangle’s red fill, grey stroke, and a two-second transition that changes its fill to green and stroke width on hover. The code uses plain HTML, CSS, and inline SVG attributes like `cx`, `cy`, and `d`, with no external libraries. It illustrates basic vector graphics rendering and declarative styling in the browser.

Sep 18, 2022