NishanPoudel1995

@NishanPoudel1995·5 public vizzes

Fork of Let's Make a Face Part I

This example shows a simple smiley face SVG, drawn with a yellow circle for the head, a black outline, and two small black circles for eyes. The face is rendered using basic SVG elements inside an HTML document, with React and ReactDOM libraries loaded via a content delivery network. The code uses raw `<svg>` tags and `<circle>` elements, with a separate JavaScript file that logs the ReactDOM object and defines a basic React component returning a heading, though this component is not displayed. The visualization is static and incomplete, as described by the README.

Jul 3, 2021

Loading thumbnail…

Hellow world!!

A large yellow circle with a thick black outline dominates the SVG canvas, accompanied by two smaller black-bordered circles positioned to the upper right and left. The right circle is filled solid black, while the left circle has no fill, creating a simple smiley face pattern. The rendering is achieved directly through raw SVG elements—`circle` tags with explicit `cx`, `cy`, and `r` attributes—within an inline `<svg>` block. The page uses no JavaScript or external libraries, relying solely on static SVG markup and embedded CSS to set the body margin and hide overflow.

Jul 3, 2021

Loading thumbnail…

Untitled

This visualization presents an interactive particle system that arranges thousands of glowing dots into a large, animated smiley face. A force-directed simulation, powered by D3.js’s `forceSimulation` API, draws the particles toward target positions derived from an image’s pixel data, captured via Canvas `getImageData`. The result is a fluid, constantly shifting portrait where individual particles orbit and settle into the facial pattern, creating a dynamic, self-organizing picture.

Jul 2, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static, stylized smiley face constructed from three SVG circles, with a large yellow head and two smaller black eyes. The face is drawn directly using SVG elements, specifically `<circle>` tags, within an HTML page. The code relies on the standard SVG API for rendering, setting attributes like `cx`, `cy`, `r`, `fill`, and `stroke` to position and style the shapes. No JavaScript libraries or interactive behaviors are present; it is a pure, declarative vector graphic.

Jul 2, 2021

Loading thumbnail…

Hello Html

This example demonstrates how to embed an SVG circle within a minimal HTML5 document. A single circle with a radius of 200 pixels is drawn inside an SVG element with a width of 960 and height of 500. The page uses basic CSS to remove margins and hide overflow, while the SVG circle does not include any fill or stroke attributes, so it renders as a default black shape. The code relies solely on standard HTML, CSS, and the native SVG API, with no external libraries or data sources.

Jul 2, 2021