Donutpattern

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

<?php
echo 'Hello, world!';

<style>
			.don_1{font-family:inherit;max-width:560px;margin:0 auto;padding:18px 12px;box-sizing:border-box;}
			.don_1 .ds-title{text-align:center;font-size:18px;font-weight:600;color:#222;margin:0 0 12px;}
			.don_1 .ds-body{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:20px;}
			.don_1 .ds-donut{width:240px;max-width:100%;height:auto;flex:0 0 auto;}
			.don_1 .ds-slice{stroke-width:36px;cursor:default;transition:stroke-width .2s ease;}
			.don_1 .ds-slice:hover{stroke-width:44px;}
			.don_1 .ds-legend{display:flex;flex-direction:column;gap:8px;}
			.don_1 .ds-leg{display:flex;align-items:center;gap:8px;font-size:13px;color:#555;}
			.don_1 .ds-leg b{color:#222;font-weight:600;}
			.don_1 .ds-leg .pct{color:#999;margin-left:3px;}
			.don_1 .ds-sw{flex:0 0 auto;border:1px solid rgba(0,0,0,.08);border-radius:3px;}
			</style><div class="don_1"><div class="ds-title">Traffic Sources</div><div class="ds-body"><svg class="ds-donut" viewBox="0 0 240 240"><defs><pattern id="don_1_p0" width="8" height="8" patternUnits="userSpaceOnUse"><rect width="8" height="8" fill="#5B8FF9" fill-opacity="0.16"/><circle cx="4" cy="4" r="1.7" fill="#5B8FF9"/></pattern><pattern id="don_1_p1" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="8" height="8" fill="#61DDAA" fill-opacity="0.16"/><rect x="3" width="2.4" height="8" fill="#61DDAA"/></pattern><pattern id="don_1_p2" width="8" height="8" patternUnits="userSpaceOnUse"><rect width="8" height="8" fill="#F6BD16" fill-opacity="0.16"/><rect x="3" width="2" height="8" fill="#F6BD16"/><rect y="3" width="8" height="2" fill="#F6BD16"/></pattern><pattern id="don_1_p3" width="8" height="8" patternUnits="userSpaceOnUse"><rect width="8" height="8" fill="#7262FD" fill-opacity="0.16"/><rect x="3" width="2.4" height="8" fill="#7262FD"/></pattern><pattern id="don_1_p4" width="8" height="8" patternUnits="userSpaceOnUse"><rect width="8" height="8" fill="#78D3F8" fill-opacity="0.16"/><rect y="3" width="8" height="2.4" fill="#78D3F8"/></pattern></defs><circle class="ds-slice" cx="120" cy="120" r="96" fill="none" stroke="url(#don_1_p0)" stroke-dasharray="200.87 402.32" transform="rotate(-90 120 120)"><title>Search: 1,048 (33%)</title></circle><circle class="ds-slice" cx="120" cy="120" r="96" fill="none" stroke="url(#don_1_p1)" stroke-dasharray="140.88 462.31" transform="rotate(29.89 120 120)"><title>Direct: 735 (23%)</title></circle><circle class="ds-slice" cx="120" cy="120" r="96" fill="none" stroke="url(#don_1_p2)" stroke-dasharray="111.17 492.02" transform="rotate(113.97 120 120)"><title>Email: 580 (18%)</title></circle><circle class="ds-slice" cx="120" cy="120" r="96" fill="none" stroke="url(#don_1_p3)" stroke-dasharray="92.77 510.42" transform="rotate(180.31 120 120)"><title>Social: 484 (15%)</title></circle><circle class="ds-slice" cx="120" cy="120" r="96" fill="none" stroke="url(#don_1_p4)" stroke-dasharray="57.5 545.68" transform="rotate(235.68 120 120)"><title>Referral: 300 (10%)</title></circle><text x="120" y="114" text-anchor="middle" dominant-baseline="central" font-size="26" font-weight="700" fill="#333">3,147</text><text x="120" y="136" text-anchor="middle" font-size="12" fill="#999">visits</text></svg><div class="ds-legend"><span class="ds-leg"><svg class="ds-sw" width="16" height="16"><defs><pattern id="don_1_lp0" width="8" height="8" patternUnits="userSpaceOnUse"><rect width="8" height="8" fill="#5B8FF9" fill-opacity="0.16"/><circle cx="4" cy="4" r="1.7" fill="#5B8FF9"/></pattern></defs><rect width="16" height="16" rx="3" fill="url(#don_1_lp0)"/></svg><span>Search <b>1,048</b><span class="pct">(33%)</span></span></span><span class="ds-leg"><svg class="ds-sw" width="16" height="16"><defs><pattern id="don_1_lp1" width="8" height="8" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><rect width="8" height="8" fill="#61DDAA" fill-opacity="0.16"/><rect x="3" width="2.4" height="8" fill="#61DDAA"/></pattern></defs><rect width="16" height="16" rx="3" fill="url(#don_1_lp1)"/></svg><span>Direct <b>735</b><span class="pct">(23%)</span></span></span><span class="ds-leg"><svg class="ds-sw" width="16" height="16"><defs><pattern id="don_1_lp2" width="8" height="8" patternUnits="userSpaceOnUse"><rect width="8" height="8" fill="#F6BD16" fill-opacity="0.16"/><rect x="3" width="2" height="8" fill="#F6BD16"/><rect y="3" width="8" height="2" fill="#F6BD16"/></pattern></defs><rect width="16" height="16" rx="3" fill="url(#don_1_lp2)"/></svg><span>Email <b>580</b><span class="pct">(18%)</span></span></span><span class="ds-leg"><svg class="ds-sw" width="16" height="16"><defs><pattern id="don_1_lp3" width="8" height="8" patternUnits="userSpaceOnUse"><rect width="8" height="8" fill="#7262FD" fill-opacity="0.16"/><rect x="3" width="2.4" height="8" fill="#7262FD"/></pattern></defs><rect width="16" height="16" rx="3" fill="url(#don_1_lp3)"/></svg><span>Social <b>484</b><span class="pct">(15%)</span></span></span><span class="ds-leg"><svg class="ds-sw" width="16" height="16"><defs><pattern id="don_1_lp4" width="8" height="8" patternUnits="userSpaceOnUse"><rect width="8" height="8" fill="#78D3F8" fill-opacity="0.16"/><rect y="3" width="8" height="2.4" fill="#78D3F8"/></pattern></defs><rect width="16" height="16" rx="3" fill="url(#don_1_lp4)"/></svg><span>Referral <b>300</b><span class="pct">(10%)</span></span></span></div></div></div>

[skillwrapper type="skt_donutpattern" chart_title="Traffic Sources" center_sub="visits"]

[skill label="Search" value="1048"]

[skill label="Direct" value="735"]

[skill label="Email" value="580"]

[skill label="Social" value="484"]

[skill label="Referral" value="300"]

[/skillwrapper]

Traffic Sources

Search 1,048(33%)Direct 735(23%)Email 580(18%)Social 484(15%)Referral 300(10%)