css-transforms-1/examples/origin1.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="735" height="250">
  <defs>
    <style type="text/css"><![CDATA[
      rect { fill: #00a6ff; }
      
      line, path {
        fill: none;
        stroke: black;
        stroke-width: 1px;
        stroke-dasharray: 6 4;
      }
      
      .arrow { marker-end: url(#marker-end); }
      
      circle { fill: black; }
      
      text {
        font-size: 11pt;
        font-family: sans-serif;
      }

      .canvas {
        stroke: black;
        fill: none;
      }
      ]]>
    </style>
    <marker id="marker-end" viewBox="0 0 10 10" refX="1" refY="5" 
      markerUnits="strokeWidth" orient="auto"
      markerWidth="10" markerHeight="15">
      <polyline points="0,0 10,5 0,10 1,5" fill="black" />
    </marker>
  </defs>
  
  <rect x="10" y="10" width="110" height="170" class="canvas" />
  <rect x="130" y="10" width="110" height="170" class="canvas" />
  <rect x="280" y="10" width="110" height="170" class="canvas" />
  <rect x="430" y="10" width="110" height="170" class="canvas" />
  <rect x="550" y="10" width="110" height="170" class="canvas" />
  
  <text x="40" y="210">Apply transform-origin</text>

  <rect x="30" y="60" width="70" height="70" />
  <circle cx="30" cy="60" r="4" />
  <line x1="30" y1="60" x2="65" y2="95" class="arrow" />
  
  <rect x="150" y="60" width="70" height="70" />
  <circle cx="185" cy="95" r="4" />
  

  <text x="280" y="210">Apply transform</text>
  <text x="305" y="235">functions</text>
    
  <rect x="300" y="60" width="70" height="70" transform="rotate(45, 335, 95)" />
  <circle cx="335" cy="95" r="4" />
  <path d="M 315 95 A 20 20, 0, 1, 1, 335 115" class="arrow" />
  

  <text x="475" y="210">Unapply transform-origin</text>

  <rect x="450" y="60" width="70" height="70" transform="rotate(-45, 485, 95)" />
  <circle cx="485" cy="95" r="4" />
  <line x2="450" y2="60" x1="485" y1="95" class="arrow" />
  
  <rect x="570" y="60" width="70" height="70" transform="rotate(-45, 605, 95)" />
  <circle cx="570" cy="60" r="4" />
</svg>