svgでsymmetricのカードを作る

svgで以下のようなsymmetric（対象群)のカードを作る

３の場合

[1,2,3].permutation(3).each{|i|

  File.open(i.join.to_s+".svg","w"){|f|
#puts i.join
    f.puts <<EOF
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="240" height="110">

<line x1="#{i[0]*100-80}" y1="10" x2="20" y2="100" stroke="blue" stroke-width="3" />
<line x1="#{i[1]*100-80}" y1="10" x2="120" y2="100" stroke="red" stroke-width="3" />
<line x1="#{i[2]*100-80}" y1="10" x2="220" y2="100" stroke="green" stroke-width="3" />

<circle cx="20" cy="10" r="8" fill="yellow" stroke="black" stroke-width="1" />
<circle cx="120" cy="10" r="8" fill="yellow" stroke="black" stroke-width="1" />
<circle cx="220" cy="10" r="8" fill="yellow" stroke="black" stroke-width="1" />
<circle cx="20" cy="100" r="8" fill="yellow" stroke="black" stroke-width="1" />
<circle cx="120" cy="100" r="8" fill="yellow" stroke="black" stroke-width="1" />
<circle cx="220" cy="100" r="8" fill="yellow" stroke="black" stroke-width="1" />

</svg>
EOF
  }
}

ｓ４を作る

[1,2,3,4].permutation(4).each{|i|

  File.open(i.join.to_s+".svg","w"){|f|
#puts i.join
    f.puts <<EOF
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="340" height="110">

<line x1="#{i[0]*100-80}" y1="10" x2="20" y2="100" stroke="blue" stroke-width="3" />
<line x1="#{i[1]*100-80}" y1="10" x2="120" y2="100" stroke="red" stroke-width="3" />
<line x1="#{i[2]*100-80}" y1="10" x2="220" y2="100" stroke="green" stroke-width="3" />
<line x1="#{i[3]*100-80}" y1="10" x2="320" y2="100" stroke="purple" stroke-width="3" />

<circle cx="20" cy="10" r="8" fill="yellow" stroke="black" stroke-width="1" />
<circle cx="120" cy="10" r="8" fill="yellow" stroke="black" stroke-width="1" />
<circle cx="220" cy="10" r="8" fill="yellow" stroke="black" stroke-width="1" />
<circle cx="20" cy="100" r="8" fill="yellow" stroke="black" stroke-width="1" />
<circle cx="120" cy="100" r="8" fill="yellow" stroke="black" stroke-width="1" />
<circle cx="220" cy="100" r="8" fill="yellow" stroke="black" stroke-width="1" />
<circle cx="320" cy="10" r="8" fill="yellow" stroke="black" stroke-width="1" />
<circle cx="320" cy="100" r="8" fill="yellow" stroke="black" stroke-width="1" />
</svg>
EOF
  }
}