Untitled

<?php

$w = 2000;
$h = 1000;

$x0 = 200;
$y0 = $h/2;
$delta = 50;
$r = $y0-$delta;
$r1 = 20;
$r2 = 5;
$r3 = 100;

$a1 = 45;
$x1 = round($x0 + ($r*cos(deg2rad($a1-90))));
$y1 = round($y0 + ($r*sin(deg2rad($a1-90))));

$a2 = 90;
$x2 = round($x0 + ($r*cos(deg2rad($a2-90))));
$y2 = round($y0 + ($r*sin(deg2rad($a2-90))));

$a3 = 135;
$x3 = round($x0 + ($r*cos(deg2rad($a3-90))));
$y3 = round($y0 + ($r*sin(deg2rad($a3-90))));

$a4 = 0;
$x4 = round($x0 + ($r*cos(deg2rad($a4-90))));
$y4 = round($y0 + ($r*sin(deg2rad($a4-90))));

$a5 = 180;
$x5 = round($x0 + ($r*cos(deg2rad($a5-90))));
$y5 = round($y0 + ($r*sin(deg2rad($a5-90))));

$pWidth = 530;
$p1 = 100;
$p2 = 5;
$p3 = 10;

?>

<html>
    <header>
        <link href="./main.css" rel="stylesheet" type="text/css">
    </header>
    <body>
        <div style="width: 100%;height: 100%">
            <svg height="1000" width="2000" viewBox="0 0 2000 1000" preserveAspectRatio="none" style="width: 100%;height: 100%;">
                <defs>
                    <clipPath id="cut-off-bottom">
                        <rect x="<?php echo $x0; ?>" y="<?php echo $delta-5; ?>" width="<?php echo $r+$delta; ?>" height="<?php echo $h; ?>" />
                    </clipPath>
                    <radialGradient id="Gradient">
                        <stop offset="10%" stop-color="#22a7f0"/>
                        <stop offset="95%" stop-color="#2e3131"/>
                    </radialGradient>
                </defs>

                <circle cx="<?php echo $x0; ?>" cy="<?php echo $y0; ?>" r="<?php echo $r; ?>" clip-path="url(#cut-off-bottom)" fill="none" stroke="#2e3131" style="stroke-width: 5px;" />

                <circle cx="<?php echo $x0; ?>" cy="<?php echo $y0; ?>" r="<?php echo $y0-100; ?>" fill="url(#Gradient)"/>

                <circle cx="<?php echo $x1; ?>" cy="<?php echo $y1; ?>" r="<?php echo $r1; ?>" fill="#f89406"/>
                <line x1="<?php echo $x1 + 50; ?>" y1="<?php echo $y1; ?>" x2="<?php echo $x1+550+70; ?>" y2="<?php echo $y1; ?>" stroke="black"/>
                <circle cx="<?php echo $x1 + 50; ?>" cy="<?php echo $y1; ?>" r="<?php echo $r2; ?>" fill="black"/>
                <circle cx="<?php echo $x1 + 550+70; ?>" cy="<?php echo $y1; ?>" r="<?php echo $r2; ?>" fill="black"/>
                <circle cx="<?php echo $x1 + 700+70; ?>" cy="<?php echo $y1; ?>" r="<?php echo $r3; ?>" fill="#2e3131"/>
                <text x="<?php echo $x1 + 263 + 70; ?>" y="<?php echo $y1+50; ?>" fill="black"><?php echo $p1; ?>%</text>
                <text x="<?php echo $x1 + 700+70; ?>" y="<?php echo $y1+5; ?>" fill="white">Forum</text>

                <!-- PROGRESSBAR 1 -->

                <line x1="<?php echo $x1 + 70; ?>" y1="<?php echo $y1-5; ?>" x2="<?php echo $x1+70+($pWidth*$p1/100); ?>" y2="<?php echo $y1-5; ?>" stroke="#ffcb05" style="stroke-width: 5px;"/>

                <!-- FIN PROGRESSBAR 1 -->

                <circle cx="<?php echo $x2; ?>" cy="<?php echo $y2; ?>" r="<?php echo $r1; ?>" fill="#f89406"/>
                <line x1="<?php echo $x2 + 50; ?>" y1="<?php echo $y2; ?>" x2="<?php echo $x2+550+70; ?>" y2="<?php echo $y2; ?>" stroke="black"/>
                <circle cx="<?php echo $x2 + 50; ?>" cy="<?php echo $y2; ?>" r="<?php echo $r2; ?>" fill="black"/>
                <circle cx="<?php echo $x2 + 550+70; ?>" cy="<?php echo $y2; ?>" r="<?php echo $r2; ?>" fill="black"/>
                <circle cx="<?php echo $x2 + 700+70; ?>" cy="<?php echo $y2; ?>" r="<?php echo $r3; ?>" fill="#2e3131"/>
                <text x="<?php echo $x2 + 263 + 70; ?>" y="<?php echo $y2+50; ?>" fill="black"><?php echo $p2; ?>%</text>
                <text x="<?php echo $x2 + 700+70; ?>" y="<?php echo $y2+5; ?>" fill="white">Site</text>

                <!-- PROGRESSBAR 2 -->

                <line x1="<?php echo $x2 + 70; ?>" y1="<?php echo $y2-5; ?>" x2="<?php echo $x2+70+($pWidth*$p2/100); ?>" y2="<?php echo $y2-5; ?>" stroke="#ffcb05" style="stroke-width: 5px;"/>

                <!-- FIN PROGRESSBAR 2 -->

                <circle cx="<?php echo $x3; ?>" cy="<?php echo $y3; ?>" r="<?php echo $r1; ?>" fill="#f89406"/>
                <line x1="<?php echo $x3 + 50; ?>" y1="<?php echo $y3; ?>" x2="<?php echo $x3+550+70; ?>" y2="<?php echo $y3; ?>" stroke="black"/>
                <circle cx="<?php echo $x3 + 50; ?>" cy="<?php echo $y3; ?>" r="<?php echo $r2; ?>" fill="black"/>
                <circle cx="<?php echo $x3 + 550+70; ?>" cy="<?php echo $y3; ?>" r="<?php echo $r2; ?>" fill="black"/>
                <circle cx="<?php echo $x3 + 700+70; ?>" cy="<?php echo $y3; ?>" r="<?php echo $r3; ?>" fill="#2e3131"/>
                <text x="<?php echo $x3 + 263 + 70; ?>" y="<?php echo $y3+50; ?>" fill="black"><?php echo $p3; ?>%</text>
                <text x="<?php echo $x3 + 700+70; ?>" y="<?php echo $y3+5; ?>" fill="white">Network</text>

                <!-- PROGRESSBAR 3 -->

                <line x1="<?php echo $x3 + 70; ?>" y1="<?php echo $y3-5; ?>" x2="<?php echo $x3+70+($pWidth*$p3/100); ?>" y2="<?php echo $y3-5; ?>" stroke="#ffcb05" style="stroke-width: 5px;"/>

                <!-- FIN PROGRESSBAR 3 -->

                <circle cx="<?php echo $x4; ?>" cy="<?php echo $y4; ?>" r="<?php echo $r2; ?>" fill="black"/>
                <circle cx="<?php echo $x5; ?>" cy="<?php echo $y5; ?>" r="<?php echo $r2; ?>" fill="black"/>
            </svg>
        </div>
    </body>
</html>