Skip to main content
Log in
A

alshami52

@alshami52·6 public vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS-based styling. It shows circles and rectangles with default black fills, then explicit color fills using named colors and hex values, and finally a group with a light blue fill and black stroke. A separate group uses the CSS class `lines` to apply stroke properties to line and path elements. The SVG is scaled using a transform attribute, and styles are defined in an external stylesheet, with all rendering handled directly through SVG markup.

Sep 6, 2019
Loading thumbnail…

Let's make a face

A playful SVG face is constructed by layering simple geometric shapes—a red background, a circular face, and facial features—within a single web page. The example demonstrates basic SVG composition and styling, with the background color set to red using a D3 selection. The code uses `d3.select` to grab the SVG element and applies inline CSS via `svg.style`. The page imports D3 v5 from a CDN and sets the SVG dimensions to 960 by 500 pixels, requiring no external data source.

Sep 5, 2019
Loading thumbnail…

Let's make a face by D3

This example demonstrates how to construct a stylized face using SVG shapes and D3.js. The visualization uses `d3.forceSimulation` to position facial elements like eyes, nose, and mouth, while `d3.select` and `d3.append` build the SVG structure. The code references D3 v5 via a CDN and relies on SVG’s native attributes for styling, with a linked CSS file controlling page margins. The face emerges from stacked geometric primitives, showcasing D3’s utility for layout-driven SVG composition rather than interaction or data binding.

Sep 4, 2019
Loading thumbnail…

let's make a face with D3

This example demonstrates how to build a cartoon face using SVG elements, with D3.js selecting and styling each part. The rendering relies on D3 v5 to manipulate the SVG document, using the `d3.select` API to position features like eyes, nose, and mouth. The page loads a 960-by-500 pixel SVG canvas, and the embedded script logs the D3 object to the console for verification. The face geometry is defined entirely through SVG shapes, with CSS resetting the body margins and hiding overflow for a clean, full-window display. The accompanying video reference offers additional context for the construction process.

Sep 4, 2019
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS-based styling. It shows circles and rectangles with default black fills, then explicit color fills using named colors and hex values, and finally a group with a light blue fill and black stroke. A separate group uses the CSS class `lines` to apply stroke properties to line and path elements. The SVG is scaled using a transform attribute, and styles are defined in an external stylesheet, with all rendering handled directly through SVG markup.

Sep 4, 2019
Loading thumbnail…

Shapes and Colors with SVG and CSS

Eight SVG shapes and lines demonstrate basic vector graphics styling with CSS. A circle and square appear first without fills, then with explicit red and green fill attributes, and a third group applies a shared light-blue fill with black strokes via an SVG presentation attribute. Two additional line and path elements use CSS classes to define their stroke color, width, and rounded line joins. The example relies on standard SVG elements like `circle`, `rect`, `line`, and `path`, with transforms for scaling and positioning, all rendered directly in an HTML file.

Sep 4, 2019