hassanaqeelkhan

@hassanaqeelkhan·4 public vizzes

England Regions

This gallery example presents a static SVG map of England's regions. The map is constructed from raw path coordinates, which were manually converted from an image using GIMP's "To Path" feature. The visualization includes interactive hover effects, where CSS styling is used to change a region's opacity, and JavaScript functions update text labels to display region names when a path is moused over. The SVG also includes a manually traced Gaussian curve path, illustrating the SVG path format.

Oct 5, 2023

Loading thumbnail…

THE SVG WIZARD

This example uses SVG paths to trace a hand-drawn portrait of Curran from a YouTube video. The image data originates from a GIMP-generated path exported to SVG, with the path coordinates embedded directly in the markup. Hovering over the SVG triggers a CSS `:hover` rule that scales the graphic via the `transform` property, while a separate class applies a smooth transition. The page also includes a Gaussian curve SVG sourced from Wikimedia, demonstrating how SVG paths and XML-based vector graphics are constructed and rendered in the browser.

Sep 11, 2023

Loading thumbnail…

Fork of HTML Starter

This example shows a simple SVG composition of colored circles, a line, and two paths, paired with a large “Hello HTML!” message. It demonstrates how to integrate static vector graphics directly into an HTML page using inline SVG elements like `circle`, `line`, and `path`, with CSS controlling the text styling. The graphic uses no JavaScript libraries; it relies purely on HTML markup and the `stroke`, `fill`, and `stroke-width` SVG attributes to define shapes and lines. The two paths illustrate different fill behaviors, with one explicitly setting `fill="none"` to keep its area transparent.

Aug 14, 2023

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 setup by displaying the text "Hello D3 version 7" in the center of the page using a large, 13-em font size. It imports the `select` function from D3 and uses it to target the empty `body` element, setting its text content directly. The code loads D3 version 7 from a CDN and relies on `bundle.js` to execute the main script, illustrating the basic structure for starting a D3 project without any data or complex visualizations.

Aug 14, 2023