d3.js geoGraticule doesn't follow the sphere shape - d3.js

Question

I am trying to add standard geoGraticule lines to my globe, which spins and has ripple effects. I've gone wrong somewhere but can't get to the bottom of it: live demo
The meridian lines seem to create a sort of diamond shape, rather than curving around the whole sphere.
How can I change my code so the graticule is spherical?
// margin calculations
const margin = {top: 50, right: 0, bottom: 50, left: 0};
const width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const config = {
speed: 0.005,
verticalTilt: -30,
horizontalTilt: 0
}
// add an SVG to the body and a g group
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var g = svg.append("g");
// draw a globe I guess
d3.json("https://unpkg.com/world-atlas#1.1.4/world/110m.json", (error, world) => {
// draw the land using TOPOJSON package
var land = topojson.feature(world, world.objects.land);
// d3 3d globe projection
var projection = d3.geoOrthographic()
.fitSize([width, height], land)
.clipAngle(90)
.precision(0)
.scale(200);
// create projection of earth sphere
var path = d3.geoPath()
.projection(projection);
// load the ripple circle
var geoCircle = d3.geoCircle();
// load the meridian lines
var graticule = d3.geoGraticule();
// draw a grey circle to look like water
var ocean = g.append("circle")
.attr("class", "ocean")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", height / 2);
// draw countries
var earth = g.append("path")
.datum(land)
.attr("d", path);
// draw graticules
var lines = g.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path)
.style("fill-opacity", 0)
.style("stroke", "#ccc")
.style("stroke-opacity", 0.7);
// list of locations - reverse the lat / long numbers!
var locale = [
[37.5999, 14.0153],
[10.1278, 50.5074],
[0.1278, 51.5074],
[25.653906, 4.453784],
[0, -10],
[151.2012775, -33.8844644]
];
// draw the circles
function drawMarkers() {
for (var i = 0; i < locale.length; i++) {
// console.log("location " + (i+1) + ": " + locale[i]);
center = locale[i];
var circ = g.append("path")
.datum({endAngle: 0})
.attr("class", "geoCircle")
.attr("fill", "#000")
.attr("fill-opacity", 1)
.attr("d", d => path(geoCircle.center(center).radius(1)()));
}
}
// draw the ripples
setInterval(() => {
for (var i = 0; i < locale.length; i++) {
center = locale[i];
var circ = g.append("path")
.datum({endAngle: 0})
.attr("class", "ripple ripple" + i)
.attr("fill", "#000")
.attr("fill-opacity", 0.2)
.attr("opacity", 1)
.attr("d", d => path(geoCircle.center(center).radius(2)()))
.transition()
.delay(0)
.duration(2800)
.ease(d3.easeLinear)
.attr("opacity", 0)
.attrTween("d", geoCircleTween(12, center))
.remove();
function geoCircleTween(newAngle, loca) {
return function(d) {
var interpolate = d3.interpolate(d.endAngle, newAngle);
return function(t) {
d.endAngle = interpolate(t);
return path(geoCircle.center(loca).radius(d.endAngle)());
};
};
}
}
}, 500)
function enableRotation() {
d3.timer(function (elapsed) {
projection.rotate([config.speed * elapsed - 120, config.verticalTilt, config.horizontalTilt]);
svg.selectAll("path").attr("d", path);
drawMarkers();
});
}
enableRotation();
});