I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

SVG Basics: Polygons

svg / basics

Estimated reading time: 2 minutes, 30 seconds

If you want a closed SVG shape that is more than a basic circle, ellipse or rectangle, you’ll need to create a polygon.

In SVG, a polygon is any closed shape that consists of straight line segments: SVG doesn’t yet have elements for regular polygons (no <star /> or <hexagon />); instead, it simply allows you to make closed shapes of any kind by specifying points. While three or four-point polygon shapes are easy to code by hand, you’ll probably want to use a graphical editor like Adobe Illustrator, Inkscape or PhotoShop to create more complex designs, exporting them as SVG. Regardless, it’s very useful to understand the basics of SVG polygons, as doing so allows you to “tweak” and alter shapes in code without relying on graphical editors.

Composition in Color A, 1917, by Piet Mondrian, rendered in SVG

SVG Basics: Rectangles and Squares

svg / basics

Estimated reading time: 2 minutes, 30 seconds

Cet article est également disponible en français

After circles, rectangles are probably the easiest element to draw in , requiring just one more attribute to complete them. The basic syntax for rectangles requires an x position, y position, width and height:

Captain America's Shield

SVG Basics: Circles and Ellipses

svg / basics

Estimated reading time: 3 minutes

Cet article est également disponible en français

While most designers use a visual editor like Adobe Illustrator to create drawings, knowing the basics of SVG syntax can allow you to create elements like lines, circles and rectangles easier and more precisely; in some cases, coding these elements by hand produces work faster than a visual editor ever could.

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.