From e51949313b1ef84c2564dbc3d79b979c05095d61 Mon Sep 17 00:00:00 2001
From: Alex Yatskov <alex@foosoft.net>
Date: Thu, 30 Oct 2014 18:30:30 +0900
Subject: [PATCH] More work on gradients

---
 client/html/index.html | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/html/index.html b/client/html/index.html
index d680e96..3dc7d5f 100644
--- a/client/html/index.html
+++ b/client/html/index.html
@@ -113,14 +113,26 @@
             </div>
 
             <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
+                <defs>
+                    <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                        <stop offset="0%" stop-color="#ffffff"/>
+                        <stop offset="100%" stop-color="#000000"/>
+                    </linearGradient>
+                </defs>
+
                 <symbol id="graph">
-                    <rect x="0" y="0" height="500" width="100" style="stroke: #000000; fill: #607080"/>
-                    <rect x="10" y="10" height="100" width="100" style="stroke: #000000; fill: #607080"/>
-                    <rect x="10" y="10" height="100" width="100" style="stroke: #000000; fill: #607080"/>
-                    <rect x="10" y="10" height="100" width="100" style="stroke: #000000; fill: #607080"/>
+                    <rect x="5" y="0" height="490" width="90" style="stroke: #d3d7cf; fill: #eeeeec"/>
+                    <rect x="5" y="0" height="245" width="90" style="fill: #cc0000"/>
+                    <rect x="90" y="0" height="490" width="10" style="stroke: #d3d7cf; fill: url(#gradient)"/>
+                    <rect x="0" y="490" height="20" width="100" style="fill: #d3d7cf;"/>
+                    <line x1="0" y1="245" x2="5" y2="245" style="stroke: #888a85;"/>
+                    <text x="55" y="500" dominant-baseline="middle" text-anchor="middle">label</text>
                 </symbol>
 
                 <use xlink:href="#graph" x="0" y="0"/>
+                <use xlink:href="#graph" x="110" y="0"/>
+                <use xlink:href="#graph" x="220" y="0"/>
+                <use xlink:href="#graph" x="330" y="0"/>
             </svg>
 
             <!-- query output -->