diff --git a/application/src/main/data/json/system/scada_symbols/bottom-flow-meter.svg b/application/src/main/data/json/system/scada_symbols/bottom-flow-meter.svg
index 93c496f2e3..24927d595e 100644
--- a/application/src/main/data/json/system/scada_symbols/bottom-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/bottom-flow-meter.svg
@@ -38,7 +38,7 @@
     },
     {
       "tag": "fluid",
-      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = ctx.svg.defs().findOne('pattern#liquid');\nif (liquidPattern) {\n    liquidPattern.id(ctx.api.generateElementId());\n    element.fill(liquidPattern);\n} else {\n    liquidPattern = element.reference('fill');\n}\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
+      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = element.reference('fill');\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
       "actions": null
     },
     {
diff --git a/application/src/main/data/json/system/scada_symbols/bottom-right-elbow-pipe.svg b/application/src/main/data/json/system/scada_symbols/bottom-right-elbow-pipe.svg
index b3f6488f3e..4dc6074864 100644
--- a/application/src/main/data/json/system/scada_symbols/bottom-right-elbow-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/bottom-right-elbow-pipe.svg
@@ -8,7 +8,7 @@
   ],
   "widgetSizeX": 1,
   "widgetSizeY": 1,
-  "stateRenderFunction": "var centerLiquidPattern = prepareLiquidPattern('center-liquid', 'center-fluid-background');\nvar horizontalLiquidPattern = prepareLiquidPattern('horizontal-liquid', 'horizontal-fluid');\n\ncenterLiquidPattern.attr({'xlink:href': '#'+horizontalLiquidPattern.id()});\n\nvar verticalLiquidPattern = prepareLiquidPattern('vertical-liquid', 'vertical-fluid');\n\nvar fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\nvar flowAnimationSpeed = ctx.values.flowAnimationSpeed;\n    \nif (horizontalLiquidPattern) {\n    updateLiquidPatternAnimation(horizontalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (verticalLiquidPattern) {\n    updateLiquidPatternAnimation(verticalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (centerLiquidPattern) {\n    updateLiquidPatternAnimation(centerLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, true);\n}\n\nfunction prepareLiquidPattern(patternId, fluidElementTag) {\n    var liquidPattern = ctx.svg.defs().findOne('pattern#'+patternId);\n    var fluidElements = ctx.tags[fluidElementTag];\n\n    if (liquidPattern) {\n        liquidPattern.id(ctx.api.generateElementId());\n        for (var i=0;i<fluidElements.length;i++) {\n            fluidElements[i].fill(liquidPattern);\n        }\n    } else {\n        liquidPattern = fluidElements[0].reference('fill');\n    }\n    return liquidPattern;\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, fluid, flow, flowDirection, flowAnimationSpeed, center) {\n    var elementFluid = liquidPattern.remember('fluid');\n    var elementFlow = null;\n    var elementFlowDirection = null;\n    \n    if (fluid !== elementFluid) {\n        liquidPattern.remember('fluid', fluid);\n        elementFlow = null;\n        elementFlowDirection = null;\n    } else {\n        elementFlow = liquidPattern.remember('flow');\n        elementFlowDirection = liquidPattern.remember('flowDirection');\n    }\n    \n    if (fluid) {\n        if (flow !== elementFlow) {\n            liquidPattern.remember('flow', flow);\n            if (flow) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection, center);\n            } else {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        } else if (flow && elementFlowDirection !== flowDirection) {\n            liquidPattern.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection, center);\n        }\n        if (flow && liquidPattern) {\n            liquidPattern.timeline().speed(flowAnimationSpeed);\n        }\n    } else {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse, center) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    if (center) {\n        var delta = deltaX * 1.17 * Math.cos(45*Math.PI/180);\n        liquidPattern.animate(1000).ease('-').relative(-delta, delta).loop();\n    } else {\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}\n\n",
+  "stateRenderFunction": "var centerLiquidPattern = prepareLiquidPattern('center-fluid-background');\nvar horizontalLiquidPattern = prepareLiquidPattern('horizontal-fluid');\nvar verticalLiquidPattern = prepareLiquidPattern('vertical-fluid');\n\nvar fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\nvar flowAnimationSpeed = ctx.values.flowAnimationSpeed;\n    \nif (horizontalLiquidPattern) {\n    updateLiquidPatternAnimation(horizontalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (verticalLiquidPattern) {\n    updateLiquidPatternAnimation(verticalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (centerLiquidPattern) {\n    updateLiquidPatternAnimation(centerLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, true);\n}\n\nfunction prepareLiquidPattern(fluidElementTag) {\n    return ctx.tags[fluidElementTag][0].reference('fill');\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, fluid, flow, flowDirection, flowAnimationSpeed, center) {\n    var elementFluid = liquidPattern.remember('fluid');\n    var elementFlow = null;\n    var elementFlowDirection = null;\n    \n    if (fluid !== elementFluid) {\n        liquidPattern.remember('fluid', fluid);\n        elementFlow = null;\n        elementFlowDirection = null;\n    } else {\n        elementFlow = liquidPattern.remember('flow');\n        elementFlowDirection = liquidPattern.remember('flowDirection');\n    }\n    \n    if (fluid) {\n        if (flow !== elementFlow) {\n            liquidPattern.remember('flow', flow);\n            if (flow) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection, center);\n            } else {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        } else if (flow && elementFlowDirection !== flowDirection) {\n            liquidPattern.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection, center);\n        }\n        if (flow && liquidPattern) {\n            liquidPattern.timeline().speed(flowAnimationSpeed);\n        }\n    } else {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse, center) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    if (center) {\n        var delta = deltaX * 1.17 * Math.cos(45*Math.PI/180);\n        liquidPattern.animate(1000).ease('-').relative(-delta, delta).loop();\n    } else {\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}\n\n",
   "tags": [
     {
       "tag": "center-fluid",
diff --git a/application/src/main/data/json/system/scada_symbols/bottom-tee-pipe.svg b/application/src/main/data/json/system/scada_symbols/bottom-tee-pipe.svg
index 9e44380509..67eb7d3472 100644
--- a/application/src/main/data/json/system/scada_symbols/bottom-tee-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/bottom-tee-pipe.svg
@@ -8,7 +8,7 @@
   ],
   "widgetSizeX": 1,
   "widgetSizeY": 1,
-  "stateRenderFunction": "var leftLiquidPattern = prepareLiquidPattern('left-liquid', 'left-fluid');\nvar rightLiquidPattern = prepareLiquidPattern('right-liquid', 'right-fluid');\nvar bottomLiquidPattern = prepareLiquidPattern('bottom-liquid', 'bottom-fluid');\n\nvar genericLiquidPattern = ctx.svg.defs().findOne('pattern#liquid');\nif (genericLiquidPattern) {\n    genericLiquidPattern.id(ctx.api.generateElementId());\n    leftLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n    rightLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n    bottomLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n}\n\nupdateLiquidPatternAnimation(leftLiquidPattern, 'left');\nupdateLiquidPatternAnimation(rightLiquidPattern, 'right');\nupdateLiquidPatternAnimation(bottomLiquidPattern, 'bottom');\n\n\nfunction prepareLiquidPattern(patternId, fluidElementTag) {\n    var liquidPattern = ctx.svg.defs().findOne('pattern#'+patternId);\n    var fluidElements = ctx.tags[fluidElementTag];\n\n    if (liquidPattern) {\n        liquidPattern.id(ctx.api.generateElementId());\n        for (var i=0;i<fluidElements.length;i++) {\n            fluidElements[i].fill(liquidPattern);\n        }\n    } else {\n        liquidPattern = fluidElements[0].reference('fill');\n    }\n    return liquidPattern;\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, prefix) {\n    if (liquidPattern) {\n        var fluid = ctx.values[prefix + 'Fluid'] && !ctx.values.leak;\n        var flow = ctx.values[prefix + 'Flow'];\n        var flowDirection = ctx.values[prefix + 'FlowDirection'];\n        var flowAnimationSpeed = ctx.values[prefix + 'FlowAnimationSpeed'];\n\n        var elementFluid = liquidPattern.remember('fluid');\n        var elementFlow = null;\n        var elementFlowDirection = null;\n        \n        if (fluid !== elementFluid) {\n            liquidPattern.remember('fluid', fluid);\n            elementFlow = null;\n            elementFlowDirection = null;\n        } else {\n            elementFlow = liquidPattern.remember('flow');\n            elementFlowDirection = liquidPattern.remember('flowDirection');\n        }\n        \n        if (fluid) {\n            if (flow !== elementFlow) {\n                liquidPattern.remember('flow', flow);\n                if (flow) {\n                    liquidPattern.remember('flowDirection', flowDirection);\n                    animateFlow(liquidPattern, flowDirection);\n                } else {\n                    ctx.api.resetAnimation(liquidPattern);\n                }\n            } else if (flow && elementFlowDirection !== flowDirection) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection);\n            }\n            if (flow && liquidPattern) {\n                liquidPattern.timeline().speed(flowAnimationSpeed);\n            }\n        } else {\n            ctx.api.resetAnimation(liquidPattern);\n        }\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n}\n\n",
+  "stateRenderFunction": "var leftLiquidPattern = prepareLiquidPattern('left-fluid');\nvar rightLiquidPattern = prepareLiquidPattern('right-fluid');\nvar bottomLiquidPattern = prepareLiquidPattern('bottom-fluid');\n\nupdateLiquidPatternAnimation(leftLiquidPattern, 'left');\nupdateLiquidPatternAnimation(rightLiquidPattern, 'right');\nupdateLiquidPatternAnimation(bottomLiquidPattern, 'bottom');\n\n\nfunction prepareLiquidPattern(fluidElementTag) {\n    return ctx.tags[fluidElementTag][0].reference('fill');\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, prefix) {\n    if (liquidPattern) {\n        var fluid = ctx.values[prefix + 'Fluid'] && !ctx.values.leak;\n        var flow = ctx.values[prefix + 'Flow'];\n        var flowDirection = ctx.values[prefix + 'FlowDirection'];\n        var flowAnimationSpeed = ctx.values[prefix + 'FlowAnimationSpeed'];\n\n        var elementFluid = liquidPattern.remember('fluid');\n        var elementFlow = null;\n        var elementFlowDirection = null;\n        \n        if (fluid !== elementFluid) {\n            liquidPattern.remember('fluid', fluid);\n            elementFlow = null;\n            elementFlowDirection = null;\n        } else {\n            elementFlow = liquidPattern.remember('flow');\n            elementFlowDirection = liquidPattern.remember('flowDirection');\n        }\n        \n        if (fluid) {\n            if (flow !== elementFlow) {\n                liquidPattern.remember('flow', flow);\n                if (flow) {\n                    liquidPattern.remember('flowDirection', flowDirection);\n                    animateFlow(liquidPattern, flowDirection);\n                } else {\n                    ctx.api.resetAnimation(liquidPattern);\n                }\n            } else if (flow && elementFlowDirection !== flowDirection) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection);\n            }\n            if (flow && liquidPattern) {\n                liquidPattern.timeline().speed(flowAnimationSpeed);\n            }\n        } else {\n            ctx.api.resetAnimation(liquidPattern);\n        }\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n}\n\n",
   "tags": [
     {
       "tag": "bottom-fluid",
diff --git a/application/src/main/data/json/system/scada_symbols/cross-pipe.svg b/application/src/main/data/json/system/scada_symbols/cross-pipe.svg
index bfed29df3a..9edf91c686 100644
--- a/application/src/main/data/json/system/scada_symbols/cross-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/cross-pipe.svg
@@ -8,7 +8,7 @@
   ],
   "widgetSizeX": 1,
   "widgetSizeY": 1,
-  "stateRenderFunction": "var leftLiquidPattern = prepareLiquidPattern('left-liquid', 'left-fluid');\nvar rightLiquidPattern = prepareLiquidPattern('right-liquid', 'right-fluid');\nvar topLiquidPattern = prepareLiquidPattern('top-liquid', 'top-fluid');\nvar bottomLiquidPattern = prepareLiquidPattern('bottom-liquid', 'bottom-fluid');\n\nvar genericLiquidPattern = ctx.svg.defs().findOne('pattern#liquid');\nif (genericLiquidPattern) {\n    genericLiquidPattern.id(ctx.api.generateElementId());\n    leftLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n    rightLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n    topLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n    bottomLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n}\n\nupdateLiquidPatternAnimation(leftLiquidPattern, 'left');\nupdateLiquidPatternAnimation(rightLiquidPattern, 'right');\nupdateLiquidPatternAnimation(topLiquidPattern, 'top');\nupdateLiquidPatternAnimation(bottomLiquidPattern, 'bottom');\n\n\nfunction prepareLiquidPattern(patternId, fluidElementTag) {\n    var liquidPattern = ctx.svg.defs().findOne('pattern#'+patternId);\n    var fluidElements = ctx.tags[fluidElementTag];\n\n    if (liquidPattern) {\n        liquidPattern.id(ctx.api.generateElementId());\n        for (var i=0;i<fluidElements.length;i++) {\n            fluidElements[i].fill(liquidPattern);\n        }\n    } else {\n        liquidPattern = fluidElements[0].reference('fill');\n    }\n    return liquidPattern;\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, prefix) {\n    if (liquidPattern) {\n        var fluid = ctx.values[prefix + 'Fluid'] && !ctx.values.leak;\n        var flow = ctx.values[prefix + 'Flow'];\n        var flowDirection = ctx.values[prefix + 'FlowDirection'];\n        var flowAnimationSpeed = ctx.values[prefix + 'FlowAnimationSpeed'];\n\n        var elementFluid = liquidPattern.remember('fluid');\n        var elementFlow = null;\n        var elementFlowDirection = null;\n        \n        if (fluid !== elementFluid) {\n            liquidPattern.remember('fluid', fluid);\n            elementFlow = null;\n            elementFlowDirection = null;\n        } else {\n            elementFlow = liquidPattern.remember('flow');\n            elementFlowDirection = liquidPattern.remember('flowDirection');\n        }\n        \n        if (fluid) {\n            if (flow !== elementFlow) {\n                liquidPattern.remember('flow', flow);\n                if (flow) {\n                    liquidPattern.remember('flowDirection', flowDirection);\n                    animateFlow(liquidPattern, flowDirection);\n                } else {\n                    ctx.api.resetAnimation(liquidPattern);\n                }\n            } else if (flow && elementFlowDirection !== flowDirection) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection);\n            }\n            if (flow && liquidPattern) {\n                liquidPattern.timeline().speed(flowAnimationSpeed);\n            }\n        } else {\n            ctx.api.resetAnimation(liquidPattern);\n        }\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n}\n\n",
+  "stateRenderFunction": "var leftLiquidPattern = prepareLiquidPattern('left-fluid');\nvar rightLiquidPattern = prepareLiquidPattern('right-fluid');\nvar topLiquidPattern = prepareLiquidPattern('top-fluid');\nvar bottomLiquidPattern = prepareLiquidPattern('bottom-fluid');\n\nupdateLiquidPatternAnimation(leftLiquidPattern, 'left');\nupdateLiquidPatternAnimation(rightLiquidPattern, 'right');\nupdateLiquidPatternAnimation(topLiquidPattern, 'top');\nupdateLiquidPatternAnimation(bottomLiquidPattern, 'bottom');\n\nfunction prepareLiquidPattern(fluidElementTag) {\n    return ctx.tags[fluidElementTag][0].reference('fill');\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, prefix) {\n    if (liquidPattern) {\n        var fluid = ctx.values[prefix + 'Fluid'] && !ctx.values.leak;\n        var flow = ctx.values[prefix + 'Flow'];\n        var flowDirection = ctx.values[prefix + 'FlowDirection'];\n        var flowAnimationSpeed = ctx.values[prefix + 'FlowAnimationSpeed'];\n\n        var elementFluid = liquidPattern.remember('fluid');\n        var elementFlow = null;\n        var elementFlowDirection = null;\n        \n        if (fluid !== elementFluid) {\n            liquidPattern.remember('fluid', fluid);\n            elementFlow = null;\n            elementFlowDirection = null;\n        } else {\n            elementFlow = liquidPattern.remember('flow');\n            elementFlowDirection = liquidPattern.remember('flowDirection');\n        }\n        \n        if (fluid) {\n            if (flow !== elementFlow) {\n                liquidPattern.remember('flow', flow);\n                if (flow) {\n                    liquidPattern.remember('flowDirection', flowDirection);\n                    animateFlow(liquidPattern, flowDirection);\n                } else {\n                    ctx.api.resetAnimation(liquidPattern);\n                }\n            } else if (flow && elementFlowDirection !== flowDirection) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection);\n            }\n            if (flow && liquidPattern) {\n                liquidPattern.timeline().speed(flowAnimationSpeed);\n            }\n        } else {\n            ctx.api.resetAnimation(liquidPattern);\n        }\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n}\n\n",
   "tags": [
     {
       "tag": "bottom-fluid",
diff --git a/application/src/main/data/json/system/scada_symbols/horizontal-inline-flow-meter.svg b/application/src/main/data/json/system/scada_symbols/horizontal-inline-flow-meter.svg
index 8b34deaffd..7028a3f854 100644
--- a/application/src/main/data/json/system/scada_symbols/horizontal-inline-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/horizontal-inline-flow-meter.svg
@@ -38,7 +38,7 @@
     },
     {
       "tag": "fluid",
-      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = ctx.svg.defs().findOne('pattern#liquid');\nif (liquidPattern) {\n    liquidPattern.id(ctx.api.generateElementId());\n    element.fill(liquidPattern);\n} else {\n    liquidPattern = element.reference('fill');\n}\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
+      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = element.reference('fill');\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
       "actions": null
     },
     {
diff --git a/application/src/main/data/json/system/scada_symbols/horizontal-pipe.svg b/application/src/main/data/json/system/scada_symbols/horizontal-pipe.svg
index d2ddc67657..f166c403b2 100644
--- a/application/src/main/data/json/system/scada_symbols/horizontal-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/horizontal-pipe.svg
@@ -11,7 +11,7 @@
   "tags": [
     {
       "tag": "fluid",
-      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = ctx.svg.defs().findOne('pattern#liquid');\nif (liquidPattern) {\n    liquidPattern.id(ctx.api.generateElementId());\n    element.fill(liquidPattern);\n} else {\n    liquidPattern = element.reference('fill');\n}\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
+      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = element.reference('fill');\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
       "actions": null
     },
     {
@@ -240,8 +240,7 @@
       "step": null
     }
   ]
-}]]></tb:metadata>
-<path d="m186 136h-172v-72h172z" fill="#fff" tb:tag="pipe-background"/><path d="m186 136h-172v-72h172z" fill="url(#paint0_linear_955_27716)"/><g stroke-width="3">
+}]]></tb:metadata><path d="m186 136h-172v-72h172z" fill="#fff" tb:tag="pipe-background"/><path d="m186 136h-172v-72h172z" fill="url(#paint0_linear_955_27716)"/><g stroke-width="3">
   <path d="m184.5 134.5h-169v-69h169z" stroke="#000" stroke-opacity=".12"/>
   <rect transform="scale(-1)" x="-198.5" y="-148.5" width="11.286" height="97" rx="5.6429" fill="#d9d9d9" stroke="#727171"/>
   <rect transform="scale(-1)" x="-12.5" y="-148.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171"/>
