JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">
  <!-- Background -->
  <rect width="100%" height="100%" fill="#00000000"/>

  <!-- Circle with Crosshairs -->
  <circle cx="250" cy="200" r="150" fill="none" stroke="#000" stroke-width="5"/>
  <circle cx="250" cy="200" r="75" fill="none" stroke="#000" stroke-width="2"/>
  <line x1="250" y1="30" x2="250" y2="370" stroke="#000" stroke-width="2"/>
  <line x1="80" y1="200" x2="420" y2="200" stroke="#000" stroke-width="2"/>

  <!-- Headline inside the Circle with Crosshairs -->
  <text x="230" y="190" font-family="Brush Script MT" font-size="70" fill="#0000ff" text-anchor="middle" transform="rotate(-10 250,160)" font-weight="bold">
    Okay,
  </text>
  <text x="270" y="230" font-family="SWR Sans" font-size="50" fill="red" text-anchor="middle" transform="rotate(-10 300,200)" font-weight="bold" font-style="italic">
    aaaah!
  </text> 
    aaaah!
  </text>
</svg>