Skip to main content
100%

Shapes and Colors with SVG and CSS

✓ Published3🌍 Public
MMargarita Chernetski
Last edited Jul 9, 2020
Created on Jul 8, 2020

A yellow circle with black outlines forms a face, featuring two eyes and animated eyebrows, all rendered as SVG shapes. The example uses D3.js version 5 to select and append circles, rectangles, and a path, with the path drawn using the `arc` function to create a mouth. CSS styles the page, while D3 transitions animate the eyebrows' vertical movement over two-second intervals. The SVG canvas is 960 by 500 pixels, and all elements are positioned using transforms relative to the center.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes