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: Lines, PolyLines, Caps and Corners

svg / basics

Estimated reading time: 2 minutes

Cet article est également disponible en français

If you’re after a line or an open shape, rather than a closed polygon or circle, SVG has two options for you: lines and polylines.

SVG Basics: Polygons

svg / basics

Estimated reading time: 2 minutes, 30 seconds

Cet article est également disponible en français

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:

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.