Joora Song

@wicked7578·4 public vizzes

Fork of Let's Make a Face Part I

A yellow circle with a black outline renders as the first step toward a smiley face, centered on a 960 by 500 SVG canvas. The shape uses React to create SVG elements, with the circle’s radius derived from the canvas height minus half the stroke width. The code imports React and ReactDOM, then renders the SVG through `ReactDOM.render`, setting the center coordinates and stroke attributes directly. The example demonstrates basic SVG drawing within a React component, with no facial features yet added.

Nov 25, 2021

Loading thumbnail…

smiley face part I

A yellow smiley face rendered with SVG circles fills a 960-by-500 canvas. The main face uses a large yellow circle with a black stroke, while two smaller circles represent the eyes; no mouth is drawn. The example demonstrates basic SVG shape creation and styling through inline attributes, with the page containing only these static elements and no interactive behavior or data binding.

Nov 25, 2021

Loading thumbnail…

let's make face with d3.js

This example draws a smiling face on an SVG canvas using D3.js version 7. The code creates a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path arc for the mouth, all positioned using absolute coordinates within a 960×500 viewport. It uses D3’s `select`, `append`, and `attr` methods to build and style the SVG elements, and the `arc` generator to define the mouth’s curved shape. The rendering is entirely vector-based, with no external data source.

Nov 25, 2021

Loading thumbnail…

shapes with svg and css

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using both inline attributes and CSS classes. It shows the effect of explicit fill and stroke properties, group-level transformations like `translate` and `scale`, and cascading CSS rules that apply stroke width and color to line elements. The rendering uses raw SVG within an HTML page, with a linked stylesheet, and requires no external JavaScript libraries.

Nov 25, 2021