# \[APP\]\[Pro\] Dashboard Studio - A completely free-form dashboard designer

**URL:** <https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169>\
**Category:** Apps\
**Tags:** dashboard, homey-pro\
**Created:** [February 15, 2026, 7:45pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169 "2026-02-15T19:45:30Z")\
**Posts on this page:** 1\
**Showing post:** 677

<div class="post-metadata">

**Author:** ![Amersfoort](https://avatars.discourse-cdn.com/v4/letter/a/94ad74/32.png) [@Amersfoort](https://community.homey.app/u/Amersfoort)\
**Post date:** [April 10, 2026, 3:40pm UTC](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169/677 "2026-04-10T15:40:49Z")

</div>

I’m using Raw svg code in 2 images with the following snippet code.

```auto
{
  "snippetHeader": "Dashboard Studio Snippet",
  "snippetType": "widget-snippet",
  "snippetFormatVersion": 1,
  "version": "1.6.3",
  "source": {
    "dashboardName": "Dash3",
    "page": 1,
    "createdAt": "2026-04-10T15:28:53.239Z"
  },
  "master": {
    "currentPage": 1
  },
  "widgets": {
    "image_799582892": {
      "type": "image",
      "overrides": {
        "x": 240,
        "y": 410,
        "width": 710,
        "height": 60,
        "zIndex": 1,
        "page": "1",
        "sourceType": "svg",
        "url": "images/placeholder.png",
        "svgRaw": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 730 20\" width=\"730\" height=\"20\">\n <defs>\n <linearGradient id=\"rainbowGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" stop-color=\"hsl(0, 100%, 50%)\" />\n <stop offset=\"16.67%\" stop-color=\"hsl(60, 100%, 50%)\" />\n <stop offset=\"33.33%\" stop-color=\"hsl(120, 100%, 50%)\" />\n <stop offset=\"50%\" stop-color=\"hsl(180, 100%, 50%)\" />\n <stop offset=\"66.67%\" stop-color=\"hsl(240, 100%, 50%)\" />\n <stop offset=\"83.33%\" stop-color=\"hsl(300, 100%, 50%)\" />\n <stop offset=\"100%\" stop-color=\"hsl(360, 100%, 50%)\" />\n </linearGradient>\n <filter id=\"glow\">\n <feGaussianBlur stdDeviation=\"6\" result=\"blur\"/>\n <feMerge>\n <feMergeNode in=\"blur\"/>\n <feMergeNode in=\"SourceGraphic\"/>\n </feMerge>\n </filter>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"730\" height=\"20\" rx=\"0\" ry=\"0\" fill=\"url(#rainbowGradient)\" filter=\"url(#glow)\"/>\n</svg>",
        "moveX": 0,
        "moveY": 0,
        "label": "",
        "liveRefresh": false,
        "refreshInterval": 1,
        "intervalUnit": "seconds",
        "metaName": "Second"
      },
      "bindings": {}
    },
    "image_436964341": {
      "type": "image",
      "overrides": {
        "x": 240,
        "y": 340,
        "width": 710,
        "height": 60,
        "zIndex": 1,
        "page": "1",
        "sourceType": "svg",
        "url": "images/placeholder.png",
        "svgRaw": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 730 20\" width=\"730\" height=\"20\">\n <defs>\n <linearGradient id=\"rainbowGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n <stop offset=\"0%\" stop-color=\"#cce7f6\" />\n <stop offset=\"100%\" stop-color=\"#ffbf00\" />\n </linearGradient>\n </defs>\n <rect x=\"0\" y=\"0\" width=\"730\" height=\"20\" rx=\"0\" ry=\"0\" fill=\"url(#rainbowGradient)\"/>\n</svg>\n",
        "moveX": 0,
        "moveY": 0,
        "label": "",
        "liveRefresh": false,
        "refreshInterval": 1,
        "intervalUnit": "seconds",
        "metaName": "First"
      },
      "bindings": {}
    }
  }
}

```

One image should be this:  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/7/1/715c59c1c9596c4cb8f405bd90fc40cc20d533a1.png)  
And the other one like this:  
 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/optimized/3X/7/1/71212b1751280c7f8979cb6221b419e82bd52317_2_690x77.png)

Somehow these svg images are linked, so I see two times the same image, depending on the defining order. It sounds strange and it is strange to me. I would like to know what is happening, and how to solve this.

EDIT:  
The solution is: both had a linearGradient called “rainbowGradient”. When I change this name in one of the svg’s the problem has solved.  
Apparently, these SVG codes do not work completely independently of each other.

---

_[View the full topic](https://community.homey.app/t/app-pro-dashboard-studio-a-completely-free-form-dashboard-designer/151169)._