Files used

Right-click, save ...

• path_morphing.html
• path_morphing.svg

Technical Details

There are some constraints for doing path-morphing: Currently you have to use the same number of vertices in both path-elements, and they have to be of the same type (you can't mix Bziercute; and non-Bézier when they don't appear in the same order in the other path-description. You should also orient both polygons in the same direction (left-right and right-left would produce unwanted results).

You can use path-morphing with the following svg-code:

<path fill="url(#fillAustria)" stroke="deepskyblue" stroke-width="15"
               d="...AustrianPath...">
  <animate dur="30s" repeatCount="indefinite" attributeName="d" 
         values="...AustrianPath...;...SwissPath...;...SwissPath...;
         ...AustrianPath...;...AustrianPath..."/>

  <animate attributeType="CSS" attributeName="fill" calcMode="discrete"
          values="url(#fillAustria);url(#fillSwitzerland);
          url(#fillSwitzerland);url(#fillSwitzerland);url(#fillAustria);
          url(#fillAustria)" dur="&animDuration;"
          repeatCount="indefinite" />
</path>

The above animation construct shows first an original path (geometry of Austria) with a start-fill (url(#fillAustria)). The path-element embraces 2 animations: an animation of the path-attribute (d) and an animation of the attribute (fill). The first uses linear interpolation (default), the second uses discrete values, since it only knows 2 states (fill-Austria or fill-Switzerland). The first animation is broke up into 5 sections. First the path of Austria, changing to Switzerland, remaining at Switzerland, changing to Austria, remaining at Austria. The fill state has 7 parts because it changes at each half way of the five other sections. An other, probably easier way would be to use keyTime/keyValue pairs.

Following are some explanations on vector-based fills in SVG. In SVG you can use vector or raster based fill patterns, besides solid fill and gradients. Patterns can be tiled or not. In our case we don't tile the pattern, but scale it between 0 and 1 relative to the objects bounding box, using the attribute patternContentUnits="objectBoundingBox" (see below). For defining the fill attributes you can use any svg-code you want. Note that we also have an opacity animation included with seven states (corresponding with the 7 states of the discrete fill-animation). The fills are defined within the defs-section.

<pattern id="fillAustria" patternContentUnits="objectBoundingBox">
  <g opacity="1">
    <rect fill="red" stroke="none" x="0" y="0" width="1" height=".33"/>
    <rect fill="white" stroke="none" x="0" y=".33" width="1"
                                              height=".33"/>
    <rect fill="red" stroke="none" x="0" y=".66" width="1" height=".34"/>
  </g>
  <animate attributeType="CSS" attributeName="opacity"
                                            values="1;0;0;0;0;1;1"
   dur="&animDuration;" repeatCount="indefinite" />
</pattern>
<pattern id="fillSwitzerland" patternContentUnits="objectBoundingBox">
  <g opacity="1">
    <rect fill="red" stroke="none" x="0" y="0" width="1" height="1"/>
    <rect id="vertBar" fill="white" stroke="none" x=".47" y=".30"
                                              width=".06" height=".34"/>
    <rect id="horizBar" fill="white" stroke="none" x=".39" y=".42"
                                              width=".22" height=".1"/>
  </g>
  <animate attributeType="CSS" attributeName="opacity"
                                            values="0;0;1;1;0;0;0"
   dur="&animDuration;" repeatCount="indefinite" />
</pattern>

Further resources on SVG path morphing and fills:

• www.w3.org/TR/SVG/paths.html
• www.w3.org/TR/SVG/pservers.html#Patterns