nawendusingh (@nawendusingh), VizHub

Let's make a face with D3.js!

A smiling yellow face is drawn in SVG with D3.js, featuring eyes and a mouth created from an arc path. The example demonstrates basic DOM manipulation and transitions as the eyebrows animate upward and back down over two seconds. Using d3.select, arc, and attr, the code builds the face from a circle, rectangles, and a path, while the transition method moves the eyebrow group between vertical offsets. The face is centered within a 960 by 500 SVG canvas using a translated group element.

Sep 14, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles combine to create a static composition, using circles, rectangles, lines, and a path. It shows the effects of inline styling versus CSS class-based styling, including fills, strokes, stroke-width, line joins, and caps. The rendering relies on raw SVG elements within an HTML file, with styles defined in an external stylesheet. A transform group scales the entire drawing, while nested groups apply translation and shared presentation attributes across multiple shapes.

Sep 14, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles combine to create a static composition, using circles, rectangles, lines, and a path. It shows the effects of inline styling versus CSS class-based styling, including fills, strokes, stroke-width, line joins, and caps. The rendering relies on raw SVG elements within an HTML file, with styles defined in an external stylesheet. A transform group scales the entire drawing, while nested groups apply translation and shared presentation attributes across multiple shapes.

Sep 14, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles combine to create a static composition, using circles, rectangles, lines, and a path. It shows the effects of inline styling versus CSS class-based styling, including fills, strokes, stroke-width, line joins, and caps. The rendering relies on raw SVG elements within an HTML file, with styles defined in an external stylesheet. A transform group scales the entire drawing, while nested groups apply translation and shared presentation attributes across multiple shapes.

Sep 14, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styles combine to create a static composition, using circles, rectangles, lines, and a path. It shows the effects of inline styling versus CSS class-based styling, including fills, strokes, stroke-width, line joins, and caps. The rendering relies on raw SVG elements within an HTML file, with styles defined in an external stylesheet. A transform group scales the entire drawing, while nested groups apply translation and shared presentation attributes across multiple shapes.

Sep 14, 2019