diff --git a/application/src/main/data/json/system/scada_symbols/left-bottom-elbow-pipe.svg b/application/src/main/data/json/system/scada_symbols/left-bottom-elbow-pipe.svg
index cd9b5f1b7a..6179153171 100644
--- a/application/src/main/data/json/system/scada_symbols/left-bottom-elbow-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/left-bottom-elbow-pipe.svg
@@ -1,4 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" fill="none" version="1.1" viewBox="0 0 200 200"><tb:metadata xmlns=""><![CDATA[{
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" fill="none" version="1.1" viewBox="0 0 200 200">
+<tb:metadata xmlns=""><![CDATA[{
   "title": "Left bottom elbow pipe",
   "description": "Left bottom elbow pipe with fluid and leak visualizations.",
   "searchTags": [
@@ -7,7 +8,7 @@
   ],
   "widgetSizeX": 1,
   "widgetSizeY": 1,
-  "stateRenderFunction": "var centerLiquidPattern = prepareLiquidPattern('center-liquid', 'center-fluid-background');\nvar horizontalLiquidPattern = prepareLiquidPattern('horizontal-liquid', 'horizontal-fluid');\n\ncenterLiquidPattern.attr({'xlink:href': '#'+horizontalLiquidPattern.id()});\n\nvar verticalLiquidPattern = prepareLiquidPattern('vertical-liquid', 'vertical-fluid');\n\nvar fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\nvar flowAnimationSpeed = ctx.values.flowAnimationSpeed;\n    \nif (horizontalLiquidPattern) {\n    updateLiquidPatternAnimation(horizontalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (verticalLiquidPattern) {\n    updateLiquidPatternAnimation(verticalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (centerLiquidPattern) {\n    updateLiquidPatternAnimation(centerLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, true);\n}\n\nfunction prepareLiquidPattern(patternId, fluidElementTag) {\n    var liquidPattern = ctx.svg.defs().findOne('pattern#'+patternId);\n    var fluidElements = ctx.tags[fluidElementTag];\n\n    if (liquidPattern) {\n        liquidPattern.id(ctx.api.generateElementId());\n        for (var i=0;i<fluidElements.length;i++) {\n            fluidElements[i].fill(liquidPattern);\n        }\n    } else {\n        liquidPattern = fluidElements[0].reference('fill');\n    }\n    return liquidPattern;\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, fluid, flow, flowDirection, flowAnimationSpeed, center) {\n    var elementFluid = liquidPattern.remember('fluid');\n    var elementFlow = null;\n    var elementFlowDirection = null;\n    \n    if (fluid !== elementFluid) {\n        liquidPattern.remember('fluid', fluid);\n        elementFlow = null;\n        elementFlowDirection = null;\n    } else {\n        elementFlow = liquidPattern.remember('flow');\n        elementFlowDirection = liquidPattern.remember('flowDirection');\n    }\n    \n    if (fluid) {\n        if (flow !== elementFlow) {\n            liquidPattern.remember('flow', flow);\n            if (flow) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection, center);\n            } else {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        } else if (flow && elementFlowDirection !== flowDirection) {\n            liquidPattern.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection, center);\n        }\n        if (flow && liquidPattern) {\n            liquidPattern.timeline().speed(flowAnimationSpeed);\n        }\n    } else {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse, center) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    if (center) {\n        var delta = deltaX * 1.17 * Math.cos(45*Math.PI/180);\n        liquidPattern.animate(1000).ease('-').relative(-delta, delta).loop();\n    } else {\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}\n\n",
+  "stateRenderFunction": "var centerLiquidPattern = prepareLiquidPattern('center-fluid-background');\nvar horizontalLiquidPattern = prepareLiquidPattern('horizontal-fluid');\nvar verticalLiquidPattern = prepareLiquidPattern('vertical-fluid');\n\nvar fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\nvar flowAnimationSpeed = ctx.values.flowAnimationSpeed;\n    \nif (horizontalLiquidPattern) {\n    updateLiquidPatternAnimation(horizontalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (verticalLiquidPattern) {\n    updateLiquidPatternAnimation(verticalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (centerLiquidPattern) {\n    updateLiquidPatternAnimation(centerLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, true);\n}\n\nfunction prepareLiquidPattern(fluidElementTag) {\n    return ctx.tags[fluidElementTag][0].reference('fill');\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, fluid, flow, flowDirection, flowAnimationSpeed, center) {\n    var elementFluid = liquidPattern.remember('fluid');\n    var elementFlow = null;\n    var elementFlowDirection = null;\n    \n    if (fluid !== elementFluid) {\n        liquidPattern.remember('fluid', fluid);\n        elementFlow = null;\n        elementFlowDirection = null;\n    } else {\n        elementFlow = liquidPattern.remember('flow');\n        elementFlowDirection = liquidPattern.remember('flowDirection');\n    }\n    \n    if (fluid) {\n        if (flow !== elementFlow) {\n            liquidPattern.remember('flow', flow);\n            if (flow) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection, center);\n            } else {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        } else if (flow && elementFlowDirection !== flowDirection) {\n            liquidPattern.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection, center);\n        }\n        if (flow && liquidPattern) {\n            liquidPattern.timeline().speed(flowAnimationSpeed);\n        }\n    } else {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse, center) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    if (center) {\n        var delta = deltaX * 1.17 * Math.cos(45*Math.PI/180);\n        liquidPattern.animate(1000).ease('-').relative(-delta, delta).loop();\n    } else {\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}\n\n",
   "tags": [
     {
       "tag": "center-fluid",
@@ -250,8 +251,7 @@
       "step": null
     }
   ]
-}]]></tb:metadata>
-<g clip-path="url(#clip0_1245_66459)">
+}]]></tb:metadata><g clip-path="url(#clip0_1245_66459)">
   <rect x="14" y="64" width="50" height="72" fill="#fff" tb:tag="pipe-background"/>
   <rect x="14" y="64" width="50" height="72" fill="url(#paint0_linear_1245_66459)" style="fill:url(#paint0_linear_1245_66459)"/>
   <rect x="15.5" y="65.5" width="47" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
