sahelmoazamigoodarzi@gmail.com

@SahelMG·4 public vizzes

SVG Fundamentals project

An animated blue line traces a complex looping path within an SVG element using the HTML5 `<animateMotion>` API. The path data, defined by a dense series of cubic Bézier coordinates, drives the continuous movement of the element along the curve. The rendering relies solely on native SVG path and animation capabilities within a minimal HTML page, requiring no external JavaScript libraries or frameworks. The project demonstrates fundamental SVG techniques for creating self-contained, animated vector graphics.

Aug 20, 2024

Loading thumbnail…

SVG Fundamentals project

This example demonstrates interactive SVG fundamentals using plain HTML and CSS, without any external libraries. It showcases multiple SVG shapes—circles, polygons, and bezier paths—that respond to hover events with animated transitions, such as changing fill colors, stroke widths, and cursor states. The page includes a large decorative circle that swaps its fill and stroke colors over a three-second transition, along with geometric polygons and curved paths rendered directly in the markup. The code relies on native SVG element attributes and CSS transitions to drive all visual behavior.

Aug 20, 2024

Loading thumbnail…

SVG Fundamentals project

This example demonstrates interactive SVG shapes, including circles, polygons, and paths, that respond to hover events with CSS transitions. It uses inline SVG elements within an HTML page, leveraging CSS properties like `fill`, `stroke`, and `r` to animate color, stroke width, and size changes over specified durations. The shapes are drawn using basic SVG geometry, including a cubic Bézier path, and the interactions are defined entirely through CSS hover rules rather than JavaScript logic. The project serves as a foundational exploration of SVG rendering and styling techniques.

Aug 20, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates the foundational SVG elements that form the building blocks for data visualization. It renders three circles in red, green, and blue, a pair of rectangles, and a navy line inside an SVG canvas, showing how primitive shapes compose into a graphic. The code uses direct SVG markup within an `index.js` file, leveraging the VizHub V3 runtime environment and its continuous hot reloading feature. An interactive widget allows the user to Alt-drag a number in the editor to adjust the font size property in real time.

Aug 17, 2024