Success Powered By Partnerships

.pie360 { width: 100%; } .pie360__holder { width: 100%; aspect-ratio: 1 / 1; } .pie360__holder svg { width: 120%; height: 120%; display: block; } .slice { cursor: pointer; } .slice:hover { filter: brightness(1.05); } .label { font-family: "Museo Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-size: 30px; fill: #ffffff; text-anchor: middle; pointer-events: none; letter-spacing: 0.4px; } (function () { const items = [ { label: ["INSURANCE", "SUBROGATION"], color: "#4DB6DF", href: "/insurance-subrogation/" }, { label: ["BANKING AND", "FIN TECH"], color: "#B9DDBB", href: "/banking-and-fin-tech/" }, { label: ["COMMERCIAL", "FINANCE"], color: "#1E8796", href: "/commercial-finance/" }, { label: ["HEALTHCARE"], color: "#1F5E7A", href: "/healthcare" }, { label: ["AUTO", "FINANCE"], color: "#0B7FBD", href: "/auto-finance/" } ]; /* --- Geometry tuned to match screenshot exactly --- */ const box = 1000; const pad = 55; const strokeW = 26; const r = 460 - pad; const labelR = 0.62; const fontSize = 30; const lineH = fontSize * 1.2; // 36px true 1.2em const cx = box / 2; const cy = box / 2; const startDeg = -126; // aligns top slice perfectly const sliceDeg = 360 / items.length; const toRad = d => d * Math.PI / 180; const polar = (deg, rad) => ({ x: cx + rad * Math.cos(toRad(deg)), y: cy + rad * Math.sin(toRad(deg)) }); const arcPath = (a0, a1) => { const p0 = polar(a0, r); const p1 = polar(a1, r); const large = (a1 - a0) > 180 ? 1 : 0; return ` M ${cx} ${cy} L ${p0.x} ${p0.y} A ${r} ${r} 0 ${large} 1 ${p1.x} ${p1.y} Z`; }; const wrap = document.getElementById("pie360"); let svg = ` `; items.forEach((item, i) => { const a0 = startDeg + i * sliceDeg; const a1 = startDeg + (i + 1) * sliceDeg; const mid = (a0 + a1) / 2; const lp = polar(mid, r * labelR); svg += ` `; const lines = item.label; const startY = lp.y - ((lines.length - 1) * lineH) / 2; svg += ``; lines.forEach((t, idx) => { svg += ` ${t} `; }); svg += ``; }); svg += ``; wrap.innerHTML = svg; })();