diff --git a/application/src/main/data/json/system/scada_symbols/left-flow-meter.svg b/application/src/main/data/json/system/scada_symbols/left-flow-meter.svg
index b1da702871..9ea330b68d 100644
--- a/application/src/main/data/json/system/scada_symbols/left-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/left-flow-meter.svg
@@ -38,7 +38,7 @@
     },
     {
       "tag": "fluid",
-      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = ctx.svg.defs().findOne('pattern#liquid');\nif (liquidPattern) {\n    liquidPattern.id(ctx.api.generateElementId());\n    element.fill(liquidPattern);\n} else {\n    liquidPattern = element.reference('fill');\n}\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
+      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = element.reference('fill');\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
       "actions": null
     },
     {
diff --git a/application/src/main/data/json/system/scada_symbols/left-tee-pipe.svg b/application/src/main/data/json/system/scada_symbols/left-tee-pipe.svg
index a0e01f639b..d124709a68 100644
--- a/application/src/main/data/json/system/scada_symbols/left-tee-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/left-tee-pipe.svg
@@ -8,7 +8,7 @@
   ],
   "widgetSizeX": 1,
   "widgetSizeY": 1,
-  "stateRenderFunction": "var leftLiquidPattern = prepareLiquidPattern('left-liquid', 'left-fluid');\nvar topLiquidPattern = prepareLiquidPattern('top-liquid', 'top-fluid');\nvar bottomLiquidPattern = prepareLiquidPattern('bottom-liquid', 'bottom-fluid');\n\nvar genericLiquidPattern = ctx.svg.defs().findOne('pattern#liquid');\nif (genericLiquidPattern) {\n    genericLiquidPattern.id(ctx.api.generateElementId());\n    leftLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n    topLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n    bottomLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n}\n\nupdateLiquidPatternAnimation(leftLiquidPattern, 'left');\nupdateLiquidPatternAnimation(topLiquidPattern, 'top');\nupdateLiquidPatternAnimation(bottomLiquidPattern, 'bottom');\n\n\nfunction prepareLiquidPattern(patternId, fluidElementTag) {\n    var liquidPattern = ctx.svg.defs().findOne('pattern#'+patternId);\n    var fluidElements = ctx.tags[fluidElementTag];\n\n    if (liquidPattern) {\n        liquidPattern.id(ctx.api.generateElementId());\n        for (var i=0;i<fluidElements.length;i++) {\n            fluidElements[i].fill(liquidPattern);\n        }\n    } else {\n        liquidPattern = fluidElements[0].reference('fill');\n    }\n    return liquidPattern;\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, prefix) {\n    if (liquidPattern) {\n        var fluid = ctx.values[prefix + 'Fluid'] && !ctx.values.leak;\n        var flow = ctx.values[prefix + 'Flow'];\n        var flowDirection = ctx.values[prefix + 'FlowDirection'];\n        var flowAnimationSpeed = ctx.values[prefix + 'FlowAnimationSpeed'];\n\n        var elementFluid = liquidPattern.remember('fluid');\n        var elementFlow = null;\n        var elementFlowDirection = null;\n        \n        if (fluid !== elementFluid) {\n            liquidPattern.remember('fluid', fluid);\n            elementFlow = null;\n            elementFlowDirection = null;\n        } else {\n            elementFlow = liquidPattern.remember('flow');\n            elementFlowDirection = liquidPattern.remember('flowDirection');\n        }\n        \n        if (fluid) {\n            if (flow !== elementFlow) {\n                liquidPattern.remember('flow', flow);\n                if (flow) {\n                    liquidPattern.remember('flowDirection', flowDirection);\n                    animateFlow(liquidPattern, flowDirection);\n                } else {\n                    ctx.api.resetAnimation(liquidPattern);\n                }\n            } else if (flow && elementFlowDirection !== flowDirection) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection);\n            }\n            if (flow && liquidPattern) {\n                liquidPattern.timeline().speed(flowAnimationSpeed);\n            }\n        } else {\n            ctx.api.resetAnimation(liquidPattern);\n        }\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n}\n\n",
+  "stateRenderFunction": "var leftLiquidPattern = prepareLiquidPattern('left-fluid');\nvar topLiquidPattern = prepareLiquidPattern('top-fluid');\nvar bottomLiquidPattern = prepareLiquidPattern('bottom-fluid');\n\nupdateLiquidPatternAnimation(leftLiquidPattern, 'left');\nupdateLiquidPatternAnimation(topLiquidPattern, 'top');\nupdateLiquidPatternAnimation(bottomLiquidPattern, 'bottom');\n\n\nfunction prepareLiquidPattern(fluidElementTag) {\n    return ctx.tags[fluidElementTag][0].reference('fill');\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, prefix) {\n    if (liquidPattern) {\n        var fluid = ctx.values[prefix + 'Fluid'] && !ctx.values.leak;\n        var flow = ctx.values[prefix + 'Flow'];\n        var flowDirection = ctx.values[prefix + 'FlowDirection'];\n        var flowAnimationSpeed = ctx.values[prefix + 'FlowAnimationSpeed'];\n\n        var elementFluid = liquidPattern.remember('fluid');\n        var elementFlow = null;\n        var elementFlowDirection = null;\n        \n        if (fluid !== elementFluid) {\n            liquidPattern.remember('fluid', fluid);\n            elementFlow = null;\n            elementFlowDirection = null;\n        } else {\n            elementFlow = liquidPattern.remember('flow');\n            elementFlowDirection = liquidPattern.remember('flowDirection');\n        }\n        \n        if (fluid) {\n            if (flow !== elementFlow) {\n                liquidPattern.remember('flow', flow);\n                if (flow) {\n                    liquidPattern.remember('flowDirection', flowDirection);\n                    animateFlow(liquidPattern, flowDirection);\n                } else {\n                    ctx.api.resetAnimation(liquidPattern);\n                }\n            } else if (flow && elementFlowDirection !== flowDirection) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection);\n            }\n            if (flow && liquidPattern) {\n                liquidPattern.timeline().speed(flowAnimationSpeed);\n            }\n        } else {\n            ctx.api.resetAnimation(liquidPattern);\n        }\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n}\n\n",
   "tags": [
     {
       "tag": "bottom-fluid",
diff --git a/application/src/main/data/json/system/scada_symbols/left-top-elbow-pipe.svg b/application/src/main/data/json/system/scada_symbols/left-top-elbow-pipe.svg
index 276f3aa004..aa3fe45323 100644
--- a/application/src/main/data/json/system/scada_symbols/left-top-elbow-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/left-top-elbow-pipe.svg
@@ -1,4 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" fill="none" version="1.1" viewBox="0 0 200 200"><tb:metadata xmlns=""><![CDATA[{
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" fill="none" version="1.1" viewBox="0 0 200 200">
+<tb:metadata xmlns=""><![CDATA[{
   "title": "Left top elbow pipe",
   "description": "Left top elbow pipe with fluid and leak visualizations.",
   "searchTags": [
@@ -7,7 +8,7 @@
   ],
   "widgetSizeX": 1,
   "widgetSizeY": 1,
-  "stateRenderFunction": "var centerLiquidPattern = prepareLiquidPattern('center-liquid', 'center-fluid-background');\nvar horizontalLiquidPattern = prepareLiquidPattern('horizontal-liquid', 'horizontal-fluid');\n\ncenterLiquidPattern.attr({'xlink:href': '#'+horizontalLiquidPattern.id()});\n\nvar verticalLiquidPattern = prepareLiquidPattern('vertical-liquid', 'vertical-fluid');\n\nvar fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\nvar flowAnimationSpeed = ctx.values.flowAnimationSpeed;\n    \nif (horizontalLiquidPattern) {\n    updateLiquidPatternAnimation(horizontalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (verticalLiquidPattern) {\n    updateLiquidPatternAnimation(verticalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (centerLiquidPattern) {\n    updateLiquidPatternAnimation(centerLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, true);\n}\n\nfunction prepareLiquidPattern(patternId, fluidElementTag) {\n    var liquidPattern = ctx.svg.defs().findOne('pattern#'+patternId);\n    var fluidElements = ctx.tags[fluidElementTag];\n\n    if (liquidPattern) {\n        liquidPattern.id(ctx.api.generateElementId());\n        for (var i=0;i<fluidElements.length;i++) {\n            fluidElements[i].fill(liquidPattern);\n        }\n    } else {\n        liquidPattern = fluidElements[0].reference('fill');\n    }\n    return liquidPattern;\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, fluid, flow, flowDirection, flowAnimationSpeed, center) {\n    var elementFluid = liquidPattern.remember('fluid');\n    var elementFlow = null;\n    var elementFlowDirection = null;\n    \n    if (fluid !== elementFluid) {\n        liquidPattern.remember('fluid', fluid);\n        elementFlow = null;\n        elementFlowDirection = null;\n    } else {\n        elementFlow = liquidPattern.remember('flow');\n        elementFlowDirection = liquidPattern.remember('flowDirection');\n    }\n    \n    if (fluid) {\n        if (flow !== elementFlow) {\n            liquidPattern.remember('flow', flow);\n            if (flow) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection, center);\n            } else {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        } else if (flow && elementFlowDirection !== flowDirection) {\n            liquidPattern.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection, center);\n        }\n        if (flow && liquidPattern) {\n            liquidPattern.timeline().speed(flowAnimationSpeed);\n        }\n    } else {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse, center) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    if (center) {\n        var delta = deltaX * 1.17 * Math.cos(45*Math.PI/180);\n        liquidPattern.animate(1000).ease('-').relative(delta, -delta).loop();\n    } else {\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}\n\n",
+  "stateRenderFunction": "var centerLiquidPattern = prepareLiquidPattern('center-fluid-background');\nvar horizontalLiquidPattern = prepareLiquidPattern('horizontal-fluid');\nvar verticalLiquidPattern = prepareLiquidPattern('vertical-fluid');\n\nvar fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\nvar flowAnimationSpeed = ctx.values.flowAnimationSpeed;\n    \nif (horizontalLiquidPattern) {\n    updateLiquidPatternAnimation(horizontalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (verticalLiquidPattern) {\n    updateLiquidPatternAnimation(verticalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (centerLiquidPattern) {\n    updateLiquidPatternAnimation(centerLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, true);\n}\n\nfunction prepareLiquidPattern(fluidElementTag) {\n    return ctx.tags[fluidElementTag][0].reference('fill');\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, fluid, flow, flowDirection, flowAnimationSpeed, center) {\n    var elementFluid = liquidPattern.remember('fluid');\n    var elementFlow = null;\n    var elementFlowDirection = null;\n    \n    if (fluid !== elementFluid) {\n        liquidPattern.remember('fluid', fluid);\n        elementFlow = null;\n        elementFlowDirection = null;\n    } else {\n        elementFlow = liquidPattern.remember('flow');\n        elementFlowDirection = liquidPattern.remember('flowDirection');\n    }\n    \n    if (fluid) {\n        if (flow !== elementFlow) {\n            liquidPattern.remember('flow', flow);\n            if (flow) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection, center);\n            } else {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        } else if (flow && elementFlowDirection !== flowDirection) {\n            liquidPattern.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection, center);\n        }\n        if (flow && liquidPattern) {\n            liquidPattern.timeline().speed(flowAnimationSpeed);\n        }\n    } else {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse, center) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    if (center) {\n        var delta = deltaX * 1.17 * Math.cos(45*Math.PI/180);\n        liquidPattern.animate(1000).ease('-').relative(delta, -delta).loop();\n    } else {\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}\n\n",
   "tags": [
     {
       "tag": "center-fluid",
@@ -250,8 +251,7 @@
       "step": null
     }
   ]
-}]]></tb:metadata>
-<g transform="rotate(90,100,100)" clip-path="url(#clip0_1245_66459)">
+}]]></tb:metadata><g transform="rotate(90,100,100)" clip-path="url(#clip0_1245_66459)">
   <rect x="14" y="64" width="50" height="72" fill="#fff" tb:tag="pipe-background"/>
   <rect x="14" y="64" width="50" height="72" fill="url(#paint0_linear_1245_66459)" style="fill:url(#paint0_linear_1245_66459)"/>
   <rect x="15.5" y="65.5" width="47" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
