Svg Spray chart


Actually I am new to SVG. I need's to draw baseball spray chart as have in below.Please help how to get this exactly and each section dynamically varies.Is it possible to draw using HTML CSS.Thanks.

enter image description here

UPDATE

I'm updating the question with the OP's comments that are important:

I forget to tell you it is a baseball ground. Consider batter on PA and we are showing batter hit location in percentage around the ground in a game.


Answers:


There are a few steps:

  1. you draw the individual paths
  2. you draw the paths for the text (text on a path)
  3. you draw the text

let R = 200;// the outer radius
let r = 120;// the middle radius
let objects = [];// an array for the paths


class pathObj{
  constructor(a1,a2,R,r,path,text){
    this.a1 = a1; //starting angle
    this.a2 = a2; // ending angle
    this.R = R;//the outer radius
    this.r = r;// the middle radius
    this.rm = r + 2*(R - r)/3; // the radius for the text path
    this.path = document.querySelector(`#${path}`);
    this.textpath = document.querySelector(`#p${path}`);
    this.textElement = document.querySelector(`#t${path}`);
    this.textPath = document.querySelector(`#t${path} textPath`);
    this.textPath.textContent = text;
    
    // points to draw the paths
    this.p1 = {
     x:this.R*Math.cos(this.a1),
     y:this.R*Math.sin(this.a1)
    };
    this.p2 = {
     x:this.R*Math.cos(this.a2),
     y:this.R*Math.sin(this.a2)
    }
   this.p3 = {
     x:this.r*Math.cos(this.a2),
     y:this.r*Math.sin(this.a2)
    }
    this.p4 = {
     x:this.r*Math.cos(this.a1),
     y:this.r*Math.sin(this.a1)
    }
     this.p5 = {
     x:this.rm*Math.cos(this.a1),
     y:this.rm*Math.sin(this.a1)
    }
    this.p6 = {
     x:this.rm*Math.cos(this.a2),
     y:this.rm*Math.sin(this.a2)
    }
  }

  draw(){
    // the d attribute for the main path
    let d = `M${this.p1.x},${this.p1.y}
             A${this.R},${this.R} 0 0 1 ${this.p2.x},${this.p2.y}
             L${this.p3.x},${this.p3.y}
             A${this.r},${this.r} 0 0 0 ${this.p4.x},${this.p4.y}
             Z`;
    // the d attribute for the text path         
    let d1 = `M${this.p5.x},${this.p5.y}
             A${this.R},${this.R} 0 0 1 ${this.p6.x},${this.p6.y}`
    
    
    this.path.setAttributeNS(null,"d",d);
    this.textpath.setAttributeNS(null,"d",d1);
    
  }
  
}

// create the objects and push into the objects array
objects.push(new pathObj(0,Math.PI/6,R,r,"a","11%"));
objects.push(new pathObj(Math.PI/6,Math.PI/3,R,r,"b","18%"));
objects.push(new pathObj(Math.PI/3,Math.PI/2,R,r,"c","23%"));
objects.push(new pathObj(0,Math.PI/8,r,0,"d","3%"));
objects.push(new pathObj(Math.PI/8,Math.PI/4,r,0,"e","3%"));
objects.push(new pathObj(Math.PI/4,3*Math.PI/8,r,0,"f","29%"));
objects.push(new pathObj(3*Math.PI/8,Math.PI/2,r,0,"g","13%"));
objects.forEach(o=>o.draw())
svg{border:1px solid }
path{stroke:black; fill:transparent;}
text{ text-anchor:middle;}
<svg viewBox="-200 -250 400 250">
<defs>
   <path id="pa" /> 
   <path id="pb" />
   <path id="pc" />
   <path id="pd" />
   <path id="pe" />
   <path id="pf" />
   <path id="pg" />
  </defs> 
<g transform="rotate(-135)">
  <path id="a" /><text id="ta"><textPath startOffset="50%" xlink:href="#pa"></textPath></text>
  <path id="b" /><text id="tb"><textPath startOffset="50%" xlink:href="#pb"></textPath></text>
  <path id="c" /><text id="tc"><textPath startOffset="50%" xlink:href="#pc"></textPath></text>
  <path id="d" /><text id="td"><textPath startOffset="50%" xlink:href="#pd"></textPath></text>
  <path id="e" /><text id="te"><textPath startOffset="50%" xlink:href="#pe"></textPath></text>
  <path id="f" /><text id="tf"><textPath startOffset="50%" xlink:href="#pf"></textPath></text>
  <path id="g" /><text id="tg"><textPath startOffset="50%" xlink:href="#pg"></textPath></text>
</g>
</svg>