Azhar-Shaban

@Azhar-Shaban·3 public vizzes

Fork of Fork of Fork of Fork of Canvas Force Tutorial

A force-directed network graph displays Facebook user connections from a CSV dataset, rendered on an HTML canvas. D3’s `forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, `forceX`, and `forceY` positions nodes, while each tick redraws circles and links using the Canvas 2D context. The example demonstrates a standard D3 v5 network visualization adapted from a video tutorial.

Aug 7, 2021

Loading thumbnail…

Fork of SVG Animation Playground

This animated typography piece demonstrates a dramatic, Star Wars-inspired title reveal. Two alternate forms of the word “GET IT RIGHT” are displayed through layered SVG images, alongside the author's name, “Shaban.” The animation is driven by CSS keyframes applied to the images and a header, using transforms to create a 3D perspective effect. The container uses the `perspective` and `transform-style` CSS properties to enhance depth, while the animated lettering is achieved through the “spin-letters” keyframe. The code references external SVG assets and uses a background image from `cssanimation.rocks`.

Aug 7, 2021

Loading thumbnail…

Fork of HTML Starter

This example presents a simple SVG circle rendered on a blank HTML page, demonstrating how to combine CSS and JavaScript in a minimal web document. The page uses a single `<svg>` element with a `<circle>` whose radius is set to 400 pixels, while the CSS centers the body text at a very large font size. The code relies on native HTML, CSS, and SVG markup, with no external libraries or JavaScript functions beyond the inline style and element structure. The visualization is static and primarily showcases how SVG shapes can be embedded directly in an HTML file.

Aug 7, 2021