q-style path-blue {
width: 42px;
height: 42px;
background: #1d4ed8;
color: #ffffff;
borderRadius: 999px;
display: grid;
placeItems: center;
fontWeight: 800;
q-style-path-animation {
path: "M 50 90 C 280 20, 160 260, 430 180"
duration: 1800
easing: "ease-in-out"
anchorPoint: "center"
rotation: "auto"
repeat: "true"
}
}
q-style path-green {
width: 54px;
height: 54px;
background: #0f766e;
color: #ffffff;
borderRadius: 0.5rem;
display: grid;
placeItems: center;
fontWeight: 800;
q-style-path-animation {
path: "M 70 260 C 180 120, 340 360, 520 90"
duration: 2400
easing: "linear"
anchorPoint: "center"
rotation: "auto"
repeat: "true"
}
}
q-style path-orange {
width: 46px;
height: 46px;
background: #d97706;
color: #ffffff;
borderRadius: 0px;
display: grid;
placeItems: center;
fontWeight: 800;
q-style-path-animation {
path: "M 120 120 C 500 120, 80 420, 580 420"
duration: 3000
easing: "ease-in-out"
anchorPoint: "center"
rotation: "auto"
repeat: "true"
}
}
q-theme motion-theme {
.path-blue { path-blue }
.path-green { path-green }
.path-orange { path-orange }
}
motion-theme {
section.path-animation-stage {
style { position: relative; min-height: 100vh; overflow: hidden; padding: 1.25rem; box-sizing: border-box; }
header {
style { position: relative; z-index: 2; max-width: 48rem; margin-bottom: 1rem; }
h1 { text { q-style-path-animation } }
p {
style { color: #cbd5e1; line-height: 1.5; }
text { Three q-style path animations inject motion-path inline declarations and generated keyframes. }
}
}
div#path-box-a.path-blue {
text { A }
}
div#path-box-b.path-green {
text { B }
}
div#path-box-c.path-orange {
text { C }
}
}
}