Examples / text-path
text-path.json
targets v0.40.0 4 entities 8 schemas
A canvas run on an arc-to baseline, clipped to a rectangle, with @font-face as rig.media.font_face. The path stays its own entity. Colour is paint.
Speaks
rig.geometry.path · rig.media.asset_ref · rig.media.font_face · rig.media.text · rig.media.text_path · rig.meta.named · rig.paint.clip · rig.paint.fill_stroke
Document
Validates under npm run check —
raw file ·
open in RigPlayer —
drop it in, press play, remix it, share the link.
{
"rig": "0.40.0",
"document": {
"title": "Text path",
"defaultUnit": "px"
},
"entities": [
{
"id": "face",
"components": {
"rig.meta.named": {
"name": "Roboto",
"stableId": "face"
},
"rig.media.asset_ref": {
"kind": "font",
"path": "fonts/Roboto-Regular.ttf"
},
"rig.media.font_face": {
"family": "Roboto",
"asset": "face"
}
}
},
{
"id": "baseline",
"components": {
"rig.meta.named": {
"name": "baseline",
"stableId": "baseline"
},
"rig.geometry.path": {
"fillRule": "nonzero",
"commands": [
{
"type": "move-to",
"point": [
20,
80
]
},
{
"type": "arc-to",
"point": [
180,
80
],
"radiusX": 80,
"radiusY": 40,
"xAxisRotationDegrees": 0,
"largeArc": false,
"sweep": true
}
]
}
}
},
{
"id": "clip-shape",
"components": {
"rig.meta.named": {
"name": "clip",
"stableId": "clip-shape"
},
"rig.geometry.path": {
"commands": [
{
"type": "move-to",
"point": [
0,
0
]
},
{
"type": "line-to",
"point": [
200,
0
]
},
{
"type": "line-to",
"point": [
200,
120
]
},
{
"type": "line-to",
"point": [
0,
120
]
},
{
"type": "close"
}
]
}
}
},
{
"id": "run",
"components": {
"rig.meta.named": {
"name": "Hello",
"stableId": "run"
},
"rig.media.text": {
"text": "Hello",
"font": "face",
"fontSize": 24,
"anchor": "start"
},
"rig.media.text_path": {
"path": "baseline",
"startOffset": 8
},
"rig.paint.fill_stroke": {
"fillRgba": [
0,
0,
0,
1
],
"hasFill": true,
"hasStroke": false
},
"rig.paint.clip": {
"path": "clip-shape"
}
}
}
]
}