JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg">


  <!-- Gradient Definition -->
  <defs>
    <linearGradient id="duskGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:purple; stop-opacity:1"/> <!-- Deep blue/indigo -->
      <stop offset="75%" style="stop-color:orange; stop-opacity:1"/> <!-- Darker blue -->
      <stop offset="100%" style="stop-color:cyan; stop-opacity:1"/> <!-- Soft light gray -->
    </linearGradient>
  </defs>
  
  
  <!-- Background with Gradient -->
  <rect width="100%" height="100%" fill="url(#duskGradient)"/> 
  
  <!-- Clouds -->
  <ellipse cx="100" cy="50" rx="40" ry="25" fill="#ffffff"/>
  <ellipse cx="140" cy="80" rx="45" ry="40" fill="#ffffff"/>
  <ellipse cx="90" cy="80" rx="50" ry="18" fill="#ffffff"/>
  <ellipse cx="350" cy="50" rx="50" ry="30" fill="#ffffff"/>
  <ellipse cx="400" cy="70" rx="45" ry="25" fill="#ffffff"/>
  <ellipse cx="320" cy="80" rx="40" ry="22" fill="#ffffff"/>
  
  <!-- Circle with Crosshairs -->
  <circle cx="250" cy="200" r="150" fill="none" stroke="yellow" stroke-width="8"/>
  <circle cx="250" cy="200" r="75" fill="none" stroke="yellow" stroke-width="3"/>
  
  <line x1="80" y1="200" x2="420" y2="200" stroke="yellow" stroke-width="2"/>
  
  <!-- Headline inside the Circle with Crosshairs -->
  <text x="218" y="190"  font-family="Brush Script MT" font-size="90" fill="#ffffff" text-anchor="middle" transform="rotate(-10 250,160)" font-weight="bold">Okay,</text>
    <text x="220" y="191"  font-family="Brush Script MT" font-size="90" fill="#0000ff" text-anchor="middle" transform="rotate(-10.5 250,160)" font-weight="bold">Okay,</text>
 <line x1="250" y1="30" x2="250" y2="370" stroke="yellow" stroke-width="2"/> <text x="270" y="240" font-family="SWR Sans" font-size="70" fill="red" stroke="#ffffff" text-anchor="middle" transform="rotate(-9 300,200)" font-weight="bold" font-style="italic">aaaah!</text>
</svg>