diff --git a/application/src/main/data/json/system/scada_symbols/long-horizontal-pipe.svg b/application/src/main/data/json/system/scada_symbols/long-horizontal-pipe.svg
index ffc77b0ac0..bd3b223251 100644
--- a/application/src/main/data/json/system/scada_symbols/long-horizontal-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/long-horizontal-pipe.svg
@@ -11,7 +11,7 @@
   "tags": [
     {
       "tag": "fluid",
-      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = ctx.svg.defs().findOne('pattern#liquid');\nif (liquidPattern) {\n    liquidPattern.id(ctx.api.generateElementId());\n    element.fill(liquidPattern);\n} else {\n    liquidPattern = element.reference('fill');\n}\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
+      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = element.reference('fill');\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
       "actions": null
     },
     {
diff --git a/application/src/main/data/json/system/scada_symbols/long-vertical-pipe.svg b/application/src/main/data/json/system/scada_symbols/long-vertical-pipe.svg
index 7f4e30edad..769ae94270 100644
--- a/application/src/main/data/json/system/scada_symbols/long-vertical-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/long-vertical-pipe.svg
@@ -11,7 +11,7 @@
   "tags": [
     {
       "tag": "fluid",
-      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = ctx.svg.defs().findOne('pattern#liquid');\nif (liquidPattern) {\n    liquidPattern.id(ctx.api.generateElementId());\n    element.fill(liquidPattern);\n} else {\n    liquidPattern = element.reference('fill');\n}\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
+      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = element.reference('fill');\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
       "actions": null
     },
     {
diff --git a/application/src/main/data/json/system/scada_symbols/right-flow-meter.svg b/application/src/main/data/json/system/scada_symbols/right-flow-meter.svg
index e5df51e561..11684d2cb8 100644
--- a/application/src/main/data/json/system/scada_symbols/right-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/right-flow-meter.svg
@@ -38,7 +38,7 @@
     },
     {
       "tag": "fluid",
-      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = ctx.svg.defs().findOne('pattern#liquid');\nif (liquidPattern) {\n    liquidPattern.id(ctx.api.generateElementId());\n    element.fill(liquidPattern);\n} else {\n    liquidPattern = element.reference('fill');\n}\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
+      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = element.reference('fill');\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
       "actions": null
     },
     {
diff --git a/application/src/main/data/json/system/scada_symbols/right-tee-pipe.svg b/application/src/main/data/json/system/scada_symbols/right-tee-pipe.svg
index 4c84999b1f..fce69fa7a3 100644
--- a/application/src/main/data/json/system/scada_symbols/right-tee-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/right-tee-pipe.svg
@@ -8,7 +8,7 @@
   ],
   "widgetSizeX": 1,
   "widgetSizeY": 1,
-  "stateRenderFunction": "var rightLiquidPattern = prepareLiquidPattern('right-liquid', 'right-fluid');\nvar topLiquidPattern = prepareLiquidPattern('top-liquid', 'top-fluid');\nvar bottomLiquidPattern = prepareLiquidPattern('bottom-liquid', 'bottom-fluid');\n\nvar genericLiquidPattern = ctx.svg.defs().findOne('pattern#liquid');\nif (genericLiquidPattern) {\n    genericLiquidPattern.id(ctx.api.generateElementId());\n    rightLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n    topLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n    bottomLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n}\n\nupdateLiquidPatternAnimation(rightLiquidPattern, 'right');\nupdateLiquidPatternAnimation(topLiquidPattern, 'top');\nupdateLiquidPatternAnimation(bottomLiquidPattern, 'bottom');\n\n\nfunction prepareLiquidPattern(patternId, fluidElementTag) {\n    var liquidPattern = ctx.svg.defs().findOne('pattern#'+patternId);\n    var fluidElements = ctx.tags[fluidElementTag];\n\n    if (liquidPattern) {\n        liquidPattern.id(ctx.api.generateElementId());\n        for (var i=0;i<fluidElements.length;i++) {\n            fluidElements[i].fill(liquidPattern);\n        }\n    } else {\n        liquidPattern = fluidElements[0].reference('fill');\n    }\n    return liquidPattern;\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, prefix) {\n    if (liquidPattern) {\n        var fluid = ctx.values[prefix + 'Fluid'] && !ctx.values.leak;\n        var flow = ctx.values[prefix + 'Flow'];\n        var flowDirection = ctx.values[prefix + 'FlowDirection'];\n        var flowAnimationSpeed = ctx.values[prefix + 'FlowAnimationSpeed'];\n\n        var elementFluid = liquidPattern.remember('fluid');\n        var elementFlow = null;\n        var elementFlowDirection = null;\n        \n        if (fluid !== elementFluid) {\n            liquidPattern.remember('fluid', fluid);\n            elementFlow = null;\n            elementFlowDirection = null;\n        } else {\n            elementFlow = liquidPattern.remember('flow');\n            elementFlowDirection = liquidPattern.remember('flowDirection');\n        }\n        \n        if (fluid) {\n            if (flow !== elementFlow) {\n                liquidPattern.remember('flow', flow);\n                if (flow) {\n                    liquidPattern.remember('flowDirection', flowDirection);\n                    animateFlow(liquidPattern, flowDirection);\n                } else {\n                    ctx.api.resetAnimation(liquidPattern);\n                }\n            } else if (flow && elementFlowDirection !== flowDirection) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection);\n            }\n            if (flow && liquidPattern) {\n                liquidPattern.timeline().speed(flowAnimationSpeed);\n            }\n        } else {\n            ctx.api.resetAnimation(liquidPattern);\n        }\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n}\n\n",
+  "stateRenderFunction": "var rightLiquidPattern = prepareLiquidPattern('right-fluid');\nvar topLiquidPattern = prepareLiquidPattern('top-fluid');\nvar bottomLiquidPattern = prepareLiquidPattern('bottom-fluid');\n\nupdateLiquidPatternAnimation(rightLiquidPattern, 'right');\nupdateLiquidPatternAnimation(topLiquidPattern, 'top');\nupdateLiquidPatternAnimation(bottomLiquidPattern, 'bottom');\n\nfunction prepareLiquidPattern(fluidElementTag) {\n    return ctx.tags[fluidElementTag][0].reference('fill');\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, prefix) {\n    if (liquidPattern) {\n        var fluid = ctx.values[prefix + 'Fluid'] && !ctx.values.leak;\n        var flow = ctx.values[prefix + 'Flow'];\n        var flowDirection = ctx.values[prefix + 'FlowDirection'];\n        var flowAnimationSpeed = ctx.values[prefix + 'FlowAnimationSpeed'];\n\n        var elementFluid = liquidPattern.remember('fluid');\n        var elementFlow = null;\n        var elementFlowDirection = null;\n        \n        if (fluid !== elementFluid) {\n            liquidPattern.remember('fluid', fluid);\n            elementFlow = null;\n            elementFlowDirection = null;\n        } else {\n            elementFlow = liquidPattern.remember('flow');\n            elementFlowDirection = liquidPattern.remember('flowDirection');\n        }\n        \n        if (fluid) {\n            if (flow !== elementFlow) {\n                liquidPattern.remember('flow', flow);\n                if (flow) {\n                    liquidPattern.remember('flowDirection', flowDirection);\n                    animateFlow(liquidPattern, flowDirection);\n                } else {\n                    ctx.api.resetAnimation(liquidPattern);\n                }\n            } else if (flow && elementFlowDirection !== flowDirection) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection);\n            }\n            if (flow && liquidPattern) {\n                liquidPattern.timeline().speed(flowAnimationSpeed);\n            }\n        } else {\n            ctx.api.resetAnimation(liquidPattern);\n        }\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n}\n\n",
   "tags": [
     {
       "tag": "bottom-fluid",
diff --git a/application/src/main/data/json/system/scada_symbols/top-flow-meter.svg b/application/src/main/data/json/system/scada_symbols/top-flow-meter.svg
index bac39d98dc..8b785bcf46 100644
--- a/application/src/main/data/json/system/scada_symbols/top-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/top-flow-meter.svg
@@ -38,7 +38,7 @@
     },
     {
       "tag": "fluid",
-      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = ctx.svg.defs().findOne('pattern#liquid');\nif (liquidPattern) {\n    liquidPattern.id(ctx.api.generateElementId());\n    element.fill(liquidPattern);\n} else {\n    liquidPattern = element.reference('fill');\n}\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
+      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = element.reference('fill');\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
       "actions": null
     },
     {
@@ -733,8 +733,7 @@
       "step": null
     }
   ]
-}]]></tb:metadata>
-<rect x="14" y="264" width="372" height="72" fill="#fff" tb:tag="pipe-background"/><rect x="14" y="264" width="372" height="72" fill="url(#paint0_linear_1253_89545)"/><rect x="15.5" y="265.5" width="369" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="14" y="264" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect x="14" y="264" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><path d="M236 236V264.421L200 296L164 264.421V236H236Z" fill="#fff" tb:tag="pipe-background"/><path d="M236 236V264.421L200 296L164 264.421V236H236Z" fill="url(#paint1_linear_1253_89545)"/><path d="m234.5 237.5v26.242l-34.5 30.263-34.5-30.263v-26.242h69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="387.5" y="251.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/><rect x="1.5" y="251.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/><mask id="path-7-inside-1_1253_89545" fill="white">
+}]]></tb:metadata><rect x="14" y="264" width="372" height="72" fill="#fff" tb:tag="pipe-background"/><rect x="14" y="264" width="372" height="72" fill="url(#paint0_linear_1253_89545)"/><rect x="15.5" y="265.5" width="369" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="14" y="264" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect x="14" y="264" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><path d="M236 236V264.421L200 296L164 264.421V236H236Z" fill="#fff" tb:tag="pipe-background"/><path d="M236 236V264.421L200 296L164 264.421V236H236Z" fill="url(#paint1_linear_1253_89545)"/><path d="m234.5 237.5v26.242l-34.5 30.263-34.5-30.263v-26.242h69z" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect x="387.5" y="251.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/><rect x="1.5" y="251.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171" stroke-width="3"/><mask id="path-7-inside-1_1253_89545" fill="white">
   <path d="m325 125c0 69.036-55.964 125-125 125s-125-55.964-125-125 55.964-125 125-125 125 55.964 125 125zm-236.01 0c0 61.306 49.699 111 111.01 111s111-49.699 111-111c0-61.306-49.699-111.01-111-111.01s-111.01 49.699-111.01 111.01z"/>
  </mask><path d="m325 125c0 69.036-55.964 125-125 125s-125-55.964-125-125 55.964-125 125-125 125 55.964 125 125zm-236.01 0c0 61.306 49.699 111 111.01 111s111-49.699 111-111c0-61.306-49.699-111.01-111-111.01s-111.01 49.699-111.01 111.01z" fill="#4A4848" mask="url(#path-7-inside-1_1253_89545)" stroke="#727171" stroke-width="6" tb:tag="border"/><circle cx="200" cy="125" r="111" fill="#fff" tb:tag="background"/><rect x="119.5" y="105.5" width="161" height="39" rx="3.8571" fill="#4A4848" fill-opacity=".06" tb:tag="border"/><path d="m123.36 104c-2.9419 0-5.3574 2.4155-5.3574 5.3574v31.285c0 2.9419 2.4155 5.3574 5.3574 5.3574h153.29c2.9419 0 5.3574-2.4155 5.3574-5.3574v-31.285c0-2.9419-2.4155-5.3574-5.3574-5.3574zm0 3h153.29c1.3318 0 2.3574 1.0256 2.3574 2.3574v31.285c0 1.3318-1.0256 2.3574-2.3574 2.3574h-153.29c-1.3318 0-2.3574-1.0256-2.3574-2.3574v-31.285c0-1.3318 1.0256-2.3574 2.3574-2.3574z" fill="#4A4848" tb:tag="border"/><circle cx="166" cy="73" r="16" fill="url(#paint2_linear_1253_89545)"/><circle cx="166" cy="73" r="15.5" stroke="#000" stroke-opacity=".12"/><circle cx="234" cy="73" r="16" fill="url(#paint3_linear_1253_89545)"/><circle cx="234" cy="73" r="15.5" stroke="#000" stroke-opacity=".12"/><defs>
   <linearGradient id="paint0_linear_1253_89545" x1="110.72" x2="110.63" y1="264" y2="336.01" gradientUnits="userSpaceOnUse">
