[{"text":"<!-- Ref: https://codepen.io/janverstr/pen/PvPoaV -->\n\n<<donut-chart \"24\" \"120 styles\" tomato>> <<donut-chart \"55\" \"350 macros\" yellow>> <<donut-chart \"83\" \"1200 widgets\" green>>","title":"Donut Chart Example","tags":"","modified":"20210902092424634","created":"20210902063251493"},{"text":"\\define donut-chart(pct, label, color)\n<!-- Ref: https://codepen.io/janverstr/pen/PvPoaV -->\n<$vars dasharrvalue={{{ [[100]subtract[$pct$]addprefix[$pct$, ]] }}}>\n<div class=\"svg-item\" style=\"\">\n  <svg width=\"100%\" height=\"100%\" viewBox=\"0 0 40 40\" class=\"donut\">\n    <circle class=\"donut-hole\" cx=\"20\" cy=\"20\" r=\"15.91549430918954\" fill=\"#fff\"></circle>\n    <circle class=\"donut-ring\" cx=\"20\" cy=\"20\" r=\"15.91549430918954\" fill=\"transparent\" stroke-width=\"3.5\"></circle>\n    <circle class=\"donut-segment donut-segment-2\" cx=\"20\" cy=\"20\" r=\"15.91549430918954\" fill=\"transparent\"\n\t\t  stroke-width=\"3.5\" stroke-dasharray=<<dasharrvalue>> stroke-dashoffset=\"25\" stroke=\"$color$\"></circle>\n    <g class=\"donut-text donut-text-1\">\n      <text y=\"50%\" transform=\"translate(0, 2)\">\n        <tspan x=\"50%\" text-anchor=\"middle\" class=\"donut-percent\">$pct$%</tspan>   \n      </text>\n      <text y=\"60%\" transform=\"translate(0, 2)\">\n        <tspan x=\"50%\" text-anchor=\"middle\" class=\"donut-data\">$label$</tspan>   \n      </text>\n    </g>\n  </svg>\n</div>\n</$vars>\n\\end","title":"Donut Chart Macro","tags":"$:/tags/Macro","modified":"20210902131953708","created":"20210902052017777"},{"text":"/* Ref: https://codepen.io/janverstr/pen/PvPoaV */\n\n.svg-item { /* only for this presentation */\n  max-width:30%;\n  display:inline-block;\n}\n\n.svg-item {\n    width: 100%;\n    font-size: 16px;\n    margin: 0 auto;\n    animation: donutfade 1s;\n}\n\n@media (min-width: 992px) {\n    .svg-item {\n        width: 80%;\n    }\n}\n\n@keyframes donutfade {\n  /* this applies to the whole svg item wrapper */\n    0% {\n        opacity: .2;\n    }\n    100% {\n        opacity: 1;\n    }\n}\n\n@keyframes donut1 {\n    0% {\n        stroke-dasharray: 0, 100;\n    }\n    100% {\n/*        stroke-dasharray: 69 31 ;*/\n    }\n}\n\n.donut-ring {\n    stroke: #EBEBEB; \n}\n\n.donut-segment {\n    transform-origin: center;\n/*    stroke: #FF6200; */\n}\n\n.donut-segment-2 {\n/*    stroke: aqua;\n\t    fill:aqua;  */\n    animation: donut1 3s;\n}\n\n.donut-percent {\n    animation: donutfadelong 1s;\n}\n\n@keyframes donutfadelong {\n    0% {\n        opacity: 0;\n    }\n    100% {\n        opacity: 1;\n    }\n}\n\n.donut-text {\n    font-family: Arial, Helvetica, sans-serif;\n/*    fill: #FF6200; */\n}\n\n.donut-percent {\n    font-size: 0.5em;\n    line-height: 1;\n    transform: translateY(0.5em);\n    font-weight: bold;\n}\n\n.donut-data {\n    font-size: 0.15em;\n    line-height: 1;\n    transform: translateY(0.5em);\n    text-align: center;\n    text-anchor: middle;\n/*    color:#666;\n    fill: #666; */\n    animation: donutfadelong 1s;\n}\n","type":"text/css","title":"Donut Chart.css","tags":"$:/tags/Stylesheet","modified":"20210902131514964","created":"20210902051826306"}]