assets/banner.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 400" role="img" aria-label="Build Small — a two-week hackathon by Gradio and Hugging Face">
  <defs>
    <pattern id="paper" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
      <rect width="200" height="200" fill="#f4ead5"/>
      <circle cx="20" cy="40" r="0.6" fill="#c9b88a" opacity="0.5"/>
      <circle cx="160" cy="20" r="0.5" fill="#c9b88a" opacity="0.4"/>
      <circle cx="80" cy="120" r="0.7" fill="#b8a574" opacity="0.4"/>
      <circle cx="180" cy="170" r="0.5" fill="#c9b88a" opacity="0.5"/>
      <circle cx="50" cy="180" r="0.4" fill="#b8a574" opacity="0.4"/>
      <circle cx="120" cy="80" r="0.5" fill="#c9b88a" opacity="0.3"/>
      <circle cx="30" cy="100" r="0.4" fill="#b8a574" opacity="0.3"/>
      <circle cx="140" cy="140" r="0.6" fill="#c9b88a" opacity="0.4"/>
    </pattern>
    <pattern id="hatch" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
      <line x1="0" y1="0" x2="0" y2="6" stroke="#2c4a2e" stroke-width="0.8" opacity="0.45"/>
    </pattern>
    <filter id="rough">
      <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="3"/>
      <feDisplacementMap in="SourceGraphic" scale="0.6"/>
    </filter>
  </defs>

  <!-- paper background -->
  <rect width="1600" height="400" fill="url(#paper)"/>

  <!-- outer woodcut frame -->
  <g stroke="#2c4a2e" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#rough)">
    <rect x="28" y="28" width="1544" height="344" stroke-width="3"/>
    <rect x="40" y="40" width="1520" height="320" stroke-width="1"/>
  </g>

  <!-- frame corner ornaments -->
  <g fill="#2c4a2e" filter="url(#rough)">
    <g transform="translate(28,28)">
      <path d="M0,18 L18,0 M0,30 L30,0 M6,30 L30,6" stroke="#2c4a2e" stroke-width="1.2" fill="none"/>
      <circle cx="6" cy="6" r="2"/>
    </g>
    <g transform="translate(1572,28) scale(-1,1)">
      <path d="M0,18 L18,0 M0,30 L30,0 M6,30 L30,6" stroke="#2c4a2e" stroke-width="1.2" fill="none"/>
      <circle cx="6" cy="6" r="2"/>
    </g>
    <g transform="translate(28,572) scale(1,-1)">
      <path d="M0,18 L18,0 M0,30 L30,0 M6,30 L30,6" stroke="#2c4a2e" stroke-width="1.2" fill="none"/>
      <circle cx="6" cy="6" r="2"/>
    </g>
    <g transform="translate(1572,572) scale(-1,-1)">
      <path d="M0,18 L18,0 M0,30 L30,0 M6,30 L30,6" stroke="#2c4a2e" stroke-width="1.2" fill="none"/>
      <circle cx="6" cy="6" r="2"/>
    </g>
  </g>

  <!-- top ribbon: presented by -->
  <g transform="translate(800,75)" text-anchor="middle">
    <line x1="-340" y1="-4" x2="-200" y2="-4" stroke="#2c4a2e" stroke-width="1"/>
    <line x1="340" y1="-4" x2="200" y2="-4" stroke="#2c4a2e" stroke-width="1"/>
    <circle cx="-200" cy="-4" r="2.5" fill="#2c4a2e"/>
    <circle cx="200" cy="-4" r="2.5" fill="#2c4a2e"/>
    <text y="2" font-family="Georgia, 'Times New Roman', serif" font-size="16" letter-spacing="8" fill="#2c4a2e" font-weight="400">A SMALL HACKATHON BY</text>
    <text y="30" font-family="Georgia, 'Times New Roman', serif" font-size="20" letter-spacing="3" fill="#2c4a2e" font-style="italic">Gradio &amp; Hugging Face</text>
  </g>

  <!-- main title -->
  <g transform="translate(800,260)">
    <text x="0" y="0" text-anchor="middle" font-family="Georgia, 'Times New Roman', serif" font-size="138" font-weight="700" fill="#2c4a2e" letter-spacing="-2"><tspan>Build </tspan><tspan fill="#b84a3e" font-style="italic">Small.</tspan></text>
  </g>

  <!-- decorative rule under title -->
  <g transform="translate(800,300)">
    <line x1="-340" y1="0" x2="-30" y2="0" stroke="#2c4a2e" stroke-width="1"/>
    <line x1="340" y1="0" x2="30" y2="0" stroke="#2c4a2e" stroke-width="1"/>
    <g fill="#b84a3e">
      <circle cx="-22" cy="0" r="3"/>
      <circle cx="22" cy="0" r="3"/>
      <circle cx="0" cy="0" r="4.5" fill="#2c4a2e"/>
    </g>
  </g>

  <!-- subtitle -->
  <g transform="translate(800,335)" text-anchor="middle">
    <text font-family="Georgia, 'Times New Roman', serif" font-size="18" fill="#4a5d3f" font-style="italic">two weeks &#183; tiny weights &#183; big ideas &#183; the people right around you</text>
  </g>
    <!-- bottom rule -->
  <g transform="translate(800,365)" text-anchor="middle">
    <line x1="-130" y1="0" x2="-22" y2="0" stroke="#2c4a2e" stroke-width="0.8"/>
    <line x1="130" y1="0" x2="22" y2="0" stroke="#2c4a2e" stroke-width="0.8"/>
    <text y="4" font-family="Georgia, serif" font-size="11" letter-spacing="4" fill="#2c4a2e">VOL. III &#183; MMXXVI</text>
  </g>
</svg>