JSFiddle - React, Tailwind, and code Playground

by Pablo Navarro

JavaScript

var width = 200,
    height = 200,
    radius = 100,
    side = 2 * radius * Math.cos(Math.PI / 4),
    dx = radius - side / 2;

var svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

svg.append('circle')
   .attr('cx', width / 2)
   .attr('cy', height / 2)
   .attr('r', radius)
   .attr('fill', 'steelblue');

var g = svg.append('g')
   .attr('transform', 'translate(' + [dx, dx] + ')');

g.append("foreignObject")
    .attr("width", side)
    .attr("height", side)
    .append("xhtml:body")
    .style("font", "14px 'Helvetica Neue'")
    .html("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, excepturi veniam veritatis quaerat itaque eius voluptate! Fugit, est dolorum tenetur!");