n8n flow path neon effect animation

.env

NGROK_AUTHTOKEN=
NGROK_TUNNEL_NAME=

docker-compose.yml

volumes:
  n8n_data:

services:
 
  n8n:
    container_name: n8n
    image: docker.n8n.io/n8nio/n8n
    restart: always
    environment:

      - GENERIC_TIMEZONE="Asis/Taipei"
      - TZ="Asis/Taipei"
      - N8N_ENFORCE_SETTINGS_FILE_PERMISSIONS=true

      # https://docs.n8n.io/hosting/configuration/configuration-examples/isolation/

      - N8N_DIAGNOSTICS_ENABLED=false
      - N8N_VERSION_NOTIFICATIONS_ENABLED=false
      - N8N_TEMPLATES_ENABLED=true

      - EXTERNAL_FRONTEND_HOOKS_URLS=
      - N8N_DIAGNOSTICS_CONFIG_FRONTEND=
      - N8N_DIAGNOSTICS_CONFIG_BACKEND=

      # https://docs.n8n.io/hosting/configuration/configuration-examples/webhook-url/
      - WEBHOOK_URL=https://${NGROK_TUNNEL_NAME}
      - N8N_PROXY_HOPS=1
    ports:
      - 5678:5678
    volumes:
      - n8n_data:/home/node/.n8n
      - ./n8n-init.sh:/tmp/n8n-init.sh
      - ./prefers-color-scheme.css:/tmp/prefers-color-scheme.css
    entrypoint: ["/tmp/n8n-init.sh"]
    command: ["n8n", "start"]

  ngrok:
    container_name: ngrok
    image: ngrok/ngrok:latest
    restart: always
    environment:
      - NGROK_AUTHTOKEN=${NGROK_AUTHTOKEN}
    command: http --url=${NGROK_TUNNEL_NAME} n8n:5678
    depends_on:
      - n8n

n8n-init.sh

#!/bin/sh
set -e

n8n start &

echo "[init] Waiting for n8n to finish building frontend..."

while [ ! -d /home/node/.cache/n8n/public/static ]; do
  sleep 1
done

sleep 2

echo "[init] Applying static override..."
cp /tmp/prefers-color-scheme.css \
   /home/node/.cache/n8n/public/static/prefers-color-scheme.css

echo "[init] Done. Tail logs..."

wait -n

prefers-color-scheme.css

:root {
	--canvas-edge--color: SpringGreen;
}

.vue-flow__edge-path,
.vue-flow__connection-path {
  stroke-linecap: round !important;
  stroke-dasharray: 6;
  animation: neonFlow 1s linear infinite;
  filter:
    drop-shadow(0 0 4px var(--canvas-edge--color))
    drop-shadow(0 0 8px var(--canvas-edge--color))
 
}

@keyframes neonFlow {
  to {
    stroke-dashoffset: -24;
  }
}