var svg = document.getElementById('curve-text');
var NS = "http://www.w3.org/2000/svg";
var points = [
[0, 0],
[0.1, 0],
[0.2, 0],
[0.2, -0.1],
[0.2, -0.2],
[0.2, -0.3],
[0.2, -0.4],
[0.2, -0.5],
[0.2, -0.6],
[0.3, 0],
[0.4, 0]
];
var cx = 2;
var cy = 2;
var r = 2;
var size = 0.1;
drawCircle(cx, cy , r - 0.7);
var circumference = Math.PI * 2 * r;
var angle = 360 / circumference;
var radians = 1 / r;
// Add 12 copies of the letter T around the circle
for (var j = 0; j < 12; j++) {
for (var i = 0; i < points.length; i++) {
addDots(points[i][0] + j, points[i][1], size, cx, cy, r)
}
}
function drawCircle(cx, cy , r) {
var circle = document.createElementNS(NS, 'circle');
circle.setAttributeNS(null, 'cx', cx);
circle.setAttributeNS(null, 'cy', cy);
circle.setAttributeNS(null, 'r', r);
circle.setAttributeNS(null, 'fill', 'none');
circle.setAttributeNS(null, 'stroke', 'black');
circle.setAttributeNS(null, 'stroke-width', '0.02');
svg.appendChild(circle);
}
function addDots(x, y, size, cx, cy, r) {
var dotR = size / 2;
var d = r + (y - dotR);
var theta = (x + dotR) / r;
var x = cx + d * Math.cos(theta);
var y = cy - d * Math.sin(theta);
var dot = document.createElementNS(NS, 'circle');
dot.setAttributeNS(null, 'cx', x);
dot.setAttributeNS(null, 'cy', y);
dot.setAttributeNS(null, 'r', dotR);
svg.appendChild(dot);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4" id="curve-text" width="200" height="200">
</svg>