<svg width="250" height="150" viewBox="0 0 250 150">
  <defs>
    <pattern id="tile" x="0" y="0" width="20%" height="20%"
      patternUnits="objectBoundingBox"
      patternTransform="
      rotate
      skewX
      skewY
      ()">
      <path d="M 0 0 Q 5 20 10 10 T 20 20"
        style="stroke: black; fill: none;"/>
      <path d="M 0 0 h 20 v 20 h -20 z"
        style="stroke: gray; fill: none;"/>
    </pattern>

    <linearGradient id="gradient"
      gradientTransform="
      rotate
      skewX
      skewY
      ()">
        <stop offset="0%" style="stop-color: #ffcc00;"/>
        <stop offset="33.3%" style="stop-color: #cc6699"/>
        <stop offset="100%" style="stop-color: #66cc99;"/>
    </linearGradient>
  </defs>
  
  <rect x="20" y="10" width="100" height="100"
    style="fill: url(#tile); stroke: black;"/>
  <rect x="135" y="10" width="100" height="100"
    style="fill: url(#gradient); stroke: black;"/>
</svg>