I have an svg shield compound from two path. I need to create progress bar like this: 
Shield should fills clockwise with green starting from the center at the top.
Unfortunatly I don’t have any expirience working with svgs. All that I found – was dash+offset trick that kinda could work with two correct strokes (I think two, because outer and inner part are not the same) and they should move simultaneously and also from corret position from the top.
Maybe someone works with highcharts and they are flexible enough for that task?
Or should I ask a designer for correct path/parts of path? Any suggestions would help
Thank you
<svg xmlns="http://www.w3.org/2000/svg" id="b" viewBox="0 0 208 256"><g id="c"><g id="d"><path d="M104.008,230.733c34.201-19.594,53.976-31.944,65.831-43.87,10.089-10.149,14.161-19.658,14.161-37.101V53.467c-.462-.213-.987-.446-1.59-.704-14.122-5.86-59.818-22.552-75.371-28.132-2.049-.587-2.812-.63-3.102-.63-.137,0-.854.027-2.9.609-1.425.523-3.092,1.133-4.956,1.816-18.825,6.897-57.753,21.16-70.689,26.42-.522.217-.983.416-1.392.598v96.319c0,9.414,1.253,16.008,3.303,21.237,2.011,5.129,5.262,10.15,10.888,15.797,11.888,11.934,31.67,24.279,65.818,43.937ZM95.55,253.553C24.65,212.861,0,195.992,0,149.762V52.668c0-13.264,5.718-17.642,16.264-22.02,13.307-5.418,52.881-19.916,71.606-26.775,2.194-.804,4.101-1.503,5.647-2.07,3.431-1.03,6.862-1.803,10.42-1.803,3.684,0,7.115.773,10.546,1.803,14.739,5.279,62.387,22.663,77.253,28.845,10.546,4.507,16.264,8.756,16.264,22.02v97.094c0,46.23-24.523,63.228-95.55,103.791-3.304,1.674-6.48,2.447-8.513,2.447s-5.083-.773-8.387-2.447Z" style="fill:#0a0b0c; fill-rule:evenodd; stroke-width:0px;"/></g></g></svg>