diff --git a/application/src/main/data/json/system/scada_symbols/top-right-elbow-pipe.svg b/application/src/main/data/json/system/scada_symbols/top-right-elbow-pipe.svg
index 5537c23bb6..89beca4c85 100644
--- a/application/src/main/data/json/system/scada_symbols/top-right-elbow-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/top-right-elbow-pipe.svg
@@ -1,4 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" fill="none" version="1.1" viewBox="0 0 200 200"><tb:metadata xmlns=""><![CDATA[{
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:tb="https://thingsboard.io/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" fill="none" version="1.1" viewBox="0 0 200 200">
+<tb:metadata xmlns=""><![CDATA[{
   "title": "Top right elbow pipe",
   "description": "Top right elbow pipe with fluid and leak visualizations.",
   "searchTags": [
@@ -7,7 +8,7 @@
   ],
   "widgetSizeX": 1,
   "widgetSizeY": 1,
-  "stateRenderFunction": "var centerLiquidPattern = prepareLiquidPattern('center-liquid', 'center-fluid-background');\nvar horizontalLiquidPattern = prepareLiquidPattern('horizontal-liquid', 'horizontal-fluid');\n\ncenterLiquidPattern.attr({'xlink:href': '#'+horizontalLiquidPattern.id()});\n\nvar verticalLiquidPattern = prepareLiquidPattern('vertical-liquid', 'vertical-fluid');\n\nvar fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\nvar flowAnimationSpeed = ctx.values.flowAnimationSpeed;\n    \nif (horizontalLiquidPattern) {\n    updateLiquidPatternAnimation(horizontalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (verticalLiquidPattern) {\n    updateLiquidPatternAnimation(verticalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (centerLiquidPattern) {\n    updateLiquidPatternAnimation(centerLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, true);\n}\n\nfunction prepareLiquidPattern(patternId, fluidElementTag) {\n    var liquidPattern = ctx.svg.defs().findOne('pattern#'+patternId);\n    var fluidElements = ctx.tags[fluidElementTag];\n\n    if (liquidPattern) {\n        liquidPattern.id(ctx.api.generateElementId());\n        for (var i=0;i<fluidElements.length;i++) {\n            fluidElements[i].fill(liquidPattern);\n        }\n    } else {\n        liquidPattern = fluidElements[0].reference('fill');\n    }\n    return liquidPattern;\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, fluid, flow, flowDirection, flowAnimationSpeed, center) {\n    var elementFluid = liquidPattern.remember('fluid');\n    var elementFlow = null;\n    var elementFlowDirection = null;\n    \n    if (fluid !== elementFluid) {\n        liquidPattern.remember('fluid', fluid);\n        elementFlow = null;\n        elementFlowDirection = null;\n    } else {\n        elementFlow = liquidPattern.remember('flow');\n        elementFlowDirection = liquidPattern.remember('flowDirection');\n    }\n    \n    if (fluid) {\n        if (flow !== elementFlow) {\n            liquidPattern.remember('flow', flow);\n            if (flow) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection, center);\n            } else {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        } else if (flow && elementFlowDirection !== flowDirection) {\n            liquidPattern.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection, center);\n        }\n        if (flow && liquidPattern) {\n            liquidPattern.timeline().speed(flowAnimationSpeed);\n        }\n    } else {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse, center) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    if (center) {\n        var delta = deltaX * 1.17 * Math.cos(45*Math.PI/180);\n        liquidPattern.animate(1000).ease('-').relative(delta, -delta).loop();\n    } else {\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}\n\n",
+  "stateRenderFunction": "var centerLiquidPattern = prepareLiquidPattern('center-fluid-background');\nvar horizontalLiquidPattern = prepareLiquidPattern('horizontal-fluid');\nvar verticalLiquidPattern = prepareLiquidPattern('vertical-fluid');\n\nvar fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\nvar flowAnimationSpeed = ctx.values.flowAnimationSpeed;\n    \nif (horizontalLiquidPattern) {\n    updateLiquidPatternAnimation(horizontalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (verticalLiquidPattern) {\n    updateLiquidPatternAnimation(verticalLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, false);\n}\n\nif (centerLiquidPattern) {\n    updateLiquidPatternAnimation(centerLiquidPattern, fluid, \n                                 flow, flowDirection, flowAnimationSpeed, true);\n}\n\nfunction prepareLiquidPattern(fluidElementTag) {\n    return ctx.tags[fluidElementTag][0].reference('fill');\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, fluid, flow, flowDirection, flowAnimationSpeed, center) {\n    var elementFluid = liquidPattern.remember('fluid');\n    var elementFlow = null;\n    var elementFlowDirection = null;\n    \n    if (fluid !== elementFluid) {\n        liquidPattern.remember('fluid', fluid);\n        elementFlow = null;\n        elementFlowDirection = null;\n    } else {\n        elementFlow = liquidPattern.remember('flow');\n        elementFlowDirection = liquidPattern.remember('flowDirection');\n    }\n    \n    if (fluid) {\n        if (flow !== elementFlow) {\n            liquidPattern.remember('flow', flow);\n            if (flow) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection, center);\n            } else {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        } else if (flow && elementFlowDirection !== flowDirection) {\n            liquidPattern.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection, center);\n        }\n        if (flow && liquidPattern) {\n            liquidPattern.timeline().speed(flowAnimationSpeed);\n        }\n    } else {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse, center) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    if (center) {\n        var delta = deltaX * 1.17 * Math.cos(45*Math.PI/180);\n        liquidPattern.animate(1000).ease('-').relative(delta, -delta).loop();\n    } else {\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}\n\n",
   "tags": [
     {
       "tag": "center-fluid",
@@ -250,8 +251,7 @@
       "step": null
     }
   ]
-}]]></tb:metadata>
-<g transform="rotate(180,100,100)" clip-path="url(#clip0_1245_66459)">
+}]]></tb:metadata><g transform="rotate(180,100,100)" clip-path="url(#clip0_1245_66459)">
   <rect x="14" y="64" width="50" height="72" fill="#fff" tb:tag="pipe-background"/>
   <rect x="14" y="64" width="50" height="72" fill="url(#paint0_linear_1245_66459)" style="fill:url(#paint0_linear_1245_66459)"/>
   <rect x="15.5" y="65.5" width="47" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/>
