<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>India’s National Credit Framework (NCrF)</title>
<style>
:root{--bg:#fbfaf7;--ink:#1c2430;--mute:#5d6673;--s:#e4eef7;--h:#ece6f5;--v:#f8e6c0;--n:#d2eee6;--fs:#2f6690;--fh:#6a4c93;--fv:#b45309;--s2:#c3d9ec;--h2:#d5c8e9;--ft:#fff;--ln:#fbfaf7;box-sizing:border-box;padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px));padding-top:calc(16px + env(safe-area-inset-top,0px))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14181f;--ink:#e8ebf0;--mute:#9aa3af;--s:#1f3a52;--h:#3a2c55;--v:#51401a;--n:#1d4128;--fs:#4a86b5;--fh:#8e72b8;--fv:#d19a3a;--ft:#10141a;--ln:#14181f}}
:root[data-theme="dark"]{--bg:#14181f;--ink:#e8ebf0;--mute:#9aa3af;--s:#1f3a52;--h:#3a2c55;--v:#51401a;--n:#1d4128;--fs:#4a86b5;--fh:#8e72b8;--fv:#d19a3a;--ft:#10141a;--ln:#14181f}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif}
h1{font-size:2rem;margin:0 0 4px;font-weight:650}
p{margin:0 0 12px;color:var(--mute);font-size:.92rem;max-width:70ch;line-height:1.45}
.w{overflow-x:auto}
svg{display:block;width:100%;min-width:1100px;height:auto}
svg text{fill:var(--ink);font-size:12.5px}
.s{fill:var(--s)}.h{fill:var(--h)}.v{fill:var(--v)}.n{fill:var(--n)}.s2{fill:var(--s2,var(--s))}.h2{fill:var(--h2,var(--h))}
.fs{fill:var(--fs)}.fh{fill:var(--fh)}.fv{fill:var(--fv)}
.f text{fill:var(--ft);font-weight:650;font-size:12px}
path{stroke:var(--ln);stroke-width:1.2}
.t{font-size:12px;font-weight:500}
</style>
</head>
<body>
<h1>India’s National Credit Framework (NCrF)</h1>
<div class="w"><svg id="d" viewBox="0 0 1600 1135" role="img" aria-label="Semicircular chart of the National Credit Framework"></svg></div>
<script>
const cx=800,cy=800,N=22,st=180/N,NS="http://www.w3.org/2000/svg";
const A=i=>180-i*st,P=(r,a)=>[cx+r*Math.cos(a*Math.PI/180),cy-r*Math.sin(a*Math.PI/180)];
const J=p=>p[0].toFixed(1)+" "+p[1].toFixed(1);
const svg=document.getElementById("d");
function el(t,a,txt,par){const e=document.createElementNS(NS,t);for(const k in a)e.setAttribute(k,a[k]);if(txt!=null)e.textContent=txt;(par||svg).appendChild(e);return e}
function wedge(r1,r2,i,j,c,g){const a=A(i),b=A(j);el("path",{d:`M${J(P(r2,a))}A${r2} ${r2} 0 0 1 ${J(P(r2,b))}L${J(P(r1,b))}A${r1} ${r1} 0 0 0 ${J(P(r1,a))}Z`,class:c},null,g)}
function radial(r,i,txt){const a=A(i+.5),p=P(r,a),rot=a>90?180-a:-a;const t=el("text",{transform:`translate(${J(p)}) rotate(${rot})`,"text-anchor":"middle","dominant-baseline":"central"},null);if(/^Pre-school/.test(txt)){el("tspan",{x:0,y:-6,style:"font-size:11px"},"Pre-school",t);el("tspan",{x:0,y:8,style:"font-size:12px;font-weight:700"},txt.slice(11),t)}else t.textContent=txt}
let uid=0;
function arcText(r1,r2,i,j,txt,cls,fs){const rm=(r1+r2)/2,id="p"+uid++;const defs=el("defs",{});
el("path",{id,d:`M${J(P(rm,A(i)))}A${rm} ${rm} 0 0 1 ${J(P(rm,A(j)))}`,style:"stroke:none;fill:none"},null,defs);
const t=el("text",{"text-anchor":"middle",class:"t",style:fs?`font-size:${fs}px`:""});const tp=el("textPath",{href:"#"+id,startOffset:"50%"},txt,t);tp.setAttribute("dy",".35em");t.setAttribute("dy",".35em")}
const cols=["Pre-school 1","Pre-school 2","Pre-school 3","Class 1","Class 2","Class 3","Class 4","Class 5","Class 6","Class 7","Class 8","Class 9","Class 10","Class 11","Class 12","UG year 1","UG year 2","UG year 3","UG year 4","PG year 1","PG year 2","PhD"];
const lvl=[.1,.1,.1,.2,.4,.6,.8,1,1.33,1.67,2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7,8];
const cpy=[27,27,27,27,27,33,33,33,...Array(14).fill(40)];
const hrs=[800,800,800,800,800,1000,1000,1000,...Array(14).fill(1200)];
const ern=[2.7,2.7,2.7,5.4,10.8,19.8,26.4,33,53,67,80,100,120,140,160,180,200,220,240,260,280,320];
const nsqf={7:"1",10:"2",11:"2.5",12:"3",13:"3.5",14:"4",15:"4.5",16:"5",17:"5.5",18:"6",19:"6.5",20:"7",21:"8"};
const rings=[[60,115,hrs,"Study hours"],[115,170,ern,"Credit points earned"],[170,225,cpy,"Credits per year"],[225,280,lvl,"NCrF level"],[280,345,cols,""]];
const g=el("g",{});
for(let i=0;i<N;i++){const c=i<15?"s":"h";rings.forEach(([r1,r2,d],k)=>{wedge(r1,r2,i,i+1,k==3?c+"2":c,g);radial((r1+r2)/2,i,d[i])});
wedge(385,420,i,i+1,nsqf[i]?"n":(c),g);if(nsqf[i]){const a=A(i+.5),t=el("text",{transform:`translate(${J(P(402.5,a))}) rotate(${90-a})`,"text-anchor":"middle"});el("tspan",{x:0,y:-4,style:"font-size:10.5px"},"NSQF",t);el("tspan",{x:0,y:11,style:"font-size:14px;font-weight:700"},nsqf[i],t)}}
const groups=[[0,5,"Foundational (5 yrs)","s"],[5,8,"Preparatory (3 yrs)","s"],[8,11,"Middle (3 yrs)","s"],[11,13,"Secondary (2)","s"],[13,15,"Sr. Secondary (2)","s"],[15,19,"Undergraduate (4)","h"],[19,21,"Postgraduate (2)","h"],[21,22,"PhD","h"]];
groups.forEach(([i,j,t,c])=>{wedge(345,385,i,j,c,g);arcText(345,385,i,j,t,"",12.5)});
const prog=[
[[11,13,"ITI after 8th (NTC)","v"],[13,15,"ITI after 10th (NTC)","v"]],
[[13,16,"AICTE 3-yr Diploma","v"]],
[[15,16,"UG Cert. 1 yr","v",10.5]],
[[15,17,"UG Diploma (2 yr)","v"],[18,19,"PG Dip. (1 yr)","h",10]],
[[15,18,"UG Degree (3 yr): BA / BSc / BCom / BBA / BVoc","h",10.5],[18,20,"2-yr Master’s (after UG3)","h"]],
[[15,19,"UG Degree (4 yr): BE / BTech","h"],[19,21,"M.Tech / Master’s (Engg.) 2 yr","h",10.5]],
[[15,19,"UG Degree (4 yr): Honours / Research","h"],[19,20,"1-yr Master’s","h"]]];
prog.forEach((row,k)=>{const r1=420+k*33,r2=r1+33;row.forEach(([i,j,t,c,f])=>{wedge(r1,r2,i,j,c,g);arcText(r1,r2,i,j,t,"",f||11.5)})});
const fw=el("g",{class:"f"});wedge(652,684,8,11,"v",g);arcText(652,684,8,11,"Vocational exposure (10-day bagless)","",13);wedge(652,684,11,17,"v",g);arcText(652,684,11,17,"Vocational education","",15);
[[7,22,"National Skills Qualification Framework (NSQF)","fv",688,726]].concat([[0,15,"National School Education Qualification Framework (NSEQF)","fs",730,786],[15,22,"National Higher Education Qualification Framework (NHEQF)","fh",730,786]]).forEach(([i,j,t,c,r1,r2])=>{wedge(r1,r2,i,j,c,fw);arcText(r1,r2,i,j,t);svg.lastChild.setAttribute("style","fill:var(--ft);font-weight:700;font-size:21px")});
fw.querySelectorAll("text").forEach(t=>t.setAttribute("style","fill:var(--ft);font-weight:700;font-size:21px"));
rings.slice(0,4).forEach(([r1,r2,d,l])=>{const x=cx-(r1+r2)/2,t=el("text",{x,y:cy+18,"text-anchor":"middle",class:"t",style:"font-size:12px;font-weight:700"});l.split(" ").reduce((a,w,idx,arr)=>a,0);const parts=l.split(" ");parts.forEach((w,k)=>el("tspan",{x,dy:k?"1.2em":"0"},w,t))});
el("text",{x:cx,y:cy+100,"text-anchor":"middle",style:"font-size:32px;font-weight:700"},"India’s National Credit Framework");
el("text",{x:cx,y:cy+135,"text-anchor":"middle",style:"font-size:16px;font-weight:700"},"1 credit = 30 hours. Credit points earned = credits per year × NCrF level.");["Pre-school credit points are shown per year (0.1 × 27 credits × 3 years = 8.1 in total).","Each postgraduate bar starts the year after the degree it follows: after a 3-year UG at UG year 4 (level 6.0), after a 4-year UG at PG year 1 (6.5).","Values checked against: Government of India, National Credit Framework report (draft, Sept 2022), Tables 3–6."].forEach((t,k)=>el("text",{x:cx,y:cy+162+k*22,"text-anchor":"middle",style:"font-size:14px;font-style:italic"},t));el("line",{x1:cx-430,x2:cx+430,y1:cy+235,y2:cy+235,stroke:"#8a93a0","stroke-width":1.5});[["Original chart and synthesis: Ashutosh Pratap Singh",700,17],["© 2026 Ashutosh Pratap Singh · Licensed under CC BY 4.0 · creativecommons.org/licenses/by/4.0",400,15],["Source and citation: https://doi.org/10.5281/zenodo.23687920",400,15]].forEach(([t,w,f],k)=>el("text",{x:cx,y:cy+265+k*26,"text-anchor":"middle",style:`font-size:${f}px;font-weight:${w}`},t));
</script>
</body>
</html>