Intro

Original state
Remove clip [1, 2, 3]
<path> with arcs
SVG animation
SVG filters

Animating


<feGaussianBlur in="SourceGraphic" stdDeviation="3">
  <animate id="animglow" attributeName="stdDeviation"
  values="0;30;0" dur="0.75s" 
  keySplines="0.42, 0, 1.0, 1.0; 0, 0, 0.58, 1.0" 
  calcMode="spline" begin="fadeintext.end"/>
</feGaussianBlur>

Syncbase animation triggers are awesome!

Multiple line strokes


<style>
.l1 { stroke: white }
.l2 { stroke: #111 }
.l3 { stroke: #CC0F16; }
</style>

<g id="g1" clip-path="url(#c1)">
  <use xlink:href="#p1" stroke-width="90" class="l3"/>
  <use xlink:href="#p1" stroke-width="60" class="l2"/>
  <use xlink:href="#p1" stroke-width="30" class="l1"/>
</g>

Drawing half the stroke


<clipPath id="c1">
  <path d="m0,300l500,0
  a90,90 0 0 0 0,-180
  a90,90 0 0 0 -90,90
  v45H0"/>
</clipPath>
<path id="p1" d="m0,300l500,0
  a90,90 0 0 0 0,-180
  a90,90 0 0 0 -90,90
  v45" fill="none">
</path>

The radius is chosen such that it's large enough to give a nice arc without causing overlap with the full-width stroke. The arc was split in two parts mostly because it was handy at the time, and to help creating arcs that take other turns. Relative arc commands were used because that makes it easy to tweak other parts of the path without having to rewrite everything that follows. In the clip-path which looks almost the same the path that defines the clipping needs to use it's fill, not the stroke, and so must add a horizontal line back to where the path started (this is the H0 command in this example). Otherwise the path is closed with a straight line from the last position (end last arc endpoint) to the start position which makes it look like a triangle.

Findings

Inkscape filters is a great timesaver [1, 2]
Inkscape could use an arc editing tool
CSS background vs <image> performance
Google Chrome renders arcs poorly
Firefox Nightly has some filter invalidation issues

SVG Stacks


svg .icon { display: none }
svg .icon:target { display: inline }


<svg viewBox="0 0 32 28">
  <g id="stack" class="icon">
    <polygon points="0,20 16,24 32,20 32,24 16,28 0,24"/>
    <polygon points="0,12 16,16 32,12 32,16 16,20 0,16"/>
    <polygon points="0,4 16,0 32,4 32,8 16,12 0,8"/>
  </g>
</svg>

Pros and cons

Supports colors, animation, filters etc
Combine with CSS media-queries for LOD
Easy to read and write
Fewer HTTP requests
Resolution-independence (retina screens ♥)
Not yet widely supported in CSS backgrounds

Level of detail


#hours {
  fill: none;
  stroke: #850508;
  stroke-dasharray: 1, 5.28;
  stroke-dashoffset: 0.5;
  stroke-width: 1.5px;
}
@media screen and (max-width: 128px) {
  #hours {
    stroke-dasharray: 1, 17.84;
    stroke-width: 2px;
  }
}
@media screen and (max-width: 64px) {
  #hours {
    stroke-dasharray: none;
  }
}