From 7deaeea2f6dc56cf9453c1e813948cdcbbe50166 Mon Sep 17 00:00:00 2001
From: Carl Kittelberger <icedream@icedream.pw>
Date: Sun, 20 Aug 2017 00:23:35 +0200
Subject: [PATCH] Implement some shadowing in ProgressCircle.

---
 src/ProgressCircle.jsx | 39 +++++++++++++++++++++++++++++++++++++--
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/ProgressCircle.jsx b/src/ProgressCircle.jsx
index 71b18c8..319c928 100644
--- a/src/ProgressCircle.jsx
+++ b/src/ProgressCircle.jsx
@@ -16,7 +16,13 @@ const ProgressCircle = ({
   const width = size;
   const height = size;
 
-  const viewBox = [0, 0, width, height].join(' ');
+  const extraWidth = width * 0.1;
+  const extraHeight = height * 0.1;
+
+  const viewBox = [
+    -extraWidth, -extraHeight,
+    width + (2 * extraWidth), height + (2 * extraHeight),
+  ].join(' ');
 
   const cx = width / 2;
   const cy = height / 2;
@@ -30,6 +36,8 @@ const ProgressCircle = ({
   const strokeDasharray = strokeLength;
   const strokeDashoffset = strokeLength * (1 - finalProgress);
 
+  const dropShadowDefId = 'dropshadow';
+
   return (
     <div
       className={style.progressCircleContainer}
@@ -38,10 +46,37 @@ const ProgressCircle = ({
         height: `${height}px`,
       }}
     >
-      <svg className={style.progressCircle} {...{ width, height, viewBox }}>
+      <svg
+        className={style.progressCircle}
+        style={{
+          margin: [
+            -extraHeight,
+            -extraWidth,
+          ].join(' '),
+        }}
+        {...{ viewBox }}
+      >
+        <defs>
+          <filter
+            id={dropShadowDefId}
+            height={height + extraHeight}
+            width={width + extraWidth}
+          >
+            <feGaussianBlur in="SourceAlpha" stdDeviation="3" /> {/* stdDeviation is how much to blur */}
+            <feOffset dx="0" dy="0" result="offsetblur" /> {/* how much to offset */}
+            <feComponentTransfer>
+              <feFuncA type="linear" slope="2.0" />
+            </feComponentTransfer>
+            <feMerge>
+              <feMergeNode /> {/* this contains the offset blurred image */}
+              <feMergeNode in="SourceGraphic" /> {/* this contains the element that the filter is applied to  */}
+            </feMerge>
+          </filter>
+        </defs>
         <circle
           fill="none"
           stroke={backStroke}
+          filter={`url(#${dropShadowDefId})`}
           {...{ cx, cy, r, strokeWidth }}
         />
         <circle