JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="logo" width="300" height="300"></canvas>

CSS

#logo {border: 2px dashed #e74c3c;}

JavaScript

var canvas = document.getElementById('logo');
var context = canvas.getContext('2d');

var x = canvas.width/2;
var y = canvas.width/2;
var radius = 50;

context.lineWidth = 1;
context.lineStyle = '#000';

var data = [
            [x+radius*Math.cos(1/3*Math.PI),y+radius*Math.sin(1/3*Math.PI),radius],
            [x+radius*Math.cos(1/3*Math.PI),y-radius*Math.sin(1/3*Math.PI),radius],
            [x-radius*Math.cos(1/3*Math.PI),y+radius*Math.sin(1/3*Math.PI),radius],
            [x-radius*Math.cos(1/3*Math.PI),y-radius*Math.sin(1/3*Math.PI),radius],
            [x+radius,y,radius],
            [x-radius,y,radius],
            [x,y,radius*2]
          ];

for(var i = 0; i < data.length; i++){
  context.beginPath();
  context.arc(data[i][0],data[i][1],data[i][2],0,2*Math.PI,false);
  context.stroke();
}