cycle_routes: bettern pattern

cycle_routes.json

@@ -73,43 +73,61 @@
         "styles": "default{% if hover %},hover{% endif %}{% if selected %},selected{% endif %}",
         "style": {
             "color": "{{ const[network].color }}",
-            "width": "{% if not dirForward or not dirBackward %}0{% else %}4{% endif %}",
+            "width": "4",
+            "dashArray": "{% if not dirForward or not dirBackward %}13,10{% endif %}",
+            "dashOffset": "{% if dirBackward %}16{% else %}0{% endif %}",
+            "lineCap": "{% if not dirForward or not dirBackward %}butt{% else %}round{% endif %}",
+            "noClip": "{% if not dirForward or not dirBackward %}true{% else %}false{% endif %}",
             "opacity": 1,
             "text": "{{ refs|join(' · ') }}             ",
             "textRepeat": "1",
             "textOffset": "12",
             "textFontWeight": "bold",
             "pattern": "{% if dirForward and dirBackward %}{% else %}arrowHead{% endif %}",
-            "pattern-pixelSize": "4",
-            "pattern-repeat": "7",
-            "pattern-polygon": "",
-            "pattern-path-weight": "2",
-            "pattern-path-color": "{{ const[network].color }}",
-            "pattern-path-angleCorrection": "{% if dirBackward %}180{% else %}0{% endif %}"
+            "pattern-pixelSize": "9",
+            "pattern-repeat": "23",
+            "pattern-offset": "{% if dirBackward %}2{% else %}18.5{% endif %}",
+            "pattern-polygon": "true",
+            "pattern-angleCorrection": "{% if dirBackward %}180{% else %}0{% endif %}",
+            "pattern-path-weight": "0",
+            "pattern-path-fillOpacity": "1",
+            "pattern-path-color": "{{ const[network].color }}"
         },
         "style:hover": {
             "pane": "hover",
-            "width": "{% if hover == 'forward' or hover == 'backward' %}0{% else %}4{% endif %}",
+            "width": "4",
+            "dashArray": "{% if hover == 'forward' or hover == 'backward' %}15,8{% endif %}",
+            "dashOffset": "{% if hover == 'backward' %}16{% else %}0{% endif %}",
+            "lineCap": "{% if hover == 'forward' or hover == 'backward' %}butt{% else %}round{% endif %}",
+            "noClip": "{% if hover == 'forward' or hover == 'backward' %}true{% else %}false{% endif %}",
             "color": "black",
             "pattern": "{% if hover == 'forward' or hover == 'backward' %}arrowHead{% endif %}",
-            "pattern-pixelSize": "4",
-            "pattern-repeat": "7",
-            "pattern-polygon": "",
-            "pattern-path-weight": "2",
-            "pattern-path-color": "black",
-            "pattern-path-angleCorrection": "{% if hover == 'backward' %}180{% else %}0{% endif %}"
+            "pattern-pixelSize": "9",
+            "pattern-repeat": "23",
+            "pattern-offset": "{% if hover == 'backward' %}2{% else %}18.5{% endif %}",
+            "pattern-polygon": "true",
+            "pattern-angleCorrection": "{% if hover == 'backward' %}180{% else %}0{% endif %}",
+            "pattern-path-weight": "0",
+            "pattern-path-fillOpacity": "1",
+            "pattern-path-color": "black"
         },
         "style:selected": {
             "pane": "selected",
-            "width": "{% if selected == 'forward' or selected == 'backward' %}0{% else %}3{% endif %}",
-            "color": "#3f3f3f",
+            "width": "4",
+            "dashArray": "{% if selected == 'forward' or selected == 'backward' %}15,8{% endif %}",
+            "dashOffset": "{% if selected == 'backward' %}16{% else %}0{% endif %}",
+            "lineCap": "{% if selected == 'forward' or selected == 'backward' %}butt{% else %}round{% endif %}",
+            "noClip": "{% if selected == 'forward' or selected == 'backward' %}true{% else %}false{% endif %}",
+            "color": "black",
             "pattern": "{% if selected == 'forward' or selected == 'backward' %}arrowHead{% endif %}",
-            "pattern-pixelSize": "4",
-            "pattern-repeat": "7",
-            "pattern-polygon": "",
-            "pattern-path-weight": "2",
-            "pattern-path-color": "#3f3f3f",
-            "pattern-path-angleCorrection": "{% if selected == 'backward' %}180{% else %}0{% endif %}"
+            "pattern-pixelSize": "9",
+            "pattern-repeat": "23",
+            "pattern-offset": "{% if selected == 'backward' %}2{% else %}18.5{% endif %}",
+            "pattern-polygon": "true",
+            "pattern-angleCorrection": "{% if selected == 'backward' %}180{% else %}0{% endif %}",
+            "pattern-path-weight": "0",
+            "pattern-path-fillOpacity": "1",
+            "pattern-path-color": "#3f3f3f"
         }
     },
     "const": {