shah417

@shah417·3 public vizzes

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling. It shows circles, rectangles, lines, and a path, with some shapes using default black fill while others specify fill colors like red and green. A transformed group applies a light blue fill and black stroke with a thicker stroke-width on the circle. The CSS file styles the line and path elements with custom stroke colors and line joins. The SVG markup uses inline attributes, the `<g>` element for grouping, and CSS classes to control presentation.

Sep 7, 2019

Loading thumbnail…

Shapes Using SVG and CSS

This example draws a smiley face using SVG shapes, with a yellow circle for the head, two black circles for the eyes, and a dark arc for the mouth. The shapes are positioned using explicit coordinates and a `transform` translation group. The sketch uses the D3 library (v5) for SVG element creation and employs D3's `arc` function to generate the mouth path. The SVG canvas is 960 by 500 pixels, and the styling is defined in an external CSS file.

Sep 7, 2019

Loading thumbnail…

HTML CAR REPORT

This example displays a simple car report as a bulleted list of three used vehicles, each paired with a purchase price in dollars. The HTML document marks the 2008 Nissan Leaf as highlighted with red text, while the Toyota Corolla and Mazda CX-3 appear in default styling. The page relies on plain HTML structure with a linked `styles.css` file that sets a large monospace font and defines the `.highlited` class, using no JavaScript libraries or data-driven rendering.

Sep 7, 2019