Analog clock
A clock face showing ten minutes past ten.
Scene JSON
{
"version": "0.1",
"id": "analog-clock",
"title": "Analog clock",
"description": "A clock face showing ten minutes past ten.",
"canvas": {
"width": 760,
"height": 520,
"background": "background",
"padding": 40
},
"theme": {
"id": "clean-light"
},
"nodes": [
{
"id": "title",
"x": 380,
"y": 58,
"type": "text",
"text": "Analog clock",
"fontSize": 28,
"align": "center"
},
{
"id": "clock-face",
"x": 380,
"y": 265,
"style": {
"fill": "#f6f6f1",
"stroke": "background",
"strokeWidth": 1.4
},
"type": "circle",
"radius": 132,
"label": "Clock face"
},
{
"id": "clock-tick-12",
"style": {
"stroke": "primary",
"strokeWidth": 3
},
"accessibility": {
"role": "decorative"
},
"type": "line",
"points": [
{
"x": 380,
"y": 171
},
{
"x": 380,
"y": 153
}
]
},
{
"id": "clock-tick-1",
"style": {
"stroke": "mutedText",
"strokeWidth": 2
},
"accessibility": {
"role": "decorative"
},
"type": "line",
"points": [
{
"x": 430,
"y": 178.39745962155612
},
{
"x": 436,
"y": 168.00515477614286
}
]
},
{
"id": "clock-tick-2",
"style": {
"stroke": "mutedText",
"strokeWidth": 2
},
"accessibility": {
"role": "decorative"
},
"type": "line",
"points": [
{
"x": 466.60254037844385,
"y": 215
},
{
"x": 476.9948452238571,
"y": 209
}
]
},
{
"id": "clock-tick-3",
"style": {
"stroke": "primary",
"strokeWidth": 3
},
"accessibility": {
"role": "decorative"
},
"type": "line",
"points": [
{
"x": 474,
"y": 265
},
{
"x": 492,
"y": 265
}
]
},
{
"id": "clock-tick-4",
"style": {
"stroke": "mutedText",
"strokeWidth": 2
},
"accessibility": {
"role": "decorative"
},
"type": "line",
"points": [
{
"x": 466.6025403784439,
"y": 315
},
{
"x": 476.99484522385717,
"y": 321
}
]
},
{
"id": "clock-tick-5",
"style": {
"stroke": "mutedText",
"strokeWidth": 2
},
"accessibility": {
"role": "decorative"
},
"type": "line",
"points": [
{
"x": 430,
"y": 351.6025403784439
},
{
"x": 436,
"y": 361.99484522385717
}
]
},
{
"id": "clock-tick-6",
"style": {
"stroke": "primary",
"strokeWidth": 3
},
"accessibility": {
"role": "decorative"
},
"type": "line",
"points": [
{
"x": 380,
"y": 359
},
{
"x": 380,
"y": 377
}
]
},
{
"id": "clock-tick-7",
"style": {
"stroke": "mutedText",
"strokeWidth": 2
},
"accessibility": {
"role": "decorative"
},
"type": "line",
"points": [
{
"x": 330,
"y": 351.60254037844385
},
{
"x": 324,
"y": 361.9948452238571
}
]
},
{
"id": "clock-tick-8",
"style": {
"stroke": "mutedText",
"strokeWidth": 2
},
"accessibility": {
"role": "decorative"
},
"type": "line",
"points": [
{
"x": 293.39745962155615,
"y": 315.00000000000006
},
{
"x": 283.0051547761429,
"y": 321.00000000000006
}
]
},
{
"id": "clock-tick-9",
"style": {
"stroke": "primary",
"strokeWidth": 3
},
"accessibility": {
"role": "decorative"
},
"type": "line",
"points": [
{
"x": 286,
"y": 265
},
{
"x": 268,
"y": 265
}
]
},
{
"id": "clock-tick-10",
"style": {
"stroke": "mutedText",
"strokeWidth": 2
},
"accessibility": {
"role": "decorative"
},
"type": "line",
"points": [
{
"x": 293.39745962155615,
"y": 215
},
{
"x": 283.0051547761429,
"y": 209
}
]
},
{
"id": "clock-tick-11",
"style": {
"stroke": "mutedText",
"strokeWidth": 2
},
"accessibility": {
"role": "decorative"
},
"type": "line",
"points": [
{
"x": 329.99999999999994,
"y": 178.39745962155615
},
{
"x": 323.99999999999994,
"y": 168.0051547761429
}
]
},
{
"id": "clock-number-12",
"x": 380,
"y": 190,
"type": "text",
"text": "12",
"fontSize": 18,
"fontWeight": 700,
"align": "center"
},
{
"id": "clock-number-3",
"x": 455,
"y": 271,
"type": "text",
"text": "3",
"fontSize": 18,
"fontWeight": 700,
"align": "center"
},
{
"id": "clock-number-6",
"x": 380,
"y": 350,
"type": "text",
"text": "6",
"fontSize": 18,
"fontWeight": 700,
"align": "center"
},
{
"id": "clock-number-9",
"x": 305,
"y": 271,
"type": "text",
"text": "9",
"fontSize": 18,
"fontWeight": 700,
"align": "center"
},
{
"id": "clock-hour-hand",
"style": {
"stroke": "primary",
"strokeWidth": 7
},
"accessibility": {
"role": "decorative"
},
"type": "line",
"points": [
{
"x": 380,
"y": 265
},
{
"x": 329.27471751964856,
"y": 229.34967437331673
}
]
},
{
"id": "clock-minute-hand",
"style": {
"stroke": "accent",
"strokeWidth": 4
},
"accessibility": {
"role": "decorative"
},
"type": "line",
"points": [
{
"x": 380,
"y": 265
},
{
"x": 459.6743371481683,
"y": 219
}
]
},
{
"id": "clock-center",
"x": 380,
"y": 265,
"style": {
"fill": "primary",
"stroke": "background",
"strokeWidth": 2
},
"type": "circle",
"radius": 8,
"label": "Center pin"
},
{
"id": "clock-caption",
"x": 380,
"y": 445,
"type": "text",
"text": "10:10",
"fontSize": 20,
"fontWeight": 650,
"align": "center"
}
]
}