I found a solution: animated masks
uid: widget_svg5
tags: []
props:
parameters: []
parameterGroups: []
timestamp: Dec 10, 2022, 3:37:39 PM
component: f7-row
config:
preserveAspectRatio: xMidYMid slice
style:
border: 0px solid blue
height: 200
width: 300
tag: svg
viewBox: 0 0 300 200
xmlns: http://www.w3.org/2000/svg
slots:
default:
- component: f7-row
config:
tag: defs
slots:
default:
- component: f7-row
config:
id: gradmask2
tag: radialGradient
slots:
default:
- component: f7-row
config:
offset: 0
style:
stop-color: white
tag: stop
- component: f7-row
config:
offset: 1
style:
stop-color: black
tag: stop
- component: f7-row
config:
id: mask2
tag: mask
slots:
default:
- component: f7-row
config:
fill: url(#gradmask2)
r: 70
tag: circle
slots:
default:
- component: f7-row
config:
begin: 0.4
calcMode: linear
dur: 4
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path1"
- component: f7-row
config:
fill: white
r: 35
tag: circle
slots:
default:
- component: f7-row
config:
begin: 0
calcMode: linear
dur: 4
repeatCount: indefinite
tag: animateMotion
slots:
default:
- component: f7-row
config:
tag: mpath
xlink:href: "#path1"
- component: f7-row
config:
d: M60,130 h145 c0,0 30,0 30,-30 v-155
fill: none
id: path1
tag: path
- component: f7-row
config:
d: M95,130 h110 c0,0 30,0 30,-30 v-85
fill: none
id: path3
stroke: lightblue
stroke-width: 1
tag: path
- component: f7-row
config:
d: M95,130 h110 c0,0 30,0 30,-30 v-85
fill: none
mask: url(#mask2)
stroke: blue
stroke-width: 5
tag: path
