<!DOCTYPE html>
<script src="../../resources/ahem.js"></script>
<svg width="200" height="400">
  <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
    <stop offset="0" stop-color="green"/>
    <stop offset="0.99" stop-color="green"/>
    <stop offset="1" stop-color="red"/>
  </linearGradient>
  <pattern id="pattern" x="0" y="0" width="1" height="1" viewBox="0 0 10 10">
    <rect width="10" height="10" fill="lime"/>
    <rect width="5" height="5" fill="green"/>
    <rect x="5" y="5" width="5" height="5" fill="green"/>
  </pattern>
  <rect width="100%" height="100%" fill="gray"/>
  <g font-size="100px" font-family="Ahem">
    <g fill="url(#pattern)">
      <text y="280">P</text>
      <text y="380" text-decoration="underline">P</text>
    </g>
    <g fill="url(#gradient)">
      <text x="100" y="280">G</text>
      <text x="100" y="380" text-decoration="underline">G</text>
  </g>
</svg>