Skip to main content
Log in
K

K M Jawadur Rahman

@kmjawadurrahman·5 public vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple cartoon face made from three SVG circles: a yellow head with a black outline and two unfilled circles for eyes. The page sets the body margin to zero and hides overflow, so the 960 by 500 pixel SVG canvas fills the viewport. The drawing is defined directly in the HTML markup using SVG element coordinates, with no JavaScript or external libraries involved. The face is centered on a 480 x 250 pointer, with the head radius set to 245 and an eye offset of 130 pixels from center.

Sep 25, 2021
Loading thumbnail…

Fork of Smiley Face Part III

This example shows a smiling face constructed from basic SVG shapes, including a yellow circular head with a dark stroke, two black eyes, and a mouth drawn as an arc. The visualization is built using React components to render the SVG elements, while the mouth’s path is generated with the `arc()` function from D3 v5. The code translates the drawing to the center of the viewport and uses relative coordinates for the features, with all shapes positioned programmatically based on constants for offsets and radii.

Sep 25, 2021
Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as an SVG that scales to fill the browser window. The face is drawn with three circles: a large yellow head with a black outline and two smaller black eyes. The code uses React to define the SVG structure and ReactDOM to render it, calculating coordinates and dimensions from the window’s width and height. The rendering relies on basic SVG circle elements within a transformed group, with stroke and fill properties set directly.

Sep 25, 2021
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple cartoon face made from three SVG circles: a yellow head with a black outline and two unfilled circles for eyes. The page sets the body margin to zero and hides overflow, so the 960 by 500 pixel SVG canvas fills the viewport. The drawing is defined directly in the HTML markup using SVG element coordinates, with no JavaScript or external libraries involved. The face is centered on a 480 x 250 pointer, with the head radius set to 245 and an eye offset of 130 pixels from center.

Sep 25, 2021
Loading thumbnail…

Smiley Face Part I

A single yellow circle with a black outline forms the head of a smiley face, accompanied by two smaller black circles as eyes. The SVG rendering uses fixed coordinates and attributes, with the face centered at (480, 250) and a radius of 245. The eyes are positioned at offset distances from the center, and the code comments note the relationship between height, stroke width, and eye placement. No JavaScript libraries are used; the visualization relies solely on static HTML and SVG elements.

Sep 24, 2021