Skip to main content
CSS is fun and cool and I like it.

Articles Tagged line drawing

It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
2 Articles
{
,

}
Link

Diana Smith’s Top 5 CSS Properties She Uses to Produce CSS Art

Avatar of Chris Coyier
Author
Chris Coyier

Have you seen Diana Smith’s CSS drawings? Stunning. These far transcend the CSS drawings that sort of crudely replicate a flat SVG scene, like I might attempt. We were lucky enough for her to post some of her CSS drawing techniques here last year.

Well, Diana has also listed the top five CSS properties she uses to get these masterpieces done, and they are surprising in their plainness:

  1. border-radius
  2. box-shadow
  3. transform
  4. gradients
  5. overflow

…but of course, layered in trickery!… Read article “Diana Smith’s Top 5 CSS Properties She Uses to Produce CSS Art”

Article

Animate Calligraphy with SVG

Avatar of Claus Colloseus
Author
Claus Colloseus

From time to time at Stackoverflow, the question pops up whether there is an equivalent to the stroke-dashoffset technique for animating the SVG stroke that works for the fill attribute. But upon closer inspection, what the questions are really trying to ask is something like this:

I have something that is sort of a line, but because it has varying brush widths, in SVG it is defined as the fill of a path.

How can this “brush” be animated?

… Read article “Animate Calligraphy with SVG”