Circle Graph

Copy and paste the following shortcode into your post or page.

<?php
echo 'Hello, world!';

<style>.sktb_pie_graph {
			  --w:200px;
			  width:200px;
			  aspect-ratio: 1;
			  position: relative;
			  display: inline-grid;
			  place-content: center;
			  margin: 5px 1em;
			  
			  font-weight: bold;
			  font-family: sans-serif;
			  border-radius: 50%;
		   }
		   .sktb_pie_graph:before {
			  content: "";
			  position: absolute;
			  border-radius: 50%;
			  inset: 0;
			  background: conic-gradient(var(--c) calc(var(--p)*1%),#dddddd 0);
			  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
					 mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
		   }</style><div class="skt_skill_flex-wrapper" style="font-size:12px;text-align:left"><div class="sktb_pie_graph">
                         <div class="sktb_pie_graph" style="--p:88;--b:30px;--c:#333333;font-size: 13px;color:#dddddd""><span style="color:#333333">88%</span></div>
                         <span style="font-size: 16px;text-align:center;color:#333333">Web Research</span>
                    </div><div class="sktb_pie_graph">
                         <div class="sktb_pie_graph" style="--p:55;--b:30px;--c:#333333;font-size: 13px;color:#dddddd""><span style="color:#333333">55%</span></div>
                         <span style="font-size: 16px;text-align:center;color:#333333">WordPress</span>
                    </div><div class="sktb_pie_graph">
                         <div class="sktb_pie_graph" style="--p:85;--b:30px;--c:#333333;font-size: 13px;color:#dddddd""><span style="color:#333333">85%</span></div>
                         <span style="font-size: 16px;text-align:center;color:#333333">PHP</span>
                    </div><div class="sktb_pie_graph">
                         <div class="sktb_pie_graph" style="--p:100;--b:30px;--c:#333333;font-size: 13px;color:#dddddd""><span style="color:#333333">100%</span></div>
                         <span style="font-size: 16px;text-align:center;color:#333333">jQuery</span>
                    </div></div>

[skillwrapper type="circle" track_color="#333333" chart_color="#dddddd" chart_size="200" chart_fontsize="13" chart_headingfontsize="16" align="left"]

[skill percent="88" title="Web Research"]

[skill percent="55" title="WordPress"]

[skill percent="85" title="PHP"]

[skill percent="100" title="jQuery"]

[/skillwrapper]

88%

Web Research

55%

WordPress

85%

PHP

100%

jQuery