diff --git a/composer.lock b/composer.lock
new file mode 100644
index 0000000..bc85379
--- /dev/null
+++ b/composer.lock
@@ -0,0 +1,20 @@
+{
+    "_readme": [
+        "This file locks the dependencies of your project to a known state",
+        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
+        "This file is @generated automatically"
+    ],
+    "hash": "047fa804d63760af3db43a3f70eef7ec",
+    "content-hash": "04c5bdb78f81192a47bf01051143582a",
+    "packages": [],
+    "packages-dev": [],
+    "aliases": [],
+    "minimum-stability": "stable",
+    "stability-flags": [],
+    "prefer-stable": false,
+    "prefer-lowest": false,
+    "platform": {
+        "php": ">=5.3.0"
+    },
+    "platform-dev": []
+}
diff --git a/demo-as-image.php b/demo-as-image.php
new file mode 100644
index 0000000..6c200b5
--- /dev/null
+++ b/demo-as-image.php
@@ -0,0 +1,25 @@
+<?php
+require_once 'vendor/autoload.php';
+
+$chartData = [];
+$offset = 100 * (rand()/getRandMax())**4;
+$scale = 100 * (rand()/getRandMax())**2;
+$volatility = 0.5 * (rand()/getRandMax())**3;
+for ($n = 0, $current = $offset + 0.5 * $scale; $n < 24; $n++) {
+  $current -= $offset;
+  $current *= 1 + $volatility * (rand()/getRandMax() - 0.5);
+  $current += $offset;
+  $chartData[$n] = $current;
+}
+
+header('Content-type: image/svg+xml; charset=utf-8');
+$chart = new NeatCharts\LineChart($chartData, [
+  'width'=>500,
+  'height'=>400,
+  'lineColor'=>'#00F',
+  'labelColor'=>'#222',
+  'smoothed'=>false,
+  'fontSize'=>14
+]);
+echo $chart->render();
+?>
diff --git a/demo.php b/demo.php
new file mode 100644
index 0000000..e90cfd8
--- /dev/null
+++ b/demo.php
@@ -0,0 +1,56 @@
+<?php
+require_once 'vendor/autoload.php';
+?>
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
+  <title>Demo Page : seigler/neat-charts</title>
+  <style>
+    *, *:after, *:before { box-sizing: inherit; }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>neat-charts examples</h1>
+  </header>
+  <main>
+    <section>
+      <h2>SVG chart in <code>img</code> tag</h2>
+      <figure>
+        <img src="./demo-as-image.php">
+        <figcaption>Random generated data, loaded as an image</figcaption>
+      </figure>
+    </section>
+    <section>
+      <h2>SVG chart in <code>svg</code> tag</h2>
+      <figure>
+        <?php
+$chartData = [];
+$offset = 100 * (rand()/getRandMax())**4;
+$scale = 100 * (rand()/getRandMax())**2;
+$volatility = 0.5 * (rand()/getRandMax())**3;
+for ($n = 0, $current = $offset + 0.5 * $scale; $n < 96; $n++) {
+  $current -= $offset;
+  $current *= 1 + $volatility * (rand()/getRandMax() - 0.5);
+  $current += $offset;
+  $chartData[$n] = $current;
+}
+
+$chart = new NeatCharts\LineChart($chartData, [
+  'width'=>800,
+  'height'=>250,
+  'lineColor'=>'#F00',
+  'labelColor'=>'#222',
+  'smoothed'=>false,
+  'fontSize'=>14
+]);
+echo $chart->render();
+?>
+        <figcaption>Random generated data, loaded right in the page</figcaption>
+      </figure>
+    </section>
+  </main>
+</body>
+</html>
