JSFiddle - React, Tailwind, and code Playground
HTML
<div style="border:1px solid black; display: inline-block; padding:0">
<svg width="350" height="350"
viewBox="0 0 1200 1200"
xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip">
<rect x="0" y="800"
width="370" height="200"
fill="#FF00FF"/>
<rect x="410" y="800"
width="230" height="200"
fill="#FF00FF"/>
<rect x="680" y="745"
width="250" height="200"
fill="#FF00FF"/>
<rect x="850" y="480"
width="200" height="230"
fill="#FF00FF"/>
<rect x="910" y="00"
width="200" height="440"
fill="#FF00FF"/>
</clipPath>
</defs>
<!-- underscore -->
<line x1="100" y1="1000"
x2="1100" y2="1000"
stroke-width="10"
stroke="#FFFFFF"
stroke-linecap="round"/>
<line x1="100" y1="200"
x2="100" y2="1000"
stroke-width="10"
stroke="#FFFFFF"
stroke-linecap="round"/>
<!-- bezier curve -->
<path d="M130,900 C900,900 900,900 1050,200"
stroke-width="10"
stroke="#FFFFFF"
stroke-linecap="round"
fill="none"
clip-path="url(#myClip)"/>
<!-- arrow tip -->
<line x1="1050" y1="200"
x2="1000" y2="230"
stroke-width="10"
stroke="#FFFFFF"
stroke-linecap="round"/>
<line x1="1050" y1="200"
x2="1080" y2="250"
stroke-width="10"
stroke="#FFFFFF"
stroke-linecap="round"/>
<circle cx="390" cy="900"
r="20"
fill="none"
stroke-width="10"
stroke="#FFFFFF"
stroke-linecap="round"/>
<circle cx="660" cy="880"
r="20"
fill="none"
stroke-width="10"
stroke="#FFFFFF"
stroke-linecap="round"/>
<circle cx="895" cy="730"
r="20"
fill="none"
stroke-width="10"
...
CSS
body {
background-color: #555c65;
}
/*
blue color: #20b2ff
*/