{%- macro fill(symbol) -%}
  {%- if symbol.infill == Infill.NONE -%}
    none
  {%- elif symbol.infill == Infill.SEMI -%}
    url(#semifill-{{ symbol.color.value.name }})
  {%- elif symbol.infill == Infill.FULL -%}
    {{- symbol.color.value.html -}}
  {%- endif -%}
{%- endmacro -%}


<svg xmlns="http://www.w3.org/2000/svg" width="145" height="220" version="2.0">
  <title>{{ symbol.count }} {{ symbol.shape }} {{ symbol.color }} {{ symbol.infill }}</title>
  <defs>
    {%- for color in Color %}
    <pattern id="semifill-{{ color.value.name }}" width="20" height="9" fill="none" patternUnits="userSpaceOnUse">
      <path stroke="{{ color.value.html }}" d="M 0 2 C 5 2, 5 -3, 10 -3 C 15 -3, 15 2, 20 2  M 0 5 C 5 5, 5 0, 10 0 C 15 0, 15 5, 20 5  M 0 8 C 5 8, 5 3, 10 3 C 15 3, 15 8, 20 8  M 0 11 C 5 11, 5 6, 10 6 C 15 6, 15 11, 20 11  M 0 14 C 5 14, 5 9, 10 9 C 15 9, 15 14, 20 14" />
    </pattern>
    {%- endfor %}
    <filter id="drop" x="0" y="0">
      <feDropShadow dx="10" dy="10" stdDeviation="5" />
    </filter>
    <filter id="new" x="0" y="0">
      <feDropShadow dx="10" dy="10" stdDeviation="5" flood-color="gold" />
    </filter>

  </defs>
  <g id="card" stroke-width="2" transform="translate(20, 20)">
    
    <rect class="svgcard" width="100" height="180" rx="10" stroke="#000000" fill="#ffffff" />
    <g class="svgcard" id="symbols">
      {%- for i in range(symbol.count.value) %}
        {%- set ybase = 80 - 25*(symbol.count.value - 1) + 50*i %}
        {%- if symbol.shape == Shape.RECTANGLE %}
          {#- rect #}
          <rect x="20" width="60" height="20" y="{{ ybase }}" stroke="{{ symbol.color.value.html }}" fill="{{ fill(symbol) }}" />
        {%- elif symbol.shape == Shape.TILDE %}
          {#- tilde #}
          <path width="60" height="20" transform="translate(20, {{ ybase }})" stroke="{{ symbol.color.value.html }}" fill="{{ fill(symbol) }}"
                d="M 0 15 C 0 5, 5 0, 15 0 C 25 0, 35 5, 45 5 C 50 5, 53 0, 55 0 C 57 0, 60 0, 60 5 C 60 15, 55 20, 45 20 C 35 20, 25 15, 15 15 C 10 15, 7 20, 5 20 C 3 20, 0 20,0 15 Z"/>
        {%- elif symbol.shape == Shape.ELLIPSE %}
          {#- ellipse #}
          <ellipse cx="50" cy="{{ ybase + 10 }}" rx="30" ry="10" stroke="{{ symbol.color.value.html }}" fill="{{ fill(symbol) }}" />
        {%- endif %}
      {%- endfor %}
      </g>
    </g>
  </g>
</svg>