diff --git a/application/src/main/data/json/system/scada_symbols/top-tee-pipe.svg b/application/src/main/data/json/system/scada_symbols/top-tee-pipe.svg
index 1dfa27e706..96199571ef 100644
--- a/application/src/main/data/json/system/scada_symbols/top-tee-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/top-tee-pipe.svg
@@ -8,7 +8,7 @@
   ],
   "widgetSizeX": 1,
   "widgetSizeY": 1,
-  "stateRenderFunction": "var leftLiquidPattern = prepareLiquidPattern('left-liquid', 'left-fluid');\nvar rightLiquidPattern = prepareLiquidPattern('right-liquid', 'right-fluid');\nvar topLiquidPattern = prepareLiquidPattern('top-liquid', 'top-fluid');\n\nvar genericLiquidPattern = ctx.svg.defs().findOne('pattern#liquid');\nif (genericLiquidPattern) {\n    genericLiquidPattern.id(ctx.api.generateElementId());\n    leftLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n    rightLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n    topLiquidPattern.attr({'xlink:href': '#'+genericLiquidPattern.id()});\n}\n\nupdateLiquidPatternAnimation(leftLiquidPattern, 'left');\nupdateLiquidPatternAnimation(rightLiquidPattern, 'right');\nupdateLiquidPatternAnimation(topLiquidPattern, 'top');\n\n\nfunction prepareLiquidPattern(patternId, fluidElementTag) {\n    var liquidPattern = ctx.svg.defs().findOne('pattern#'+patternId);\n    var fluidElements = ctx.tags[fluidElementTag];\n\n    if (liquidPattern) {\n        liquidPattern.id(ctx.api.generateElementId());\n        for (var i=0;i<fluidElements.length;i++) {\n            fluidElements[i].fill(liquidPattern);\n        }\n    } else {\n        liquidPattern = fluidElements[0].reference('fill');\n    }\n    return liquidPattern;\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, prefix) {\n    if (liquidPattern) {\n        var fluid = ctx.values[prefix + 'Fluid'] && !ctx.values.leak;\n        var flow = ctx.values[prefix + 'Flow'];\n        var flowDirection = ctx.values[prefix + 'FlowDirection'];\n        var flowAnimationSpeed = ctx.values[prefix + 'FlowAnimationSpeed'];\n\n        var elementFluid = liquidPattern.remember('fluid');\n        var elementFlow = null;\n        var elementFlowDirection = null;\n        \n        if (fluid !== elementFluid) {\n            liquidPattern.remember('fluid', fluid);\n            elementFlow = null;\n            elementFlowDirection = null;\n        } else {\n            elementFlow = liquidPattern.remember('flow');\n            elementFlowDirection = liquidPattern.remember('flowDirection');\n        }\n        \n        if (fluid) {\n            if (flow !== elementFlow) {\n                liquidPattern.remember('flow', flow);\n                if (flow) {\n                    liquidPattern.remember('flowDirection', flowDirection);\n                    animateFlow(liquidPattern, flowDirection);\n                } else {\n                    ctx.api.resetAnimation(liquidPattern);\n                }\n            } else if (flow && elementFlowDirection !== flowDirection) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection);\n            }\n            if (flow && liquidPattern) {\n                liquidPattern.timeline().speed(flowAnimationSpeed);\n            }\n        } else {\n            ctx.api.resetAnimation(liquidPattern);\n        }\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n}\n\n",
+  "stateRenderFunction": "var leftLiquidPattern = prepareLiquidPattern('left-fluid');\nvar rightLiquidPattern = prepareLiquidPattern('right-fluid');\nvar topLiquidPattern = prepareLiquidPattern('top-fluid');\n\nupdateLiquidPatternAnimation(leftLiquidPattern, 'left');\nupdateLiquidPatternAnimation(rightLiquidPattern, 'right');\nupdateLiquidPatternAnimation(topLiquidPattern, 'top');\n\n\nfunction prepareLiquidPattern(fluidElementTag) {\n    return ctx.tags[fluidElementTag][0].reference('fill');\n}\n\nfunction updateLiquidPatternAnimation(liquidPattern, prefix) {\n    if (liquidPattern) {\n        var fluid = ctx.values[prefix + 'Fluid'] && !ctx.values.leak;\n        var flow = ctx.values[prefix + 'Flow'];\n        var flowDirection = ctx.values[prefix + 'FlowDirection'];\n        var flowAnimationSpeed = ctx.values[prefix + 'FlowAnimationSpeed'];\n\n        var elementFluid = liquidPattern.remember('fluid');\n        var elementFlow = null;\n        var elementFlowDirection = null;\n        \n        if (fluid !== elementFluid) {\n            liquidPattern.remember('fluid', fluid);\n            elementFlow = null;\n            elementFlowDirection = null;\n        } else {\n            elementFlow = liquidPattern.remember('flow');\n            elementFlowDirection = liquidPattern.remember('flowDirection');\n        }\n        \n        if (fluid) {\n            if (flow !== elementFlow) {\n                liquidPattern.remember('flow', flow);\n                if (flow) {\n                    liquidPattern.remember('flowDirection', flowDirection);\n                    animateFlow(liquidPattern, flowDirection);\n                } else {\n                    ctx.api.resetAnimation(liquidPattern);\n                }\n            } else if (flow && elementFlowDirection !== flowDirection) {\n                liquidPattern.remember('flowDirection', flowDirection);\n                animateFlow(liquidPattern, flowDirection);\n            }\n            if (flow && liquidPattern) {\n                liquidPattern.timeline().speed(flowAnimationSpeed);\n            }\n        } else {\n            ctx.api.resetAnimation(liquidPattern);\n        }\n    }\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    ctx.api.resetAnimation(liquidPattern);\n    var deltaX = forwardElseReverse ? 172 : -172;\n    liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n}\n\n",
   "tags": [
     {
       "tag": "leak",
diff --git a/application/src/main/data/json/system/scada_symbols/vertical-inline-flow-meter.svg b/application/src/main/data/json/system/scada_symbols/vertical-inline-flow-meter.svg
index 1c22c8d117..c4485449ea 100644
--- a/application/src/main/data/json/system/scada_symbols/vertical-inline-flow-meter.svg
+++ b/application/src/main/data/json/system/scada_symbols/vertical-inline-flow-meter.svg
@@ -38,7 +38,7 @@
     },
     {
       "tag": "fluid",
-      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = ctx.svg.defs().findOne('pattern#liquid');\nif (liquidPattern) {\n    liquidPattern.id(ctx.api.generateElementId());\n    element.fill(liquidPattern);\n} else {\n    liquidPattern = element.reference('fill');\n}\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
+      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = element.reference('fill');\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
       "actions": null
     },
     {
@@ -733,8 +733,7 @@
       "step": null
     }
   ]
