Rects

dabblet.css

/* Rects */

dabblet.html

<svg width="520" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="gray" stroke-width="1" />
    </pattern>
  </defs>
	
	<g transform="scale(40)">
		<path d="M 0 2 L 5 0 5 2" transform="translate(8,0)" fill="deepskyblue">
			<animateTransform
				attributeName="transform"
				type="translate"
				additive="replace"
				dur="2.2s"
				id="blueTriangle"
				begin="0s"
				fill="freeze"
                values="8,0;0,0;0,3"
                keyTimes="0;0.73;1"
             />
        </path>
        <path d="M 0 3 L 8 0 8 3" transform="translate(0,2)" fill="deeppink">
        	<animateTransform
				attributeName="transform"
				type="translate"
				additive="replace"
				dur="2.2s"
				id="redTriangle"
				begin="2s"
				fill="freeze"
                values="0,2;0,0;5,0"
                keyTimes="0;0.27;1"
             />
        </path>
		<path d="M 0 0 L 5 0 5 1 2 1 2 2 0 2" transform="translate(8, 2)" fill="gold">
			<animateTransform
				attributeName="transform"
				type="translate"
				additive="replace"
				dur="0.8s"
				id="yellowTriangle"
				begin="4s"
				fill="freeze"
                values="8,2;5,2;5,3"
                keyTimes="0;0.75;1"
             />		</path>
		<path d="M 0 1 L 2 1 2 0 5 0 5 2 0 2" transform="translate(8, 3)" fill="yellowgreen" />
	</g>
	

  <rect width="100%" height="100%" fill="url(#grid)" stroke="gray" stroke-width="2" />
</svg>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}