diff --git a/player/index.html b/player/index.html
index fe0b176..90f366f 100644
--- a/player/index.html
+++ b/player/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <style>
         body, html{
-            background-color:#fff;
+            background-color:#ff0;
             margin: 0px;
             height: 100%;
             overflow-x: hidden;
@@ -174,19 +174,24 @@
         renderer: 'svg',
         loop: false,
         autoplay: false,
-        initialSegment: [10, 11],
         rendererSettings: {
             progressiveLoad:true,
             preserveAspectRatio: 'xMidYMid meet',
             imagePreserveAspectRatio: 'xMidYMid meet',
             title: 'TEST TITLE',
             description: 'TEST DESCRIPTION',
+            filterSize: {
+                width: '800%',
+                height: '800%',
+                x: '-100%',
+                y: '-100%',
+            }
         },
         path: 'exports/render/data.json'
     };
     // lottie.setQuality('low');
     anim = lottie.loadAnimation(animData);
-    anim.setSubframe(false);
+    // anim.setSubframe(false);
     anim.onError = function(errorType, nativeError, errorProps) {
         console.log(errorType)
     }
diff --git a/player/js/elements/svgElements/effects/SVGDropShadowEffect.js b/player/js/elements/svgElements/effects/SVGDropShadowEffect.js
index 25d2980..a57ae7b 100644
--- a/player/js/elements/svgElements/effects/SVGDropShadowEffect.js
+++ b/player/js/elements/svgElements/effects/SVGDropShadowEffect.js
@@ -1,8 +1,9 @@
-function SVGDropShadowEffect(filter, filterManager){
-    filter.setAttribute('x','-100%');
-    filter.setAttribute('y','-100%');
-    filter.setAttribute('width','400%');
-    filter.setAttribute('height','400%');
+function SVGDropShadowEffect(filter, filterManager) {
+    var filterSize = filterManager.container.globalData.renderConfig.filterSize
+    filter.setAttribute('x', filterSize.x);
+    filter.setAttribute('y', filterSize.y);
+    filter.setAttribute('width', filterSize.width);
+    filter.setAttribute('height', filterSize.height);
     this.filterManager = filterManager;
 
     var feGaussianBlur = createNS('feGaussianBlur');
diff --git a/player/js/renderers/HybridRenderer.js b/player/js/renderers/HybridRenderer.js
index 0cc3e88..fe66ed0 100644
--- a/player/js/renderers/HybridRenderer.js
+++ b/player/js/renderers/HybridRenderer.js
@@ -5,7 +5,13 @@
     this.renderConfig = {
         className: (config && config.className) || '',
         imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
-        hideOnTransparent: (config && config.hideOnTransparent === false) ? false : true
+        hideOnTransparent: (config && config.hideOnTransparent === false) ? false : true,
+        filterSize: {
+            width: config && config.filterSize && config.filterSize.width || '400%',
+            height: config && config.filterSize && config.filterSize.height || '400%',
+            x: config && config.filterSize && config.filterSize.x || '-100%',
+            y: config && config.filterSize && config.filterSize.y || '-100%',
+        }
     };
     this.globalData = {
         _mdf: false,
diff --git a/player/js/renderers/SVGRenderer.js b/player/js/renderers/SVGRenderer.js
index 86838a2..9c672ab 100644
--- a/player/js/renderers/SVGRenderer.js
+++ b/player/js/renderers/SVGRenderer.js
@@ -37,7 +37,13 @@
         viewBoxSize: (config && config.viewBoxSize) || false,
         className: (config && config.className) || '',
         id: (config && config.id) || '',
-        focusable: config && config.focusable
+        focusable: config && config.focusable,
+        filterSize: {
+            width: config && config.filterSize && config.filterSize.width || '100%',
+            height: config && config.filterSize && config.filterSize.height || '100%',
+            x: config && config.filterSize && config.filterSize.x || '0%',
+            y: config && config.filterSize && config.filterSize.y || '0%',
+        }
     };
 
     this.globalData = {