以下のコードをhtmlファイルに入れていますがレーダーチャートが表示されません。原因がわかる方教えていただけませんでしょうか。

コードの出典: ”インラインSVG”を使ってレーダーチャートを作ってみよう！ -- キャスレー技術ブログ

<head>
<style>
#svg_container{
width:600px;
height:450px;
margin:auto;
}
#chart_container{
width:500px;
height:500px;
display: block;
margin: auto;
}

#chart_foundation_pentagons {
fill:none;
stroke: #7ac5e9;
stroke-width:1px;
stroke-dasharray:3px;
}
</style>
</head>

<body>

<div class="svg_container">
<svg id="chart_container">
<g id="chart_foundation_pentagons"></g>
<g id="chart_Polygon"></g>
<g id="marker_points_wrap"></g>
</svg>
</div>

<script>
//五角形を生成
function createPentagons(dis){
 //polygon要素を生成
 var Pentagon=document.createElementNS("http://www.w3.org/2000/svg","polygon");
 var pentagonPoints ="";
 for (var i = 0; i < 5; i++){
　var x = Math.cos(((72*i)-90)*Math.PI/180)*dis;
　var y = Math.sin(((72*i)-90)*Math.PI/180)*dis;
　pentagonPoints += (x+250) +","+ (y+220) + " ";
}
 allPentagonPoints.push(pentagonPoints);
 //座標を設定
 Pentagon.setAttribute("points",pentagonPoints);
 return Pentagon;
}
 
//レーダーチャートの土台を作る。生成した五角形を表示
function drawChartFoundation(){
 //中心からの距離ごとに五角形をつくる
 var distance = [1,50,100,150,200];
 for(var i=0; i<distance.length; i++){
  document.getElementById("chart_foundation_pentagons").appendChild(createPentagons(distance[i]));
 }
}
</script>

</body>