-}]]></tb:metadata>
-<rect transform="rotate(-90)" x="-386" y="64" width="372" height="72" fill="#fff" tb:tag="pipe-background"/><rect transform="rotate(-90)" x="-386" y="64" width="372" height="72" fill="url(#paint0_linear_1595_101503)" style="fill:url(#paint0_linear_1595_101503)"/><rect transform="rotate(-90)" x="-384.5" y="65.5" width="369" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect transform="rotate(-90)" x="-12.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/><rect transform="rotate(-90)" x="-398.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/><rect transform="rotate(90)" x="14" y="-136" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect transform="rotate(90)" x="14" y="-136" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><defs>
+}]]></tb:metadata><rect transform="rotate(-90)" x="-386" y="64" width="372" height="72" fill="#fff" tb:tag="pipe-background"/><rect transform="rotate(-90)" x="-386" y="64" width="372" height="72" fill="url(#paint0_linear_1595_101503)" style="fill:url(#paint0_linear_1595_101503)"/><rect transform="rotate(-90)" x="-384.5" y="65.5" width="369" height="69" stroke="#000" stroke-opacity=".12" stroke-width="3"/><rect transform="rotate(-90)" x="-12.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/><rect transform="rotate(-90)" x="-398.5" y="51.5" width="11" height="97" rx="5.5" fill="#d9d9d9" stroke="#727171" stroke-width="3"/><rect transform="rotate(90)" x="14" y="-136" width="372" height="72" fill="#1ec1f4" stroke-width="0" style="display: none;" tb:tag="fluid-background"/><rect transform="rotate(90)" x="14" y="-136" width="372" height="72" fill="url(#liquid)" stroke-width="0" style="display: none;" tb:tag="fluid"/><defs>
   <mask id="path-5-inside-1_1595_102361" fill="#ffffff">
    <path d="m300 100c0 55.228-44.772 100-100 100s-100-44.772-100-100 44.772-100 100-100 100 44.772 100 100zm-188 0c0 48.603 39.401 88.004 88.004 88.004s88.004-39.401 88.004-88.004c0-48.604-39.401-88.004-88.004-88.004s-88.004 39.401-88.004 88.004z"/>
   </mask>
