SVG Exercise

SVG Exercise

Trump 2020 election banner

I have created a Trump election banner with svg. The svg contains rectangles, stars and text.

Flag stripes

<g>
  <rect y="0" width="550" height="22" style="fill:#b41c31;" /> 
  <rect y="22" width="550" height="22" style="fill:white;" />
  <rect y="44" width="550" height="22" style="fill:#b41c31;" />
  <etc...>
</g>

Stars on blue field

<g>
  <rect y="0" width="230" height="154" style="fill:#3a386e" />

  <svg x="5" y="5">
    <polygon points="10,1 4,19 19,8 1,8 16,19"
    style="fill:white" />
  </svg>
  <svg x="45" y="5">
    <polygon points="10,1 4,19 19,8 1,8 16,19"
    style="fill:white" />
  </svg>
  <etc...>
</g>

Election message

<text x="290" y="360" class="title--trump" text-anchor="middle">Trump 2020</text>
<text x="290" y="400" class="title--campain-slogan" text-anchor="middle">Keep America Great</text>

Election message - Stars & Stripes

<line x1="0" y1="310" x2="165" y2="310" style="stroke:black;stroke-width:6" />

<svg x="195" y="300">
  <polygon points="10,1 4,19 19,8 1,8 16,19"
  style="fill:black" />
</svg>
<etc...>

<line x1="400" y1="310" x2="550" y2="310" style="stroke:black;stroke-width:6" />

Text can be styled with css