JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<svg width="400" height="400">
  <!-- <line x1="0" y1="0" x2="400" y2="400" stroke="#E1C408" /> -->
  <g transform="translate(50, 50)">
  <path d="M0 300 C 120 80, 180 0, 300 0" fill="none"/>
  <path d="M0 300 L120 80" class="light" />
  <path d="M300 0 L180 0" class="light" />
  <circle cx="120" cy="80" r="5" fill="white" class="light"/>
  <circle cx="180" cy="0" r="5" fill="white" class="light"/>
  </g>
</svg>

CSS

html, body {
  height: 100%;
}
body {
  background: #27272E;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

path {
  stroke: #e1c408;
  stroke-width: 3px;
}

path.light {
  stroke: #ddd;
  stroke-width: 2px;
}

svg .light {
  opacity: 0;
  transition: all .1s;
}

svg:hover .light {
  opacity: 1;
}