diff --git a/application/src/main/data/json/system/scada_symbols/vertical-pipe.svg b/application/src/main/data/json/system/scada_symbols/vertical-pipe.svg
index 18ea6837e0..3f6d912459 100644
--- a/application/src/main/data/json/system/scada_symbols/vertical-pipe.svg
+++ b/application/src/main/data/json/system/scada_symbols/vertical-pipe.svg
@@ -11,7 +11,7 @@
   "tags": [
     {
       "tag": "fluid",
-      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = ctx.svg.defs().findOne('pattern#liquid');\nif (liquidPattern) {\n    liquidPattern.id(ctx.api.generateElementId());\n    element.fill(liquidPattern);\n} else {\n    liquidPattern = element.reference('fill');\n}\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
+      "stateRenderFunction": "var fluid = ctx.values.fluid && !ctx.values.leak;\nvar flow = ctx.values.flow;\nvar flowDirection = ctx.values.flowDirection;\n\nvar elementFluid = element.remember('fluid');\nvar elementFlow = null;\nvar elementFlowDirection = null;\n\nif (fluid !== elementFluid) {\n    element.remember('fluid', fluid);\n    elementFlow = null;\n    elementFlowDirection = null;\n} else {\n    elementFlow = element.remember('flow');\n    elementFlowDirection = element.remember('flowDirection');\n}\n\nvar liquidPattern = element.reference('fill');\n\nif (fluid) {\n    element.show();\n    if (flow !== elementFlow) {\n        element.remember('flow', flow);\n        if (flow) {\n            element.remember('flowDirection', flowDirection);\n            animateFlow(liquidPattern, flowDirection);\n        } else {\n            if (liquidPattern) {\n                ctx.api.resetAnimation(liquidPattern);\n            }\n        }\n    } else if (flow && elementFlowDirection !== flowDirection) {\n        element.remember('flowDirection', flowDirection);\n        animateFlow(liquidPattern, flowDirection);\n    }\n    if (flow && liquidPattern) {\n        liquidPattern.timeline().speed(ctx.values.flowAnimationSpeed);\n    }\n} else {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n    }\n    element.hide();\n}\n\nfunction animateFlow(liquidPattern, forwardElseReverse) {\n    if (liquidPattern) {\n        ctx.api.resetAnimation(liquidPattern);\n        var deltaX = forwardElseReverse ? 172 : -172;\n        liquidPattern.animate(1000).ease('-').relative(deltaX, 0).loop();\n    }\n}",
       "actions": null
     },
     {
@@ -240,8 +240,7 @@
       "step": null
     }
   ]
-}]]></tb:metadata>
-<path d="m64 186v-172h72v172h-72z" fill="#fff" tb:tag="pipe-background"/><path d="m64 186v-172h72v172h-72z" fill="url(#paint0_linear_1245_55957)"/><g stroke-width="3">
+}]]></tb:metadata><path d="m64 186v-172h72v172h-72z" fill="#fff" tb:tag="pipe-background"/><path d="m64 186v-172h72v172h-72z" fill="url(#paint0_linear_1245_55957)"/><g stroke-width="3">
   <path d="m65.5 184.5v-169h69v169h-69z" stroke="#000" stroke-opacity=".12"/>
   <rect transform="rotate(-90 51.5 198.5)" x="51.5" y="198.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171"/>
   <rect transform="rotate(-90 51.5 12.5)" x="51.5" y="12.5" width="11" height="97" rx="5.5" fill="#D9D9D9" stroke="#727171"/>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
index 8beac3fb32..3c4e32abf7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts
@@ -204,6 +204,16 @@ const svgPartsRegex = /(<svg.*?>)(.*)<\/svg>/gms;
 
 const tbNamespaceRegex = /<svg.*(xmlns:tb="https:\/\/thingsboard.io\/svg").*>/gms;
 
+const generateElementId = () => {
+  const id = guid();
+  const firstChar = id.charAt(0);
+  if (firstChar >= '0' && firstChar <= '9') {
+    return 'a' + id;
+  } else {
+    return id;
+  }
+};
+
 export const applyTbNamespaceToSvgContent = (svgContent: string): string => {
   svgPartsRegex.lastIndex = 0;
   let svgRootNode: string;
@@ -536,7 +546,22 @@ export class ScadaSymbolObject {
     for (let i=0;i<elements.length;i++) {
       elements.item(i).remove();
     }
-    this.svgShape = SVG().svg(doc.documentElement.innerHTML);
+    let svgContent = doc.documentElement.innerHTML;
+    const regexp = /\sid="([^"]*)"\s/g;
+    const unique_id_suffix = '_' + generateElementId();
+    const ids: string[] = [];
+    let match = regexp.exec(svgContent);
+    while (match !== null) {
+      ids.push(match[1]);
+      match = regexp.exec(svgContent);
+    }
+    for (const id of ids) {
+      const newId = id + unique_id_suffix;
+      svgContent = svgContent.replace(new RegExp('id="'+id+'"', 'g'), 'id="'+newId+'"');
+      svgContent = svgContent.replace(new RegExp('#'+id, 'g'), '#'+newId);
+    }
+
+    this.svgShape = SVG().svg(svgContent);
     this.svgShape.node.style.overflow = 'hidden';
     this.svgShape.node.style.position = 'absolute';
     this.svgShape.node.style['user-select'] = 'none';
@@ -557,15 +582,7 @@ export class ScadaSymbolObject {
   private init() {
     this.context = {
       api: {
-        generateElementId: () => {
-          const id = guid();
-          const firstChar = id.charAt(0);
-          if (firstChar >= '0' && firstChar <= '9') {
-            return 'a' + id;
-          } else {
-            return id;
-          }
-        },
+        generateElementId: () => generateElementId(),
         formatValue,
         text: this.setElementText.bind(this),
         font: this.setElementFont.bind(this),