SVG construction example 5 - clock or ornament
Last updated at 10:14 am UTC on 16 May 2019
Lets construct a SVG skeleton for a clock or ornament. A circle with 60 dots which may be used for many exercises.

The start to calculate the position of the dots. Unit circle at the moment.

```| x y phi |
Transcript clear.
0 to: 59 do: [:i | phi := i *(2* Float pi) / 12 .
x := phi sin.
y := phi cos.
Transcript show: i printString, ': ', phi radiansToDegrees, 'x= ', x, ' y= ',y  ; cr]

```

The template from SVG construction example 1

```circle := [:cx :cy :r :fill| '<circle cx="', cx printString, '" cy="', cy printString, '" r="', r printString, '" fill="', fill, '" />'].

Transcript clear.
Transcript show: '<html><svg>';cr.
1 to: 5 do: [:i |
Transcript show: (circle value: (i*50) value: 50 value: 20 value: 'black'); cr].
Transcript show: '</svg></html>';cr.
```

```	radius := 0.01.
i \\ 5 = 0 ifTrue: [radius := 0.02].```

The two scrips combined partially

```| x y phi |
Transcript clear.
numberOfDivisions := 24.

0 to: numberOfDivisions do: [:i | phi := i * (2 * Float pi) / numberOfDivisions .
x := (radiusLargeCircle * phi sin) roundTo: 2.
y := (radiusLargeCircle * phi cos) roundTo: 2.
i \\ 5 = 0 ifTrue: [radiusOfDot := 0.02].

Transcript show: i printString, ': ', ' phi= ',  (phi radiansToDegrees roundTo: 2), '   x= ', x, '   y= ',y  ; cr]
```

The result
```
0:  phi= 0   x= 0   y= 200
1:  phi= 14   x= 52   y= 194
2:  phi= 30   x= 100   y= 174
3:  phi= 46   x= 142   y= 142
4:  phi= 60   x= 174   y= 100
5:  phi= 76   x= 194   y= 52
6:  phi= 90   x= 200   y= 0
7:  phi= 106   x= 194   y= -52
8:  phi= 120   x= 174   y= -100
9:  phi= 136   x= 142   y= -142
10:  phi= 150   x= 100   y= -174
11:  phi= 166   x= 52   y= -194
12:  phi= 180   x= 0   y= -200
13:  phi= 196   x= -52   y= -194
14:  phi= 210   x= -100   y= -174
15:  phi= 224   x= -142   y= -142
16:  phi= 240   x= -174   y= -100
17:  phi= 256   x= -194   y= -52
18:  phi= 270   x= -200   y= 0
19:  phi= 286   x= -194   y= 52
20:  phi= 300   x= -174   y= 100
21:  phi= 316   x= -142   y= 142
22:  phi= 330   x= -100   y= 174
23:  phi= 344   x= -52   y= 194
24:  phi= 360   x= 0   y= 200

```

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform

```| x y phi |
Transcript clear.
numberOfDivisions := 24.

circle := [:cx :cy :r :fill| '<circle cx="', cx printString, '" cy="', cy printString, '" r="', r printString, '" fill="', fill, '" />'].

Transcript show: '<html><svg width="600" height="600">';cr.
Transcript show: '<g  transform="translate(300 300)">';cr.

0 to: numberOfDivisions do: [:i | phi := i * (2 * Float pi) / numberOfDivisions .
x := (radiusLargeCircle * phi sin) roundTo: 1.
y := (radiusLargeCircle * phi cos) roundTo: 1.
radiusOfDot := 1. colorOfDot := 'red'.
i \\ 2 = 0 ifTrue: [radiusOfDot := 3].
i \\ 4 = 0 ifTrue: [radiusOfDot := 5].

"
Transcript show: i printString, ': ', ' phi= ',  (phi radiansToDegrees roundTo: 2), '   x= ', x, '   y= ',y  ; cr.
"

Transcript show: (circle value: x value: y value: radiusOfDot value: colorOfDot); cr.

].

Transcript show: '</g>';cr.
Transcript show: '</svg></html>';cr.
```

With the following parameters
```    radiusLargeCircle := 280.
...
colorOfDot := 'blue'.

```

Parameters:
```      radiusOfDot := 1. colorOfDot := 'green'.
i \\ 5 = 0 ifTrue: [radiusOfDot := 3].
i \\ 15 = 0 ifTrue: [radiusOfDot := 4].
```