The JavaScript code below shows how you can draw circular text as seen in the Ramones logo with SVG paths and SVG text and textPath elements using the D3.js API.

After setting the dimensions of the elements to be displayed, two arcs are defined for drawing two SVG paths. The inner_arc is not visible but serves as an anchor for the circular texts, that will be attached to this arc's path element. The outer_arc displays the white circle enclosing the texts.

The remaining code creates two text elements, one for the names and one for the stars. The names will be positioned right on the path and the stars will be shifted on the y-axis, so they are rendered inside the invisible inner circle. Finally, the texts are attached/linked to the path using textPath elements.

Note that the resulting image displays differently in Firefox and Chrome, due to the way they render type. I've set the variables so the image works best in Chrome. In Firefox the circular star text, doesn't quite fit. A possible fix would be to set font sizes based on which browser is being used.

You may have noticed that the names are not the first names of the four Ramones, but those of the Authors of the software engineering classic Design Patterns. This is because the above drawing is the basis for a parody shirt design dedicated to the so called Gang of Four, which is available from Redbubble and Zazzle.

JavaScript Code