JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='canvas'></canvas>

JavaScript

const canvas = document.getElementById('canvas') 
    const c = canvas.getContext('2d')
		canvas.width = 240
		canvas.height = 340
    const gradient = c.createLinearGradient(0, 0, 150, 300);
		gradient.addColorStop(0, '#444')
		gradient.addColorStop(1,'#000')
		c.fillStyle = gradient
    c.fillRect(0, 0, canvas.width, canvas.height)

    const drawC = function (radius, maxWidth, minWidth) {
      const inc = (maxWidth - minWidth) / 5
      for (let width = maxWidth; width >= minWidth; width -= inc) {
        c.lineWidth = width
        if (width > 10) { 
          c.strokeStyle = 'rgba(50, 50, 255, 0.2)'
        } else {
          c.strokeStyle = 'white' 
        }
        c.lineCap = 'square'
        c.beginPath()
        c.arc(0, 0, radius, 2 * Math.PI * 0.04, 2 * Math.PI * 0.96)
        c.stroke()
      }
    }

    c.translate(120, 170)
    drawC(70, 30, 10)
    c.rotate(2 * Math.PI * 0.75)
    drawC(100, 20, 4)