JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<script>
/**
 * @author mrdoob / http://mrdoob.com/
 */

THREE.SVGObject = function ( node ) {

	THREE.Object3D.call( this );

	this.node = node;

};

THREE.SVGObject.prototype = Object.create( THREE.Object3D.prototype );
THREE.SVGObject.prototype.constructor = THREE.SVGObject;

THREE.SVGRenderer = function () {

	console.log( 'THREE.SVGRenderer', THREE.REVISION );

	var _this = this,
		_renderData, _elements, _lights,
		_projector = new THREE.Projector(),
		_svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ),
		_svgWidth, _svgHeight, _svgWidthHalf, _svgHeightHalf,

		_v1, _v2, _v3,

		_clipBox = new THREE.Box2(),
		_elemBox = new THREE.Box2(),

		_color = new THREE.Color(),
		_diffuseColor = new THREE.Color(),
		_ambientLight = new THREE.Color(),
		_directionalLights = new THREE.Color(),
		_pointLights = new THREE.Color(),
		_clearColor = new THREE.Color(),
		_clearAlpha = 1,

		_vector3 = new THREE.Vector3(), // Needed for PointLight
		_centroid = new THREE.Vector3(),
		_normal = new THREE.Vector3(),
		_normalViewMatrix = new THREE.Matrix3(),

		_viewMatrix = new THREE.Matrix4(),
		_viewProjectionMatrix = new THREE.Matrix4(),

		_svgPathPool = [],
		_svgNode, _pathCount = 0,

		_currentPath, _currentStyle,

		_quality = 1, _precision = null;

	this.domElement = _svg;

	this.autoClear = true;
	this.sortObjects = true;
	this.sortElements = true;

	this.info = {

		render: {

			vertices: 0,
			faces: 0

		}

	};

	this.setQuality = function ( quality ) {

		switch ( quality ) {

			case "high": _quality = 1; break;
			case "low": _quality = 0; break;

		}

	};

	this.setClearColor = function ( color, alpha ) {

		_clearColor.set( color );
		_clearAlpha = alpha !== undefined ? alpha : 1;

	};

	this.setPixelRatio = function ()...

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;

init();
animate();

function init() {

	camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 0.1, 100 );
	camera.position.z = 10;
	
	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0x000000 );
	
	scene.add( new THREE.AxesHelper() );
	
	
	renderer = new THREE.SVGRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
	
	//
	var vertices = [];
	var divisions = 50;
	
	for ( var i = 0; i <= divisions; i ++ ) {
		var v = ( i / divisions ) * ( Math.PI * 2 );
		var x = Math.sin( v );
		var y = Math.cos( v );
		vertices.push( x, y, 0 );
		
	}
	
	var geometry = new THREE.BufferGeometry();
	geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );

	var material = new THREE.LineDashedMaterial( {
		color: 'blue',
		linewidth: 1,
		dashSize: 10,
		gapSize: 10
	} );
	
	var line = new THREE.Line( geometry, material );
	line.position.z = - 20;
	scene.add( line );
	
	// difference
  
	var node = document.createElementNS( 'http://www.w3.org/2000/svg', 'circle' );
	node.setAttribute( 'stroke', 'black' );
	node.setAttribute( 'fill', 'blue' );
	node.setAttribute( 'r', '10' );
	var object = new THREE.SVGObject( node.cloneNode() );
	object.position.x = 0;
	object.position.y = 0;
	object.position.z = -20;
	scene.add( object );

	window.addEventListener( 'resize', onWindowResize, false );
	
	var controls = new THREE.OrbitControls( camera, renderer.domElement );
	
}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	
	renderer.setSize( window.innerWidth, window.innerHeight );
	
}

function animate() {
	
	renderer.render( scene, camera );
	
	requestAnimationFrame( animate );
}