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';
context.arc(x,y,radius,0,2*Math.PI,false);
context.arc(x+radius*Math.cos(1/3*Math.PI), y+radius*Math.sin(1/3*Math.PI),radius,0,2*Math.PI,false);
context.arc(x+radius*Math.cos(1/3*Math.PI), y-radius*Math.sin(1/3*Math.PI),radius,0,2*Math.PI,false);
context.arc(x-radius*Math.cos(1/3*Math.PI), y+radius*Math.sin(1/3*Math.PI),radius,0,2*Math.PI,false);
context.arc(x-radius*Math.cos(1/3*Math.PI), y-radius*Math.sin(1/3*Math.PI),radius,0,2*Math.PI,false);
context.arc(x+radius,y,radius,0,2*Math.PI,false);
context.arc(x-radius,y,radius,0,2*Math.PI,false);
context.arc(x,y,radius*2,0,2*Math.PI,false)
context.stroke();