# The cool stuff

The following rosace can help calculate numbers modulo 7.

In order to do that, you must start at 0 and turn clockwise a number of steps given by the first digit. Then, for each successive digit, follow the arrow and then turn clockwise the number of steps given by that digit.

Here is how you proceed for number 294:

1. You start at circle 0.
2. You turn clockwise the number of steps given by the first digit (which is a 2, you end up at 2).
3. You follow the arrow there (you end up at 6).
4. You turn clockwise the number of steps given by the second digit (which is a 9, you end up at 1).
5. You follow the arrow there (you end up at 3).
6. You turn clockwise the number of steps given by the third number (which is 4, you end up at 0).
7. 294 mod 7 = 0 (meaning 294 is multiple of 7).

# The goal

Figure out how that works (I know but I won't tell you).

Create a program that takes a number n in parameter and that generates a rosace for mod n.

The rosace can be displayed by any means you want (ASCII, generate PNG, generate SVG, ...) as long as it could be used by a 8 years old child (so no list of rules, I want a picture)!

You can use strait lines, even if it's a bit less clear than what I made for the example, but you must show clearly the numbers that point to themselves with some kind of tail-biting arrow.

## Test cases

(I only give the links between the numbers, feel free to edit my question once your program sucessfully generates them)

mod 2:

0 -> 0
1 -> 0


mod 3:

0 -> 0
1 -> 1
2 -> 2


mod 4:

0 -> 0
1 -> 2
2 -> 0
3 -> 2


mod 5:

0 -> 0
1 -> 0
2 -> 0
3 -> 0
4 -> 0


mod 6:

0 -> 0
1 -> 4
2 -> 2
3 -> 0
4 -> 4
5 -> 2


mod 7:

0 -> 0
1 -> 3
2 -> 6
3 -> 2
4 -> 5
5 -> 1
6 -> 4


mod 8:

0 -> 0
1 -> 2
2 -> 4
3 -> 6
4 -> 0
5 -> 2
6 -> 4
7 -> 6


mod 9:

0 -> 0
1 -> 1
2 -> 2
3 -> 3
4 -> 4
5 -> 5
6 -> 6
7 -> 7
8 -> 8


mod 10:

0 -> 0
1 -> 0
2 -> 0
3 -> 0
4 -> 0
5 -> 0
6 -> 0
7 -> 0
8 -> 0
9 -> 0


# Rules

This is , shortest code in bytes wins.

As usual, loopholes and cheats are forbidden.

• For those who (like me) dislike video explanations, as opposed to text: mindyourdecisions.com/blog/2015/07/26/… Oct 28, 2016 at 14:13
• @SteeveDroz Is the format I use in my answer okay? Oct 28, 2016 at 14:48

# Mathematica, 192 bytes

This type of challenge (nontrivial mathematical computation together with high-level graphics output) is what Mathematica is made for!

(d=#;r_~t~n_:=r{Sin[#],Cos[#]}&[6.3n/d];m=Mod[10#,d]&;Graphics@{Array[#~Text~t[9,#]&,d,0],Array[Arrow@{t[9,#+1/7],t[9,#+6/7]}&,d],Array[Arrow@BezierCurve@{t[8,#+1/9],{0,0},t[8,m@#-1/9]}&,d]})&


Expanded and explained:

[1] (
[2] d = #; r_~t~n_ := r {Sin[#], Cos[#]} &[6.3 n/d]; m = Mod[10 #, d] &;
[3] Graphics@{
[4]   Array[#~Text~t[9, #] &, d, 0],
[5]   Array[Arrow@{t[9, # + 1/7], t[9, # + 6/7]} &, d],
[6]   Array[Arrow@BezierCurve@{t[8, # + 1/9], {0, 0}, t[8, m@# - 1/9]} &, d]
[7]          }
[8] ) &


Lines 1 and 8 delimit an unnamed function of one argument. Lines 3 and 7 delimit several commands that output graphics.

Lines 2 stores the input as d; defines a binary function t giving the coordinates of a point n/d of the way around the circle of radius r, clockwise from the top (in the spirit of this site, I saved a byte by rounding 2π to 6.3!); and defines a unary function m calculating the destination of the arrow starting at its argument.

Line 4 renders the numbers 0 to d–1 equally spaced around the circle of radius 9 (the exact radius unimportant, chosen to maximize aesthetics subject to fitting in one byte).

Line 5 renders the clockwise straight arrows around the circumference of the circle. The 1/7 and 6/7 leave enough space to read the numbers.

Line 6 renders the curved arrows from each number to (10 times the number modulo d). BezierCurve automatically draws a Bézier curve using the given control points. Fortunately, using the origin as a single interior control point produces reasonable output.

Sample output (note that the cases 9, 10, and 11 are trivial in different ways):

## d = 37

This last input was chosen because 37 divides 10^3–1, and so the interior arrows (not counting the obligatory self-arrow from 0 to 0) form lots of triangular cycles.

• Looking at the output for d = 37, I'm much older than 8 and I'll have a hell of a time following that O_O Oct 28, 2016 at 19:59
• And yet, especially magnified, it's completely followable! (if we know the rules) But yeah, spending more bytes could make it much more visually user-friendly. Oct 28, 2016 at 20:00

# Python 2, 294 bytes

n=input()
r,R="",range(n)
for i in R:r+=["   ","__ "][10*i%n==i]
r+="\n"
for i in R:r+=["   ","|/ "][10*i%n==i]
print r
print">>".join(map(str,R))
for i in R:
o,r=10*i%n,""
for j in R:
r+="|"
if i<=j<o:r+=">>"
elif i>j>=o:r+="<<"
else:r+="  "
print r


Prints the diagram in this format:

__
|/
0>>1>>2>>3>>4>>5>>6
|  |  |  |  |  |  |
|  |>>|>>|  |  |  |
|  |  |>>|>>|>>|>>|
|  |  |<<|  |  |  |
|  |  |  |  |>>|  |
|  |<<|<<|<<|<<|  |
|  |  |  |  |<<|<<|


I don't know if this format is okay, therefore I'll leave this answer as invalid for the time being. Yay, it's valid!

Try it on repl.it!

• @DJMcMayhem The OP did say ASCII art is allowed, so it's up to the OP. Oct 28, 2016 at 14:58
• This looks great! You should try to set up the formatting so it works with n-digit numbers. I'm not sure if the challenge requires you to do it for n>9 though.
Oct 28, 2016 at 15:12
• Looks good to me, it doesn't need more explanation than the original example. Oct 28, 2016 at 19:32

# PHP+SVG, 500 Bytes

little arrow for connections between same values

<svg viewBox=0,0,500,500><def><marker id=t viewBox=0,0,9,9 refX=1 refY=5 orient=auto><path d=M0,0L10,5L0,10z /></marker></def><circle cx=250 cy=250 r=150 fill=#ccc /><?for($i=0;$i<$n=$_GET[n];$i++){$w=deg2rad((($i*10%$n)-$i)*360/$n);echo"<g transform=rotate(".$i*360/$n.",250,250)><path d=M250,110L".(250+(sin($w)*135)).",".(250-cos($w)*145)." fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>$i</text></g>";}?></svg>  to see the arrows to the same values I use this color value rgba(255,0,0,0.3) . it is a possibility to short it down. expanded  <svg viewBox=0,0,500,500> <def> <marker id=t viewBox=0,0,10,10 refX=1 refY=5 markerWidth=5 markerHeight=5 orient=auto> <path d=M0,0L10,5L0,10z /> </marker> </def> <circle cx=250 cy=250 r=150 fill=#ccc stroke=#a00 /> <?php for($i=0;$i<$n=$_GET[n];$i++){
$w=deg2rad((($i*10%$n)-$i)*360/$n); echo"<g transform=rotate(".$i*360/$n.",250,250)> <path d=M250,110L".(250+(sin($w)*135)).",".(250-cos($w)*145)." fill=none stroke=#0f0 marker-end=url(#t) /> <circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /> <text x=250 y=105 text-anchor=middle>$i</text>
</g>";
}?>
</svg>


output for n=45

<svg viewBox=0,0,500,500><def><marker id=t viewBox=0,0,10,10 refX=1 refY=5 markerWidth=5 markerHeight=5 orient=auto><path d=M0,0L10,5L0,10z /></marker></def><circle cx=250 cy=250 r=150 fill=#ccc stroke=#a00 /><g transform=rotate(0,250,250)><path d=M250,110L250,105 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>0</text></g><g transform=rotate(8,250,250)><path d=M250,110L378.39262969985,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>1</text></g><g transform=rotate(16,250,250)><path d=M250,110L329.35100905948,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>2</text></g><g transform=rotate(24,250,250)><path d=M250,110L170.64899094052,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>3</text></g><g transform=rotate(32,250,250)><path d=M250,110L121.60737030015,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>4</text></g><g transform=rotate(40,250,250)><path d=M250,110L250,105 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>5</text></g><g transform=rotate(48,250,250)><path d=M250,110L378.39262969985,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>6</text></g><g transform=rotate(56,250,250)><path d=M250,110L329.35100905948,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>7</text></g><g transform=rotate(64,250,250)><path d=M250,110L170.64899094052,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>8</text></g><g transform=rotate(72,250,250)><path d=M250,110L121.60737030015,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>9</text></g><g transform=rotate(80,250,250)><path d=M250,110L250,105 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>10</text></g><g transform=rotate(88,250,250)><path d=M250,110L378.39262969985,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>11</text></g><g transform=rotate(96,250,250)><path d=M250,110L329.35100905948,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>12</text></g><g transform=rotate(104,250,250)><path d=M250,110L170.64899094052,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>13</text></g><g transform=rotate(112,250,250)><path d=M250,110L121.60737030015,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>14</text></g><g transform=rotate(120,250,250)><path d=M250,110L250,105 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>15</text></g><g transform=rotate(128,250,250)><path d=M250,110L378.39262969985,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>16</text></g><g transform=rotate(136,250,250)><path d=M250,110L329.35100905948,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>17</text></g><g transform=rotate(144,250,250)><path d=M250,110L170.64899094052,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>18</text></g><g transform=rotate(152,250,250)><path d=M250,110L121.60737030015,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>19</text></g><g transform=rotate(160,250,250)><path d=M250,110L250,105 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>20</text></g><g transform=rotate(168,250,250)><path d=M250,110L378.39262969985,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>21</text></g><g transform=rotate(176,250,250)><path d=M250,110L329.35100905948,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>22</text></g><g transform=rotate(184,250,250)><path d=M250,110L170.64899094052,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>23</text></g><g transform=rotate(192,250,250)><path d=M250,110L121.60737030015,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>24</text></g><g transform=rotate(200,250,250)><path d=M250,110L250,105 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>25</text></g><g transform=rotate(208,250,250)><path d=M250,110L378.39262969985,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>26</text></g><g transform=rotate(216,250,250)><path d=M250,110L329.35100905948,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>27</text></g><g transform=rotate(224,250,250)><path d=M250,110L170.64899094052,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>28</text></g><g transform=rotate(232,250,250)><path d=M250,110L121.60737030015,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>29</text></g><g transform=rotate(240,250,250)><path d=M250,110L250,105 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>30</text></g><g transform=rotate(248,250,250)><path d=M250,110L378.39262969985,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>31</text></g><g transform=rotate(256,250,250)><path d=M250,110L329.35100905948,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>32</text></g><g transform=rotate(264,250,250)><path d=M250,110L170.64899094052,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>33</text></g><g transform=rotate(272,250,250)><path d=M250,110L121.60737030015,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>34</text></g><g transform=rotate(280,250,250)><path d=M250,110L250,105 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>35</text></g><g transform=rotate(288,250,250)><path d=M250,110L378.39262969985,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>36</text></g><g transform=rotate(296,250,250)><path d=M250,110L329.35100905948,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>37</text></g><g transform=rotate(304,250,250)><path d=M250,110L170.64899094052,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>38</text></g><g transform=rotate(312,250,250)><path d=M250,110L121.60737030015,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>39</text></g><g transform=rotate(320,250,250)><path d=M250,110L250,105 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>40</text></g><g transform=rotate(328,250,250)><path d=M250,110L378.39262969985,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>41</text></g><g transform=rotate(336,250,250)><path d=M250,110L329.35100905948,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>42</text></g><g transform=rotate(344,250,250)><path d=M250,110L170.64899094052,367.30746418437 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>43</text></g><g transform=rotate(352,250,250)><path d=M250,110L121.60737030015,205.19253581563 fill=none stroke=#0f0 marker-end=url(#t) /><circle cx=250 cy=100 r=10 fill=rgba(255,0,0,0.3) /><text x=250 y=105 text-anchor=middle>44</text></g></svg>

## 320 Bytes working with rect

<svg viewBox=0,0,<?=$w=30+10*$n=$_GET[n]?>,<?=20*$n?>><?for($i=0;$i<$n;$i++)echo"<rect x=0 y=".($y=$i*20)." fill=none width=$w height=20 stroke=grey /><text x=5 y=".($y+17).">$i</text><path d=M".($x=$i*10+25).",".($y+17)."L$x,".($m=($i*10%$n)*20+5)." fill=none stroke=blue /><circle cx=$x cy=$m r=2 fill=#0f0 />"?></svg>


expanded

<svg viewBox=0,0,<?=$w=30+10*$n=$_GET[n]?>,<?=20*$n?>>
<?for($i=0;$i<$n;$i++)
echo"<rect x=0 y=".($y=$i*20)." fill=none width=$w height=20 stroke=grey /> <text x=5 y=".($y+17).">$i</text> <path d=M".($x=$i*10+25).",".($y+17)."L$x,".($m=($i*10%$n)*20+5)." fill=none stroke=blue />
<circle cx=$x cy=$m r=2 fill=#0f0 />"?>
</svg>


output for n=72

<svg viewBox=0,0,750,1440><rect x=0 y=0 fill=none width=750 height=20 stroke=grey /><text x=5 y=17>0</text><path d=M25,17L25,5 fill=none stroke=blue /><circle cx=25 cy=5 r=2 fill=#0f0 /><rect x=0 y=20 fill=none width=750 height=20 stroke=grey /><text x=5 y=37>1</text><path d=M35,37L35,205 fill=none stroke=blue /><circle cx=35 cy=205 r=2 fill=#0f0 /><rect x=0 y=40 fill=none width=750 height=20 stroke=grey /><text x=5 y=57>2</text><path d=M45,57L45,405 fill=none stroke=blue /><circle cx=45 cy=405 r=2 fill=#0f0 /><rect x=0 y=60 fill=none width=750 height=20 stroke=grey /><text x=5 y=77>3</text><path d=M55,77L55,605 fill=none stroke=blue /><circle cx=55 cy=605 r=2 fill=#0f0 /><rect x=0 y=80 fill=none width=750 height=20 stroke=grey /><text x=5 y=97>4</text><path d=M65,97L65,805 fill=none stroke=blue /><circle cx=65 cy=805 r=2 fill=#0f0 /><rect x=0 y=100 fill=none width=750 height=20 stroke=grey /><text x=5 y=117>5</text><path d=M75,117L75,1005 fill=none stroke=blue /><circle cx=75 cy=1005 r=2 fill=#0f0 /><rect x=0 y=120 fill=none width=750 height=20 stroke=grey /><text x=5 y=137>6</text><path d=M85,137L85,1205 fill=none stroke=blue /><circle cx=85 cy=1205 r=2 fill=#0f0 /><rect x=0 y=140 fill=none width=750 height=20 stroke=grey /><text x=5 y=157>7</text><path d=M95,157L95,1405 fill=none stroke=blue /><circle cx=95 cy=1405 r=2 fill=#0f0 /><rect x=0 y=160 fill=none width=750 height=20 stroke=grey /><text x=5 y=177>8</text><path d=M105,177L105,165 fill=none stroke=blue /><circle cx=105 cy=165 r=2 fill=#0f0 /><rect x=0 y=180 fill=none width=750 height=20 stroke=grey /><text x=5 y=197>9</text><path d=M115,197L115,365 fill=none stroke=blue /><circle cx=115 cy=365 r=2 fill=#0f0 /><rect x=0 y=200 fill=none width=750 height=20 stroke=grey /><text x=5 y=217>10</text><path d=M125,217L125,565 fill=none stroke=blue /><circle cx=125 cy=565 r=2 fill=#0f0 /><rect x=0 y=220 fill=none width=750 height=20 stroke=grey /><text x=5 y=237>11</text><path d=M135,237L135,765 fill=none stroke=blue /><circle cx=135 cy=765 r=2 fill=#0f0 /><rect x=0 y=240 fill=none width=750 height=20 stroke=grey /><text x=5 y=257>12</text><path d=M145,257L145,965 fill=none stroke=blue /><circle cx=145 cy=965 r=2 fill=#0f0 /><rect x=0 y=260 fill=none width=750 height=20 stroke=grey /><text x=5 y=277>13</text><path d=M155,277L155,1165 fill=none stroke=blue /><circle cx=155 cy=1165 r=2 fill=#0f0 /><rect x=0 y=280 fill=none width=750 height=20 stroke=grey /><text x=5 y=297>14</text><path d=M165,297L165,1365 fill=none stroke=blue /><circle cx=165 cy=1365 r=2 fill=#0f0 /><rect x=0 y=300 fill=none width=750 height=20 stroke=grey /><text x=5 y=317>15</text><path d=M175,317L175,125 fill=none stroke=blue /><circle cx=175 cy=125 r=2 fill=#0f0 /><rect x=0 y=320 fill=none width=750 height=20 stroke=grey /><text x=5 y=337>16</text><path d=M185,337L185,325 fill=none stroke=blue /><circle cx=185 cy=325 r=2 fill=#0f0 /><rect x=0 y=340 fill=none width=750 height=20 stroke=grey /><text x=5 y=357>17</text><path d=M195,357L195,525 fill=none stroke=blue /><circle cx=195 cy=525 r=2 fill=#0f0 /><rect x=0 y=360 fill=none width=750 height=20 stroke=grey /><text x=5 y=377>18</text><path d=M205,377L205,725 fill=none stroke=blue /><circle cx=205 cy=725 r=2 fill=#0f0 /><rect x=0 y=380 fill=none width=750 height=20 stroke=grey /><text x=5 y=397>19</text><path d=M215,397L215,925 fill=none stroke=blue /><circle cx=215 cy=925 r=2 fill=#0f0 /><rect x=0 y=400 fill=none width=750 height=20 stroke=grey /><text x=5 y=417>20</text><path d=M225,417L225,1125 fill=none stroke=blue /><circle cx=225 cy=1125 r=2 fill=#0f0 /><rect x=0 y=420 fill=none width=750 height=20 stroke=grey /><text x=5 y=437>21</text><path d=M235,437L235,1325 fill=none stroke=blue /><circle cx=235 cy=1325 r=2 fill=#0f0 /><rect x=0 y=440 fill=none width=750 height=20 stroke=grey /><text x=5 y=457>22</text><path d=M245,457L245,85 fill=none stroke=blue /><circle cx=245 cy=85 r=2 fill=#0f0 /><rect x=0 y=460 fill=none width=750 height=20 stroke=grey /><text x=5 y=477>23</text><path d=M255,477L255,285 fill=none stroke=blue /><circle cx=255 cy=285 r=2 fill=#0f0 /><rect x=0 y=480 fill=none width=750 height=20 stroke=grey /><text x=5 y=497>24</text><path d=M265,497L265,485 fill=none stroke=blue /><circle cx=265 cy=485 r=2 fill=#0f0 /><rect x=0 y=500 fill=none width=750 height=20 stroke=grey /><text x=5 y=517>25</text><path d=M275,517L275,685 fill=none stroke=blue /><circle cx=275 cy=685 r=2 fill=#0f0 /><rect x=0 y=520 fill=none width=750 height=20 stroke=grey /><text x=5 y=537>26</text><path d=M285,537L285,885 fill=none stroke=blue /><circle cx=285 cy=885 r=2 fill=#0f0 /><rect x=0 y=540 fill=none width=750 height=20 stroke=grey /><text x=5 y=557>27</text><path d=M295,557L295,1085 fill=none stroke=blue /><circle cx=295 cy=1085 r=2 fill=#0f0 /><rect x=0 y=560 fill=none width=750 height=20 stroke=grey /><text x=5 y=577>28</text><path d=M305,577L305,1285 fill=none stroke=blue /><circle cx=305 cy=1285 r=2 fill=#0f0 /><rect x=0 y=580 fill=none width=750 height=20 stroke=grey /><text x=5 y=597>29</text><path d=M315,597L315,45 fill=none stroke=blue /><circle cx=315 cy=45 r=2 fill=#0f0 /><rect x=0 y=600 fill=none width=750 height=20 stroke=grey /><text x=5 y=617>30</text><path d=M325,617L325,245 fill=none stroke=blue /><circle cx=325 cy=245 r=2 fill=#0f0 /><rect x=0 y=620 fill=none width=750 height=20 stroke=grey /><text x=5 y=637>31</text><path d=M335,637L335,445 fill=none stroke=blue /><circle cx=335 cy=445 r=2 fill=#0f0 /><rect x=0 y=640 fill=none width=750 height=20 stroke=grey /><text x=5 y=657>32</text><path d=M345,657L345,645 fill=none stroke=blue /><circle cx=345 cy=645 r=2 fill=#0f0 /><rect x=0 y=660 fill=none width=750 height=20 stroke=grey /><text x=5 y=677>33</text><path d=M355,677L355,845 fill=none stroke=blue /><circle cx=355 cy=845 r=2 fill=#0f0 /><rect x=0 y=680 fill=none width=750 height=20 stroke=grey /><text x=5 y=697>34</text><path d=M365,697L365,1045 fill=none stroke=blue /><circle cx=365 cy=1045 r=2 fill=#0f0 /><rect x=0 y=700 fill=none width=750 height=20 stroke=grey /><text x=5 y=717>35</text><path d=M375,717L375,1245 fill=none stroke=blue /><circle cx=375 cy=1245 r=2 fill=#0f0 /><rect x=0 y=720 fill=none width=750 height=20 stroke=grey /><text x=5 y=737>36</text><path d=M385,737L385,5 fill=none stroke=blue /><circle cx=385 cy=5 r=2 fill=#0f0 /><rect x=0 y=740 fill=none width=750 height=20 stroke=grey /><text x=5 y=757>37</text><path d=M395,757L395,205 fill=none stroke=blue /><circle cx=395 cy=205 r=2 fill=#0f0 /><rect x=0 y=760 fill=none width=750 height=20 stroke=grey /><text x=5 y=777>38</text><path d=M405,777L405,405 fill=none stroke=blue /><circle cx=405 cy=405 r=2 fill=#0f0 /><rect x=0 y=780 fill=none width=750 height=20 stroke=grey /><text x=5 y=797>39</text><path d=M415,797L415,605 fill=none stroke=blue /><circle cx=415 cy=605 r=2 fill=#0f0 /><rect x=0 y=800 fill=none width=750 height=20 stroke=grey /><text x=5 y=817>40</text><path d=M425,817L425,805 fill=none stroke=blue /><circle cx=425 cy=805 r=2 fill=#0f0 /><rect x=0 y=820 fill=none width=750 height=20 stroke=grey /><text x=5 y=837>41</text><path d=M435,837L435,1005 fill=none stroke=blue /><circle cx=435 cy=1005 r=2 fill=#0f0 /><rect x=0 y=840 fill=none width=750 height=20 stroke=grey /><text x=5 y=857>42</text><path d=M445,857L445,1205 fill=none stroke=blue /><circle cx=445 cy=1205 r=2 fill=#0f0 /><rect x=0 y=860 fill=none width=750 height=20 stroke=grey /><text x=5 y=877>43</text><path d=M455,877L455,1405 fill=none stroke=blue /><circle cx=455 cy=1405 r=2 fill=#0f0 /><rect x=0 y=880 fill=none width=750 height=20 stroke=grey /><text x=5 y=897>44</text><path d=M465,897L465,165 fill=none stroke=blue /><circle cx=465 cy=165 r=2 fill=#0f0 /><rect x=0 y=900 fill=none width=750 height=20 stroke=grey /><text x=5 y=917>45</text><path d=M475,917L475,365 fill=none stroke=blue /><circle cx=475 cy=365 r=2 fill=#0f0 /><rect x=0 y=920 fill=none width=750 height=20 stroke=grey /><text x=5 y=937>46</text><path d=M485,937L485,565 fill=none stroke=blue /><circle cx=485 cy=565 r=2 fill=#0f0 /><rect x=0 y=940 fill=none width=750 height=20 stroke=grey /><text x=5 y=957>47</text><path d=M495,957L495,765 fill=none stroke=blue /><circle cx=495 cy=765 r=2 fill=#0f0 /><rect x=0 y=960 fill=none width=750 height=20 stroke=grey /><text x=5 y=977>48</text><path d=M505,977L505,965 fill=none stroke=blue /><circle cx=505 cy=965 r=2 fill=#0f0 /><rect x=0 y=980 fill=none width=750 height=20 stroke=grey /><text x=5 y=997>49</text><path d=M515,997L515,1165 fill=none stroke=blue /><circle cx=515 cy=1165 r=2 fill=#0f0 /><rect x=0 y=1000 fill=none width=750 height=20 stroke=grey /><text x=5 y=1017>50</text><path d=M525,1017L525,1365 fill=none stroke=blue /><circle cx=525 cy=1365 r=2 fill=#0f0 /><rect x=0 y=1020 fill=none width=750 height=20 stroke=grey /><text x=5 y=1037>51</text><path d=M535,1037L535,125 fill=none stroke=blue /><circle cx=535 cy=125 r=2 fill=#0f0 /><rect x=0 y=1040 fill=none width=750 height=20 stroke=grey /><text x=5 y=1057>52</text><path d=M545,1057L545,325 fill=none stroke=blue /><circle cx=545 cy=325 r=2 fill=#0f0 /><rect x=0 y=1060 fill=none width=750 height=20 stroke=grey /><text x=5 y=1077>53</text><path d=M555,1077L555,525 fill=none stroke=blue /><circle cx=555 cy=525 r=2 fill=#0f0 /><rect x=0 y=1080 fill=none width=750 height=20 stroke=grey /><text x=5 y=1097>54</text><path d=M565,1097L565,725 fill=none stroke=blue /><circle cx=565 cy=725 r=2 fill=#0f0 /><rect x=0 y=1100 fill=none width=750 height=20 stroke=grey /><text x=5 y=1117>55</text><path d=M575,1117L575,925 fill=none stroke=blue /><circle cx=575 cy=925 r=2 fill=#0f0 /><rect x=0 y=1120 fill=none width=750 height=20 stroke=grey /><text x=5 y=1137>56</text><path d=M585,1137L585,1125 fill=none stroke=blue /><circle cx=585 cy=1125 r=2 fill=#0f0 /><rect x=0 y=1140 fill=none width=750 height=20 stroke=grey /><text x=5 y=1157>57</text><path d=M595,1157L595,1325 fill=none stroke=blue /><circle cx=595 cy=1325 r=2 fill=#0f0 /><rect x=0 y=1160 fill=none width=750 height=20 stroke=grey /><text x=5 y=1177>58</text><path d=M605,1177L605,85 fill=none stroke=blue /><circle cx=605 cy=85 r=2 fill=#0f0 /><rect x=0 y=1180 fill=none width=750 height=20 stroke=grey /><text x=5 y=1197>59</text><path d=M615,1197L615,285 fill=none stroke=blue /><circle cx=615 cy=285 r=2 fill=#0f0 /><rect x=0 y=1200 fill=none width=750 height=20 stroke=grey /><text x=5 y=1217>60</text><path d=M625,1217L625,485 fill=none stroke=blue /><circle cx=625 cy=485 r=2 fill=#0f0 /><rect x=0 y=1220 fill=none width=750 height=20 stroke=grey /><text x=5 y=1237>61</text><path d=M635,1237L635,685 fill=none stroke=blue /><circle cx=635 cy=685 r=2 fill=#0f0 /><rect x=0 y=1240 fill=none width=750 height=20 stroke=grey /><text x=5 y=1257>62</text><path d=M645,1257L645,885 fill=none stroke=blue /><circle cx=645 cy=885 r=2 fill=#0f0 /><rect x=0 y=1260 fill=none width=750 height=20 stroke=grey /><text x=5 y=1277>63</text><path d=M655,1277L655,1085 fill=none stroke=blue /><circle cx=655 cy=1085 r=2 fill=#0f0 /><rect x=0 y=1280 fill=none width=750 height=20 stroke=grey /><text x=5 y=1297>64</text><path d=M665,1297L665,1285 fill=none stroke=blue /><circle cx=665 cy=1285 r=2 fill=#0f0 /><rect x=0 y=1300 fill=none width=750 height=20 stroke=grey /><text x=5 y=1317>65</text><path d=M675,1317L675,45 fill=none stroke=blue /><circle cx=675 cy=45 r=2 fill=#0f0 /><rect x=0 y=1320 fill=none width=750 height=20 stroke=grey /><text x=5 y=1337>66</text><path d=M685,1337L685,245 fill=none stroke=blue /><circle cx=685 cy=245 r=2 fill=#0f0 /><rect x=0 y=1340 fill=none width=750 height=20 stroke=grey /><text x=5 y=1357>67</text><path d=M695,1357L695,445 fill=none stroke=blue /><circle cx=695 cy=445 r=2 fill=#0f0 /><rect x=0 y=1360 fill=none width=750 height=20 stroke=grey /><text x=5 y=1377>68</text><path d=M705,1377L705,645 fill=none stroke=blue /><circle cx=705 cy=645 r=2 fill=#0f0 /><rect x=0 y=1380 fill=none width=750 height=20 stroke=grey /><text x=5 y=1397>69</text><path d=M715,1397L715,845 fill=none stroke=blue /><circle cx=715 cy=845 r=2 fill=#0f0 /><rect x=0 y=1400 fill=none width=750 height=20 stroke=grey /><text x=5 y=1417>70</text><path d=M725,1417L725,1045 fill=none stroke=blue /><circle cx=725 cy=1045 r=2 fill=#0f0 /><rect x=0 y=1420 fill=none width=750 height=20 stroke=grey /><text x=5 y=1437>71</text><path d=M735,1437L735,1245 fill=none stroke=blue /><circle cx=735 cy=1245 r=2 fill=#0f0 /></svg>

# Python 2, 540464 431 bytes

Some golfing like using shorter variable names, variable substitution, list comprehension and changing everything to white (except the text). Biggest save was changing precomputed positions to dynamically (see L).

from cv2 import*
from numpy import*
D=1024
G=zeros((D,D,3),uint8)
n=7
w=(1,1,1)
R=range(n)
c=circle
I=int
L=lambda i,r=400:(I(sin(2*pi*i/n)*r+D/2),I(D/2-cos(2*pi*i/n)*r))
for i in R:
p,q=L(i),L((i*10)%n)
line(G,p,L((i+1)%n),w,5)
line(G,p,q,w,5)
f=lambda z:I(.15*p[z]+.85*q[z])
c(G,[(f(0),f(1)),L(i,450)][p==q],25,w,-1)
for i in R:
c(G,L(i),50,w,-1)
putText(G,i,(L(i)[0]-30,L(i)[1]+30),0,2,(0,0,0),2)
imwrite('m.png',G*255)


L calculates the positions of the circles by distance to origin for the big ones containing the numbers and the outer small ones that indicate self pointing.

First loop draws the connections: 1st line is the circle around and 2nd line is in the interior, a small circle is added to show direction or self pointing.

Second loop puts big circle and number.

It is obviously not as nice as the Mathematica answers, but everything made from scratch.

# Mathematica, 124 121 bytes

Graph[Join@@Thread[{k->Mod[k+1,#],k->Mod[10k,#]}~Table~{k,0,#-1}],VertexLabels->"Name",GraphLayout->"CircularEmbedding"]&


Creates a figure as a graph with directed edges. The graph output now follows the same pattern except counter-clockwise. I prefer Greg Martin's solution a lot more since the output is much more aesthetically pleasing.

A less visually pleasant graph can be generated for 82 bytes using

Graph[Join@@({k->Mod[k+1,#],k->Mod[10k,#]}~Table~{k,0,#-1}),VertexLabels->"Name"]&


For d = 8,

• Yeah, I wanted to use Graph but had the same negative reaction. Also, for the algorithm it's important to distinguish between the "clockwise" edges and the "times 10" edges. I'm sure there are options for Graph that handle that—but then, here come more bytes.... Oct 29, 2016 at 3:03
• @GregMartin I was reading through more Graph features and found tricks like using -> instead of DirectedEdge. I shortened that initial 100 byte version to 82 bytes, but then correcting it to be in the right format added another 42 bytes. Oct 29, 2016 at 3:24
• That's interesting: I tried CircularEmbedding, but it didn't put the vertices in clockwise order for n=7 (I admit I didn't try other inputs). Does it work for you with n=7? Oct 29, 2016 at 9:29
• It seems to depend on the order of the edges in the input list. I used Join and Transpose so that the outside edges would be listed first before the interior edges. The vertices are ordered correctly along a circular path, but since the edges prefer to be straight, it ends up resembling an n-gon. Oct 29, 2016 at 9:38

## Python 2 + graphviz, 147 bytes

from graphviz import*
d=Digraph()
k=input()
p=d.edge
for j in[d.node(i,i)or i for i in range(k)]:
p(j,-~j%k);p(j,10*j%k)
d.render("o")


Doesn't always draw a circle, outputs a pdf file called o

Inspired by @Loovjo, I also use ASCII art. This works for numbers under 100000 (or something like that).

g k="\t"++(foldl (++) ""$map (\y->show y++"|") [0..k]) n k=length$g k
r z x=(show x)++":\t"++(replicate f ' ')++(replicate d s)++"\n" where y=mod (x*10) z;(a,b)=(min x y,max x y);s=(case compare y x of LT->'<';EQ->'.';GT->'>');f=n (a-1)-1;d=n b-f-2
w z=(g (z-1))++"\n"++(foldl1 (++) (map (r z) [0..(z-1)]))
main=do{n<-getLine;putStrLn (w$read n);}  Basically you point from x to (x*10)%n. You can try this here. But since codepad doesn't support input, change q to the value of n you want, and resubmit. (Note that forking doesn't work, so copy and resubmit from main page). The code submitted there is a bit different, because the above version takes input from console. I hope the output is intuitive. Compression suggestions are welcome (particularly if that beats 294 ;)). • Welcome to PPCG! Nice first post! Oct 29, 2016 at 19:07 • You can remove a lot of spaces, such as the ones in foldl (++) ""$map (\... Nov 1, 2016 at 22:51

## Batch, 394 bytes

@echo off
set/an=%1-1
set s=
for /l %%j in (0,1,%n%)do call:h %%j
echo %s%
for /l %%i in (0,1,%n%)do call:r %%i %1
exit/b
:h
set "s=%s%^>%1^>"
exit/b
:r
set/ar=%1*10%%%2
set s=
for /l %%j in (0,1,%n%)do call:l %%j %1
echo %s%
exit/b
:l
if %1==%r% set "s=%s%^>%1^<"&exit/b
if %2 geq %1 if %1 geq %r% set "s=%s%^<%1%^<"&exit/b
if %2 leq %1 if %1 leq %r% goto h
set "s=%s% %1 "


Escaping in Batch is ugly at the best of times. Example output for 7:

>0>>1>>2>>3>>4>>5>>6>
>0< 1  2  3  4  5  6
0 >1>>2>>3< 4  5  6
0  1 >2>>3>>4>>5>>6<
0  1 >2<<3< 4  5  6
0  1  2  3 >4>>5< 6
0 >1<<2<<3<<4<<5< 6
0  1  2  3 >4<<5<<6<

• What kind of image does this output? This challenge is graphical-output. Oct 28, 2016 at 13:52
• @mbomb007 How's this for output? The >0< shows that 0 maps to itself, while >2<<<3< shows that 3 maps to 2.
– Neil
Oct 30, 2016 at 18:31