PHP Animated SVG Chart Generator
Generate dynamic animated SVG pie charts, bar charts, and line charts from PHP data arrays with smooth CSS animations.
PHPSVGCSSAnimationCharts
Overview
Build a chart library in PHP that generates pure SVG charts with CSS animations — no JavaScript libraries needed.
SVG Chart Class (ChartGenerator.php)
php
<?php
class ChartGenerator {
public static function pieChart(array $data, int $size = 300): string {
$total = array_sum(array_column($data, 'value'));
$colors = ['#6c63ff','#ff6b6b','#48dbfb','#00ff88','#ffd32a','#ff9ff3'];
$svg = "<svg viewBox='0 0 $size $size' width='$size' height='$size'>";
$cx = $size/2; $cy = $size/2; $r = $size/2 - 10;
$offset = 0;
foreach ($data as $i => $item) {
$pct = $item['value'] / $total;
$dash = $pct * 2 * M_PI * $r;
$gap = 2 * M_PI * $r - $dash;
$color = $colors[$i % count($colors)];
$delay = $i * 0.2;
$svg .= "<circle cx='$cx' cy='$cy' r='$r' fill='none' stroke='$color' stroke-width='40' stroke-dasharray='$dash $gap' stroke-dashoffset='" . (-$offset) . "' transform='rotate(-90 $cx $cy)' style='animation: pieSlice 1s ease {$delay}s both'><title>{$item['label']}: {$item['value']}</title></circle>";
$offset += $dash;
}
$svg .= "</svg>";
return $svg;
}
public static function barChart(array $data, int $w = 500, int $h = 300): string {
$max = max(array_column($data, 'value'));
$barW = ($w - 40) / count($data) - 10;
$svg = "<svg viewBox='0 0 $w $h' width='$w' height='$h'>";
$svg .= "<rect x='0' y='0' width='$w' height='$h' fill='#1a1a3e' rx='12'/>";
foreach ($data as $i => $item) {
$barH = ($item['value'] / $max) * ($h - 60);
$x = 30 + $i * ($barW + 10);
$y = $h - $barH - 30;
$delay = $i * 0.15;
$svg .= "<rect x='$x' y='$y' width='$barW' height='$barH' fill='url(#grad)' rx='6' style='animation: barGrow 0.8s ease {$delay}s both; transform-origin: bottom'/>";
$svg .= "<text x='" . ($x + $barW/2) . "' y='" . ($h - 10) . "' fill='#fff' font-size='12' text-anchor='middle'>{$item['label']}</text>";
}
$svg .= "<defs><linearGradient id='grad' x1='0' y1='0' x2='0' y2='1'><stop offset='0%' stop-color='#6c63ff'/><stop offset='100%' stop-color='#48dbfb'/></linearGradient></defs>";
$svg .= "</svg>";
return $svg;
}
}
?>Usage (index.php)
php
<?php require 'ChartGenerator.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated SVG Charts</title>
<style>
body { background: #0a0a23; color: #fff; font-family: sans-serif; padding: 2rem; text-align: center; }
.charts { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; margin-top: 2rem; }
@keyframes pieSlice { from { opacity: 0; stroke-dashoffset: 0; } }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
</style>
</head>
<body>
<h1>������ Animated SVG Charts</h1>
<div class="charts">
<div>
<h2>Revenue by Product</h2>
<?= ChartGenerator::pieChart([['label'=>'A','value'=>35],['label'=>'B','value'=>25],['label'=>'C','value'=>20],['label'=>'D','value'=>15],['label'=>'E','value'=>5]]) ?>
</div>
<div>
<h2>Weekly Sales</h2>
<?= ChartGenerator::barChart([['label'=>'Mon','value'=>120],['label'=>'Tue','value'=>200],['label'=>'Wed','value'=>150],['label'=>'Thu','value'=>180],['label'=>'Fri','value'=>240]]) ?>
</div>
</div>
</body>
</html>Technologies
- PHP — SVG generation, math calculations - SVG — scalable vector graphics - CSS — keyframe animations on SVG elements
Related Projects
PHPApr 27, 2026
Analog Clock with PHP & CSS
Build a beautiful real-time analog clock using PHP for time calculation and CSS for the rotating hands and dial.
PHPCSSAnimationClock
Read more → Source
PHPApr 27, 2026
Animated Loading Spinners Gallery in PHP
Create a gallery of 10+ beautiful CSS loading spinner animations served dynamically through PHP.
PHPCSSAnimationSpinners
Read more → Source
PHPApr 27, 2026
PHP Color Palette Generator
Generate beautiful random color palettes with hex codes, RGB values, and one-click copy — all powered by PHP.
PHPCSSColorsDesign Tool
Read more → Source
Comments (0)
No comments yet. Be the first to comment!