JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<svg viewBox="0 0 200 200" width="200" height="200">
  <rect x="0" y="0" width="200" height="200" fill="#4B4E6D" />
  <polygon points="10,180 90,70 110,90 190,10" fill="#8BC6EC" />
  <polygon points="20,190 90,85 100,95 180,25" fill="#B2DBD5" />
  <path d="M95,65 Q115,75 135,65 Q145,75 155,65 L155,80 Q145,90 135,80 Q115,90 95,80 L95,65" fill="#F5A962" />
  <path d="M105,60 L130,60 L130,50 L105,50 Z" fill="#FEFEFE" />
  <path d="M70,170 L90,150 L110,170 L130,150 L150,170" stroke="#FEFEFE" stroke-width="8" fill="none" />
</svg>

<br>

<svg viewBox="0 0 400 400" width="400" height="400">
  <rect x="0" y="0" width="400" height="400" fill="#4B4E6D" />
  <polygon points="10,380 150,150 200,220 350,50 390,90 400,80 400,400" fill="#8BC6EC" />
  <polygon points="20,390 150,160 200,230 340,70 380,110 390,100 390,390" fill="#B2DBD5" />
  <path d="M195,135 Q215,145 235,135 Q245,145 255,135 L255,150 Q245,160 235,150 Q215,160 195,150 L195,135" fill="#F5A962" />
  <path d="M160,375 L190,345 L220,375 L250,345 L280,375" stroke="#FEFEFE" stroke-width="8" fill="none" />
</svg>