Hourglasses with the SVG scale and skew Functions

---

Key Constructs

An SVG translate function can be defined with the following SVG snippet:

<g transform="translate(50,50)">    <!-- other SVG elements here --> </g>

An SVG rotate function can be defined with the following SVG snippet:

<g transform="translate(300,50)">   <g transform="rotate(30)">    <!-- other SVG elements here -->   </g> </g>

An SVG scale function applied to a rectangle can be defined with the following SVG snippet:

<g transform="scale(0.5) translate(50,50)">   <rect      fill="red"      style="stroke:white"      x="0" y="0" width="400" height="400">   </rect> </g>

A horizontal skew function can be defined with the following SVG snippet:

<g transform="translate(300,100)">    <g transform="skewX(30)">    <!-- other SVG elements here -->    </g> </g>

A vertical skew function can be defined with the following SVG snippet:

<g transform="translate(300,100)">    <g transform="skewY(30)">    <!-- other SVG elements here -->    </g> </g>

An SVG matrix function can be specified on a rectangle with the following SVG snippet:

<rect transform="matrix(.866 .5 -.5 .866 0 0)"       fill="none" stroke="blue" stroke-width="4"       width="200" height="100"/>

---