aashirshk20

@aashirshk20·2 public vizzes

Let's make a face

A smiling face is drawn on a yellow circular head using basic SVG shapes. The visualization constructs the face from a large yellow circle for the head, two smaller black circles for the eyes, black lines for eyebrows, and a curved arc for the mouth, all centered on an 960x500 canvas. The code uses D3.js v5 selection and attribute methods to create and position the shapes, and leverages the `d3.arc` API to generate the path for the mouth. The rendering is done entirely through SVG elements appended to the root `<svg>` element.

Jun 11, 2020

Loading thumbnail…

Shape with SVG and CSS

This example demonstrates basic SVG shapes—circles and rectangles—stylized with CSS properties like fill, stroke, and stroke-width. The code arranges these shapes into groups using SVG `<g>` elements with transforms for positioning, and applies class-based styling to lines and paths. It uses React to render the SVG markup directly in the HTML page, with a stylesheet controlling visual attributes such as color and line join styles. The visualization highlights how SVG primitives can be combined with CSS for simple, declarative graphics.

Jun 11, 2020