Skip to content

Instantly share code, notes, and snippets.

@Malleys
Last active May 3, 2020 19:21
Show Gist options
  • Save Malleys/3b053cd4f7efff8539ab1e30bc25b3fe to your computer and use it in GitHub Desktop.
Save Malleys/3b053cd4f7efff8539ab1e30bc25b3fe to your computer and use it in GitHub Desktop.
Rects
<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>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment