Haroon Elahi

@haroonelahi663·3 public vizzes

Fork of Smiley Face Part III

This example shows a smiley face rendered as an SVG graphic using React and D3. A yellow circle with a black stroke forms the head, while two smaller black circles serve as eyes and a curved path creates the mouth. The code uses React components to structure the SVG elements and the `arc` generator from D3 to compute the mouth’s path based on specified inner and outer radii and start/end angles. All shapes are positioned relative to a central coordinate system using SVG transforms.

Feb 15, 2023

Loading thumbnail…

Smily Face

This example builds a smiling face from basic SVG primitives centered in a 960-by-500 viewport. It uses React to render the face, with D3’s `arc` generator creating the mouth path between specified angles. The face comprises a yellow circle with a thick black stroke, two smaller circles for eyes, and a rotated group that positions the mouth. All shapes are drawn with hardcoded coordinates, showing how React and D3 can combine for simple geometric visualizations without external data.

Feb 14, 2023

Loading thumbnail…

Fork of Hello HTML

This example renders a single SVG circle at the origin of a 960×500 viewport. The circle has a radius of 100 pixels but no fill or stroke, so it appears as an invisible element on a blank page. The HTML uses an inline SVG with fully specified width and height attributes, while the body margin is set to zero and overflow hidden to remove any default spacing. No JavaScript libraries or external APIs are used; the visualization relies solely on raw SVG markup embedded directly in the HTML file, making it a minimal demonstration of basic SVG insertion.

Feb 10, 2023