Draw a diagram of a bowline

Question

A bowline is a knot commonly used to tie the end of a rope around something.

Your task is to draw one.

enter image description here

The image you generate must contain a topologically correct bowline knot. It must be drawn in such a way that the path of the rope is clear and unambiguous. (Primarily that means the rope can't significantly change direction when obscured by another layer of rope).

The background color, the rope fill, and the rope outline must be three distinct colors. (The background may be transparent).

The rope must have a width of 20-30 pixels.

There must be an empty space in the main loop big enough for a circle of 50 pixels radius.

The long end of the rope (at the top in this image) must be clipped by the edge of the image.

The short end of the rope (to the right in this image) must terminate within the image, not touching the edge. (The end does not need an outline drawn across it, as in this image, but may.)

The layout of the knot does not need to follow the exact shape of the reference image above. For instance, you may draw it with the short end overlapping the main loop, like this:

enter image description here

There must not be any other drawing in the image that is not part of the rope.

Input

Your program/function may take as input an initialised, blank image object of some sort provided by a pre-existing library or as part of your language. (It is assumed you will be using existing line/curve drawing routines.)

Output

A compliant image, by some means. If you are modifying a pass-by-reference image object, you don't need to also explicitly return it.

Scoring

Code golf, standard rules.

• Level River St: The knots in the 2 images are different. Only 2nd is a true bowline. The 1st is (per the linked Wikipedia page) an Eskimo bowline. Both are tied by forming the small loop (the "hole"), then taking the free end (the "rabbit) up the hole, round the "tree" (main rope) and back down the hole again. Difference is the direction the rabbit goes round the tree. In both images the rabbit approaches from the right. In the true bowline (bottom) it goes round anticlockwise while in the Eskimo bowline (top) it goes round clockwise. I don't think it matters for the challenge as it's clear both are allowed.
• Steve Bennett: Ah, I was wondering about that! Thanks for picking that up and explaining it. I have always tied the non-Eskimo version.
• Ezlanding: I have a working Python solution in ~250 bytes that fetches the bowline image from the internet and prints each pixel to the terminal. Is this allowed? (Also, I have a 150-byte version that just opens the image in a new tab, but that definitely doesn't seem allowed.)
• Steve Bennett: No, you need to generate the image, not just fetch one.

Answer 1

Ruby, 318 bytes

s="<svg width='400'height='600'><path fill='none'stroke='%s'stroke-width='%d'd='M#{'M0AvqmAYvVmAYvDsA___h_s_A_#v#sA#"#m)Ah:0m)As"A"_vJ0sJ0_0Y0Av<0sA###h/m)Ah>s#A%#v-sA#!#h>m?Ah-m?Ah>s!A!_vZsA_a_h_s_A__vDmAYvM'.chars.map{|j|"hms0v".index(j)?j:" "+(j.ord-65).to_s}*""}'/>"
$><<s.tr(?m,?l)%["red",24]+s[29..-1]%["tan",20]

Try it online!

Same as below but with compression of the path definition. The characters hms0v from the magic string are passed straight through (0 appended to small numbers to make bigger ones.) All other characters are converted to a (positive or negative) number equal to their ascii code minus 65. A space is prepended to numbers for separation. The SVG produced is essentially the same as below, except that the separators between numbers are all spaces.

Ruby, (削除) 373 (削除ここまで) 367 bytes

s="<svg width='400'height='600'><path fill='none'stroke='%s'stroke-width='%d'd='M120,0v48m0,24v21m0,24v3s0,30 30,30h30s30,0 30-30v-30s0-30-31-30m-24,0h-70m-24,0s-31,0-31,30v90s90,300 240,0v-50s0,-30-30-30h-18m-24,0h-3s-30,0-28-30v-20s0,-30-32-30h-3m-2,0h-20m-2,0h-3s-32,0-32,30v25s0,30,32,30h30s30,0,30,30v3m0,24v12'/>"
$><<s.tr(?m,?l)%["red",24]+s[29..-1]%["tan",20]

Try it online!

Ruby code prints the following SVG image code to Stdout:

<svg width='400'height='600'><path fill='none'stroke='red'stroke-width='24'd='M120,0v48l0,24v21l0,24v3s0,30 30,30h30s30,0 30-30v-30s0-30-31-30l-24,0h-70l-24,0s-31,0-31,30v90s90,300 240,0v-50s0,-30-30-30h-18l-24,0h-3s-30,0-28-30v-20s0,-30-32-30h-3l-2,0h-20l-2,0h-3s-32,0-32,30v25s0,30,32,30h30s30,0,30,30v3l0,24v12'/><path fill='none'stroke='tan'stroke-width='20'd='M120,0v48m0,24v21m0,24v3s0,30 30,30h30s30,0 30-30v-30s0-30-31-30m-24,0h-70m-24,0s-31,0-31,30v90s90,300 240,0v-50s0,-30-30-30h-18m-24,0h-3s-30,0-28-30v-20s0,-30-32-30h-3m-2,0h-20m-2,0h-3s-32,0-32,30v25s0,30,32,30h30s30,0,30,30v3m0,24v12'/>

A 3-coloured, graphical answer, in accordance with the spec. The knot is a bit squarish but there's nothing against that in the spec.

A thick red path with a thinner, broken tan path on top. Red and tan are the two shortest colour names in SVG. The Ruby code contains the path for the tan curve only. The red path is generated by substituting the gaps (m for move) with lines (l for line) in the path definition.

• Steve Bennett: Nice one! And good to remember "tan" for future similar challenges :)

Answer 2

Wolfram Language (Mathematica), 84 bytes

ImageTake[KnotData@{6,2},{80,6!},6!]~Show~Graphics@{White,Cuboid[{350,6!},{6!,600}]}

As usual, a builtin! KnotData@{6,2} is the bowline knot \6ドル_2\$ (with its ends attached). ImageTake clips the top of the image to create two rope ends; then a white rectangle (Cuboid) is superimposed to create a short end of the rope that doesn't touch the edge of the image. 6! is just a shorter way of writing \720ドル\$ which is a large enough coordinate for these purposes.

bowline knot

• Steve Bennett: Ooh, interesting. Nothing against the built-in, but I wouldn't say the 3D shading complies with "The background color, the rope fill, and the rope outline must be three distinct colors".
• Greg Martin: Agreed, though this isn't the only answer that doesnt.
• Steve Bennett: Which do you mean? I'm assuming all the ASCII submissions are non-competing.

Answer 3

AWK, (削除) 6306 (削除ここまで) 3990 bytes

func p(X,Y){for(s=Z;X--;)s=s Y;return s}func f(A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T){return p(A,(k=" "))p(B,(l="#"))p(C,k)p(D,l)p(E,k)p(F,l)p(G,k)p(H,l)p(I,k)p(J,l)p(K,k)p(L,l)p(M,k)p(N,l)p(O,k)p(P,l)p(Q,k)p(R,l)p(S,k)p(T,l)}BEGIN{OFS=RS;print f(56,1,10,2),f(56,1,10,2),f(56,1,10,2),f(56,1,10,2),f(56,1,10,2),f(56,1,10,2),f(56,2,9,2),f(56,2,9,2),f(56,2,9,2),f(56,2,10,1),f(56,2,10,1),f(56,2,10,1),f(56,2,10,1),f(56,2,10,1),f(57,1,10,1),f(57,1,10,1),f(57,1,10,1),f(57,1,10,2),f(57,1,10,2),f(57,1,10,2),f(57,1,10,2),f(57,1,10,2),f(57,2,9,2),f(57,2,9,2),f(57,2,10,1),f(57,2,10,1),f(57,2,10,1),f(57,2,10,1),f(57,2,10,1),f(57,2,10,1),f(57,2,10,1),f(55,4,10,2),f(49,5,3,2,10,3),f(46,3,8,2,10,2,1,4),f(44,3,10,2,10,2,5,3),f(43,2,12,2,10,2,8,2),f(42,2,13,2,10,2,10,2),f(41,2,14,2,10,2,12,2),f(40,2,11,6,10,2,14,2),f(40,1,11,2,4,1,10,3,14,2),f(39,2,10,2,5,1,10,2,1,2,13,2),f(39,2,10,1,6,1,10,1,4,2,12,2),f(39,2,10,1,6,1,10,1,6,2,10,12),f(39,2,10,1,6,1,10,2,3,5,10,2,10,5),f(40,1,10,2,5,1,10,5,4,2,10,1,15,4),f(40,2,10,2,3,2,8,4,7,2,10,2,18,3),f(41,1,12,2,1,2,6,3,11,2,10,2,20,2),f(41,2,12,4,3,3,15,2,11,2,21,2),f(42,2,13,6,17,2,11,4,20,2),f(43,2,14,3,16,4,12,8,17,1),f(45,2,15,3,10,3,3,2,13,2,5,3,14,2),f(47,2,16,3,4,2,9,1,14,2,6,2,13,2),f(48,3,17,4,12,2,14,2,6,2,12,2),f(50,3,18,3,11,2,15,2,6,2,11,1),f(51,4,19,4,9,2,15,2,5,2,11,1),f(50,2,3,3,20,3,8,2,15,2,4,2,10,2),f(48,2,8,3,20,3,7,2,15,2,3,1,10,2),f(47,2,11,4,20,3,6,2,15,5,10,1),f(45,2,13,2,2,3,20,2,6,2,15,3,10,1),f(44,2,12,4,5,4,18,2,6,2,14,2,10,1),f(43,2,12,5,8,4,17,2,6,2,12,2,10,1),f(42,2,12,1,4,1,10,5,16,2,6,2,9,2,10,2),f(41,2,11,2,5,2,10,1,3,3,14,2,7,2,7,2,10,2),f(40,1,12,2,7,1,10,2,5,2,14,2,7,2,4,2,10,2),f(38,2,12,2,8,2,10,2,6,2,14,2,7,5,11,4),f(37,2,12,1,11,1,11,2,7,2,13,2,8,2,11,2,2,3),f(36,2,12,1,12,2,11,2,8,2,12,2,7,1,11,2,5,3),f(35,2,12,1,14,2,11,2,8,2,13,2,3,2,11,2,9,2),f(34,2,11,2,16,2,12,2,8,2,12,5,11,2,12,3),f(33,2,11,2,18,2,13,2,7,2,12,2,12,2,16,2),f(32,2,11,2,20,2,14,3,6,2,7,3,13,5,16,3),f(31,2,11,2,23,1,15,4,4,2,3,4,14,2,4,2,17,3,8),f(31,1,11,2,25,2,17,9,17,2,7,2,18,2,6),f(30,1,11,2,28,2,39,2,11,3),f(29,1,11,2,31,2,35,3,15,2),f(28,1,11,2,34,3,29,6,17,3),f(27,2,11,1,38,3,23,4,4,2,19,3),f(26,2,11,1,42,4,16,4,8,2,21,3),f(25,2,11,2,46,18,11,2,23,4,8),f(24,2,11,2,64,2,11,2),f(24,1,11,2,66,2,11,2),f(23,2,10,2,68,2,11,2),f(22,2,11,1,70,2,11,2),f(22,1,11,1,72,2,11,1),f(21,1,11,2,73,2,11,1),f(20,2,10,2,75,1,12,1),f(19,2,11,1,77,1,11,2),f(19,1,11,2,78,1,11,2),f(18,2,10,2,80,1,11,2),f(18,1,11,1,81,2,11,2),f(17,2,10,2,82,2,11,1),f(16,2,10,2,84,2,10,2),f(16,1,11,1,86,1,11,2),f(15,2,10,2,87,1,11,1),f(15,1,11,1,88,2,10,2),f(14,2,10,2,89,2,10,2),f(14,1,11,1,91,1,11,1),f(13,2,10,2,91,2,10,2),f(13,1,11,1,93,2,10,2),f(12,2,10,2,94,1,11,1),f(12,2,10,1,95,2,10,2),f(12,1,10,2,96,1,11,1),f(11,2,10,2,96,2,10,2),f(11,2,10,1,98,1,10,2),f(11,1,10,2,98,2,10,1),f(11,1,10,2,99,1,10,2),f(10,2,10,2,99,2,10,1),f(10,2,10,1,100,2,10,2),f(10,2,10,1,101,1,10,2),f(10,2,10,1,101,2,10,1),f(10,2,9,2,101,2,10,1),f(10,2,9,2,101,2,10,1),f(10,2,10,1,102,1,10,2),f(10,2,10,1,102,1,10,2),f(10,2,10,1,102,1,10,2),f(11,1,10,2,101,1,10,2),f(11,1,10,2,101,1,10,2),f(11,2,10,1,101,1,10,2),f(11,2,10,2,100,1,10,2),f(12,1,10,2,100,1,10,2),f(12,2,10,1,100,1,10,2),f(13,1,10,2,99,1,10,2),f(13,2,10,1,98,2,10,1),f(13,2,10,2,97,2,10,1),f(14,2,10,2,96,2,10,1),f(15,1,11,1,96,1,10,2),f(15,2,10,2,94,2,10,2),f(16,1,11,2,93,2,10,1),f(17,1,11,2,92,1,10,2),f(17,2,11,1,91,2,10,2),f(18,2,11,1,90,1,11,1),f(19,1,12,1,88,2,10,2),f(20,1,12,1,87,1,11,1),f(21,1,12,1,85,2,10,2),f(21,2,12,1,83,2,11,1),f(23,1,12,2,81,1,11,2),f(24,1,12,2,79,2,10,2),f(25,1,12,2,77,2,11,1),f(26,2,12,2,74,2,11,2),f(27,2,12,2,72,2,11,2),f(28,2,13,2,69,2,11,2),f(30,2,13,2,66,2,11,2),f(31,2,13,3,63,2,11,2),f(32,2,14,3,59,2,12,2),f(34,2,14,3,56,2,12,2),f(36,2,15,2,52,2,13,2),f(37,3,15,3,47,2,14,1),f(39,3,16,3,41,3,14,2),f(41,3,17,4,34,3,16,2),f(43,3,19,5,25,4,17,2),f(46,2,22,7,11,7,19,2),f(48,3,30,4,27,2),f(51,3,55,3),f(54,3,49,3),f(58,4,41,3),f(62,5,32,4),f(67,6,19,6),f(75,15)}

Attempt This Online!

Code could be shorter, but wanted high 'fidelity' for the image.

Previous attempt

func f(n){for(s="";n--;)s=s" ";return s}
BEGIN {OFS="\n"
print f(56)"#"f(10)"##",f(56)"#"f(10)"##",f(56)"#"f(10)"##",f(56)"#"f(10)"##",f(56)"#"f(10)"##",f(56)"#"f(10)"##",
f(56)"##"f(9)"##",f(56)"##"f(9)"##",f(56)"##"f(9)"##",f(56)"##"f(10)"#",
f(56)"##"f(10)"#",f(56)"##"f(10)"#",f(56)"##"f(10)"#",f(56)"##"f(10)"#",
f(57)"#"f(10)"#",f(57)"#"f(10)"#",f(57)"#"f(10)"#",f(57)"#"f(10)"##",
f(57)"#"f(10)"##",f(57)"#"f(10)"##",f(57)"#"f(10)"##",f(57)"#"f(10)"##",
f(57)"##"f(9)"##",f(57)"##"f(9)"##",f(57)"##"f(10)"#",f(57)"##"f(10)"#",
f(57)"##"f(10)"#",f(57)"##"f(10)"#",f(57)"##"f(10)"#",f(57)"##"f(10)"#",
f(57)"##"f(10)"#",f(55)"####"f(10)"##",f(49)"#####"f(3)"##"f(10)"###",f(46)"###"f(8)"##"f(10)"##"f(1)"####",
f(44)"###"f(10)"##"f(10)"##"f(5)"###",f(43)"##"f(12)"##"f(10)"##"f(8)"##",
f(42)"##"f(13)"##"f(10)"##"f(10)"##",f(41)"##"f(14)"##"f(10)"##"f(12)"##",
f(40)"##"f(11)"######"f(10)"##"f(14)"##",f(40)"#"f(11)"##"f(4)"#"f(10)"###"f(14)"##",
f(39)"##"f(10)"##"f(5)"#"f(10)"##"f(1)"##"f(13)"##",
f(39)"##"f(10)"#"f(6)"#"f(10)"#"f(4)"##"f(12)"##",
f(39)"##"f(10)"#"f(6)"#"f(10)"#"f(6)"##"f(10)"############",
f(39)"##"f(10)"#"f(6)"#"f(10)"##"f(3)"#####"f(10)"##"f(10)"#####",
f(40)"#"f(10)"##"f(5)"#"f(10)"#####"f(4)"##"f(10)"#"f(15)"####",
f(40)"##"f(10)"##"f(3)"##"f(8)"####"f(7)"##"f(10)"##"f(18)"###",
f(41)"#"f(12)"##"f(1)"##"f(6)"###"f(11)"##"f(10)"##"f(20)"##",
f(41)"##"f(12)"####"f(3)"###"f(15)"##"f(11)"##"f(21)"##",
f(42)"##"f(13)"######"f(17)"##"f(11)"####"f(20)"##",
f(43)"##"f(14)"###"f(16)"####"f(12)"########"f(17)"#",
f(45)"##"f(15)"###"f(10)"###"f(3)"##"f(13)"##"f(5)"###"f(14)"##",
f(47)"##"f(16)"###"f(4)"##"f(9)"#"f(14)"##"f(6)"##"f(13)"##",
f(48)"###"f(17)"####"f(12)"##"f(14)"##"f(6)"##"f(12)"##",
f(50)"###"f(18)"###"f(11)"##"f(15)"##"f(6)"##"f(11)"#",
f(51)"####"f(19)"####"f(9)"##"f(15)"##"f(5)"##"f(11)"#",
f(50)"##"f(3)"###"f(20)"###"f(8)"##"f(15)"##"f(4)"##"f(10)"##",
f(48)"##"f(8)"###"f(20)"###"f(7)"##"f(15)"##"f(3)"#"f(10)"##",
f(47)"##"f(11)"####"f(20)"###"f(6)"##"f(15)"#####"f(10)"#",
f(45)"##"f(13)"##"f(2)"###"f(20)"##"f(6)"##"f(15)"###"f(10)"#",
f(44)"##"f(12)"####"f(5)"####"f(18)"##"f(6)"##"f(14)"##"f(10)"#",
f(43)"##"f(12)"#####"f(8)"####"f(17)"##"f(6)"##"f(12)"##"f(10)"#",
f(42)"##"f(12)"#"f(4)"#"f(10)"#####"f(16)"##"f(6)"##"f(9)"##"f(10)"##",
f(41)"##"f(11)"##"f(5)"##"f(10)"#"f(3)"###"f(14)"##"f(7)"##"f(7)"##"f(10)"##",
f(40)"#"f(12)"##"f(7)"#"f(10)"##"f(5)"##"f(14)"##"f(7)"##"f(4)"##"f(10)"##",
f(38)"##"f(12)"##"f(8)"##"f(10)"##"f(6)"##"f(14)"##"f(7)"#####"f(11)"####",
f(37)"##"f(12)"#"f(11)"#"f(11)"##"f(7)"##"f(13)"##"f(8)"##"f(11)"##"f(2)"###",
f(36)"##"f(12)"#"f(12)"##"f(11)"##"f(8)"##"f(12)"##"f(7)"#"f(11)"##"f(5)"###",
f(35)"##"f(12)"#"f(14)"##"f(11)"##"f(8)"##"f(13)"##"f(3)"##"f(11)"##"f(9)"##",
f(34)"##"f(11)"##"f(16)"##"f(12)"##"f(8)"##"f(12)"#####"f(11)"##"f(12)"###",
f(33)"##"f(11)"##"f(18)"##"f(13)"##"f(7)"##"f(12)"##"f(12)"##"f(16)"##",
f(32)"##"f(11)"##"f(20)"##"f(14)"###"f(6)"##"f(7)"###"f(13)"#####"f(16)"###",
f(31)"##"f(11)"##"f(23)"#"f(15)"####"f(4)"##"f(3)"####"f(14)"##"f(4)"##"f(17)"###"f(8),
f(31)"#"f(11)"##"f(25)"##"f(17)"#########"f(17)"##"f(7)"##"f(18)"##"f(6),
f(30)"#"f(11)"##"f(28)"##"f(39)"##"f(11)"###",
f(29)"#"f(11)"##"f(31)"##"f(35)"###"f(15)"##",
f(28)"#"f(11)"##"f(34)"###"f(29)"######"f(17)"###",
f(27)"##"f(11)"#"f(38)"###"f(23)"####"f(4)"##"f(19)"###",
f(26)"##"f(11)"#"f(42)"####"f(16)"####"f(8)"##"f(21)"###",
f(25)"##"f(11)"##"f(46)"##################"f(11)"##"f(23)"####"f(8),
f(24)"##"f(11)"##"f(64)"##"f(11)"##",f(24)"#"f(11)"##"f(66)"##"f(11)"##",
f(23)"##"f(10)"##"f(68)"##"f(11)"##",f(22)"##"f(11)"#"f(70)"##"f(11)"##",
f(22)"#"f(11)"#"f(72)"##"f(11)"#",f(21)"#"f(11)"##"f(73)"##"f(11)"#",
f(20)"##"f(10)"##"f(75)"#"f(12)"#",f(19)"##"f(11)"#"f(77)"#"f(11)"##",
f(19)"#"f(11)"##"f(78)"#"f(11)"##",f(18)"##"f(10)"##"f(80)"#"f(11)"##",
f(18)"#"f(11)"#"f(81)"##"f(11)"##",f(17)"##"f(10)"##"f(82)"##"f(11)"#",
f(16)"##"f(10)"##"f(84)"##"f(10)"##",f(16)"#"f(11)"#"f(86)"#"f(11)"##",
f(15)"##"f(10)"##"f(87)"#"f(11)"#",f(15)"#"f(11)"#"f(88)"##"f(10)"##",
f(14)"##"f(10)"##"f(89)"##"f(10)"##",f(14)"#"f(11)"#"f(91)"#"f(11)"#",
f(13)"##"f(10)"##"f(91)"##"f(10)"##",f(13)"#"f(11)"#"f(93)"##"f(10)"##",
f(12)"##"f(10)"##"f(94)"#"f(11)"#",f(12)"##"f(10)"#"f(95)"##"f(10)"##",
f(12)"#"f(10)"##"f(96)"#"f(11)"#",f(11)"##"f(10)"##"f(96)"##"f(10)"##",
f(11)"##"f(10)"#"f(98)"#"f(10)"##",f(11)"#"f(10)"##"f(98)"##"f(10)"#",
f(11)"#"f(10)"##"f(99)"#"f(10)"##",f(10)"##"f(10)"##"f(99)"##"f(10)"#",
f(10)"##"f(10)"#"f(100)"##"f(10)"##",f(10)"##"f(10)"#"f(101)"#"f(10)"##",
f(10)"##"f(10)"#"f(101)"##"f(10)"#",f(10)"##"f(9)"##"f(101)"##"f(10)"#",
f(10)"##"f(9)"##"f(101)"##"f(10)"#",f(10)"##"f(10)"#"f(102)"#"f(10)"##",
f(10)"##"f(10)"#"f(102)"#"f(10)"##",f(10)"##"f(10)"#"f(102)"#"f(10)"##",
f(11)"#"f(10)"##"f(101)"#"f(10)"##",f(11)"#"f(10)"##"f(101)"#"f(10)"##",
f(11)"##"f(10)"#"f(101)"#"f(10)"##",f(11)"##"f(10)"##"f(100)"#"f(10)"##",
f(12)"#"f(10)"##"f(100)"#"f(10)"##",f(12)"##"f(10)"#"f(100)"#"f(10)"##",
f(13)"#"f(10)"##"f(99)"#"f(10)"##",f(13)"##"f(10)"#"f(98)"##"f(10)"#",
f(13)"##"f(10)"##"f(97)"##"f(10)"#",f(14)"##"f(10)"##"f(96)"##"f(10)"#",
f(15)"#"f(11)"#"f(96)"#"f(10)"##",f(15)"##"f(10)"##"f(94)"##"f(10)"##",
f(16)"#"f(11)"##"f(93)"##"f(10)"#",f(17)"#"f(11)"##"f(92)"#"f(10)"##",
f(17)"##"f(11)"#"f(91)"##"f(10)"##",f(18)"##"f(11)"#"f(90)"#"f(11)"#",
f(19)"#"f(12)"#"f(88)"##"f(10)"##",f(20)"#"f(12)"#"f(87)"#"f(11)"#",
f(21)"#"f(12)"#"f(85)"##"f(10)"##",f(21)"##"f(12)"#"f(83)"##"f(11)"#",
f(23)"#"f(12)"##"f(81)"#"f(11)"##",f(24)"#"f(12)"##"f(79)"##"f(10)"##",
f(25)"#"f(12)"##"f(77)"##"f(11)"#",f(26)"##"f(12)"##"f(74)"##"f(11)"##",
f(27)"##"f(12)"##"f(72)"##"f(11)"##",f(28)"##"f(13)"##"f(69)"##"f(11)"##",
f(30)"##"f(13)"##"f(66)"##"f(11)"##",f(31)"##"f(13)"###"f(63)"##"f(11)"##",
f(32)"##"f(14)"###"f(59)"##"f(12)"##",f(34)"##"f(14)"###"f(56)"##"f(12)"##",
f(36)"##"f(15)"##"f(52)"##"f(13)"##",f(37)"###"f(15)"###"f(47)"##"f(14)"#",
f(39)"###"f(16)"###"f(41)"###"f(14)"##",f(41)"###"f(17)"####"f(34)"###"f(16)"##",
f(43)"###"f(19)"#####"f(25)"####"f(17)"##",f(46)"##"f(22)"#######"f(11)"#######"f(19)"##",
f(48)"###"f(30)"####"f(27)"##",f(51)"###"f(55)"###",
f(54)"###"f(49)"###",f(58)"####"f(41)"###",
f(62)"#####"f(32)"####",f(67)"######"f(19)"######",
f(75)"###############"f(62)}

Attempt This Online!

Lol.... gaze upon this monstrosity.

screenshot

• Pedro Maimere: You can save some bytes by omitting a newline, a space, setting s an empty variable, and using RS instead of "\n": func f(n){for(s=a;n--;)s=s" ";return s}BEGIN{OFS=RS.

Answer 4

PowerShell (Windows and Core), (削除) 640 (削除ここまで) 706 bytes

$m=[IO.MemoryStream]
$i=$m::new([Convert]::FromBase64String('H4sIAAAAAAAEAM2WwRnDIAhG707hHJzYf6qmfgI/gomkl3qoJvBAwGB7j4PpGtwSyT+I+DuGiFfheE0sP6t8ilUeNKZZmadOorLMNPZ0b8u7Tbc2dHgJQoA8VDaDOMfYv3lTW9e29JltFasgDHlEmaw6xLht8LtjfAjOvlZrEz2kwEWS1I3VMm5GfSUp0PzA0pLW01MIDD6odzsFiDnKout6LgintsGgPsyWzuH1Wrcd1aHOVrn53lEeshyY13anLYhtburfqK85arsQDognwCGHBDLHCEAF5i0ljbQGvcZecz+DxbQAWCY9WCCtNdVIaGkVMH5mxTNd4Zb+BG3sHMK+fMw8U/ldru1yD4SbB25EhrfabbMbUYdrzJl5sUZhxL8AzrsbH51uZBPVCQAA'))
$o=$m::new()
$g=[IO.Compression.GZipStream]::new($i,[IO.Compression.CompressionMode]::Decompress)
$g|% C*o $o
$g|% D*e
[console]::BackgroundColor=0
cls
$o|% T*y|%{$c=Switch($_){64{2};58{10};default{0}};[char]$_|Write-Host -F $c -B $c -N}

Try it online!

Edit: Bought color support for 66 bytes, fixed issue in PS on Windows 11

TIO has no color support, so the TIO link will show (削除) fifty (削除ここまで)three shades of grey instead of three colors.
When pasted directly into a PowerShell console (or saved and run as script), it will show the bowline in green, light green, and black (just to remain in the ASCII art tradition).
With the console configured to the raster font 4x6, the rope's width of mostly seven characters will end up in the correct range.
The ASCII art could be golfed a bit further, but who's counting? (削除) 640 (削除ここまで)706 (削除) kilo (削除ここまで)bytes ought to be enough for anybody.

The only lines where some actual code golfing could take place is

$g|% C*o $o
$g|% D*e
$o|% T*y|...

which ungolfs to

$g | ForEach-Object -MemberName CopyTo $o
$g | ForEach-Object -MemberName Dispose
$o | ForEach-Object -MemberName ToArray

which are more complicated versions of

$g.CopyTo($o)
$g.Dispose()
$o.ToArray()

With a little help of https://www.asciiart.eu/image-to-ascii

Bowline as ASCII art with raster font 4x6

• Level River St: A nice first answer to the question but I would say its' noncompeting as it doesn't comply with the image or colour rules.
• user314159: @level-river-st PowerShell is rarely competing anyway (see [IO.Compression.CompressionMode]::Decompress, which is actually just 0, but there are two constructors, and using an integer instead of the enum makes the call ambiguous) ...
• user314159: @level-river-st You convinced me; colors are now supported when run in a PS console.
• Steve Bennett: Hey, that's pretty cool. :)

Answer 5

Pug/HTML (削除) 173 (削除ここまで) (削除) 170 (削除ここまで) 168 + CSS 59 = (削除) 232 (削除ここまで) (削除) 229 (削除ここまで) 227 bytes

Pug

svg(viewBox="-5 -2 14 27"): each p in ['M2 9v5M2 1C1-2-6 1-2 4','M0-2v10','M4 7c8 24-8 19-8 6S7 4 7 8','M7 8c0 5-7 5-7 0m2 1Q2 7-2 4M2 1 4 7']
 path.a(d=p)
 path.b(d=p)

CSS

.a,.b{fill:none}.a{stroke:red;stroke-width:2}.b{stroke:tan}

Try it online!

The compiled code is not a valid standalone SVG file, but needs to be rendered by a HTML browser. The result is scalable and has no fixed size, it rather depends on the available viewport.

If, for example, you assume a factor of 15 for scaling, the output has an overall size of 210*405px, a line width of 30px, and an inner distance in the main loop of 115px at the widest point. That is enough for a circle of radius 50.

enter image description here

---

With another small correction without change to the byte count, the circle now fits in the empty space.

-2 bytes with moving one vertex, and some more neutral optimizations elsewhere; -1 byte found by SvgPathEditor "Optimize" command.

-2 bytes by shifting the viewBox.

• Level River St: This looks really good. Looks like you broke the path up into sections and plotted the bottom ones first and the top ones last. I considered doing it that way but settled on a single path. One small thing: the main loop should be big enough to hold a circle of radius 50. If the width of your line is 20-30, your main loop isn't big enough.
• ccprog: @LevelRiverSt Small changes that did not change byte count. – Anyway, I am quite sure the dimensions were correct even before the change.

Answer 6

JavaScript (ES6), (削除) 835 (削除ここまで) (削除) 670 (削除ここまで) (削除) 547 (削除ここまで) 446 bytes

Attempt 4

(d=document).body.appendChild(c=d.createElement`canvas`)
c.width=c.height=555
z=c.getContext`2d`
e=(X,Y,f,g,h,i,x,y,o,w)=>{z.strokeStyle=o
z.lineWidth=w
z.beginPath()
z.moveTo(X*9,Y*9)
z.bezierCurveTo(f*9,g*9,h*9,i*9,x*9,y*9)
z.stroke()};b=(X,Y,f,g,h,i,x,y)=>{e(X,Y,f,g,h,i,x,y,"red",29)
e(X,Y,f,g,h,i,x,y,"tan",21)}
b(24,24,u=27,u,u,30,29,33)
b(13,0,12,51,42,5,s=19,r=15)
b(20,14,~u,70,72,59,u,22)
b(r,q=11,21,q,s,r,25,20)
b(23,22,s,17,1,q,12,q)

Attempt 3

var c = document.createElement('canvas')
document.body.appendChild(c)
c.width = c.height = 555
var z = c.getContext('2d')
function d(sX,sY,cX,cY,dX,dY,x,y,o,w) {
z.strokeStyle = o
z.lineWidth = w
z.beginPath()
z.moveTo(sX,sY)
z.bezierCurveTo(cX,cY,dX,dY,x,y)
z.stroke()
}
function b(sX,sY,cX,cY,dX,dY,x,y) {
d(sX,sY,cX,cY,dX,dY,x,y,"red",29)
d(sX,sY,cX,cY,dX,dY,x,y,"tan",21)
}
b(164,178,221,191,254,279,280,331)
b(144,0,120,521,427,71,165,141)
b(164,142,-205,453,602,687,282,228)
b(164,91,197,101,181,151,255,199)
b(227,233,211,183,21,123,141,85)

Attempt 2

var c = document.createElement('canvas')
document.body.appendChild(c)
c.width *= window.devicePixelRatio
c.height *= window.devicePixelRatio
var z = c.getContext('2d')
function d(sX,sY,cp1x,cp1y,cp2x,cp2y,x,y,o,w) {
 z.strokeStyle = o
 z.lineWidth = w
 z.beginPath()
 z.moveTo(sX,sY)
 z.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
 z.stroke()
}
function b(sX,sY,cp1x,cp1y,cp2x,cp2y,x,y) {
 d(sX,sY,cp1x,cp1y,cp2x,cp2y,x,y,"#000",29)
 d(sX,sY,cp1x,cp1y,cp2x,cp2y,x,y,"#FFF",21)
}
[[164,178,221,191,254,279,280,331],[144,4,120,521,427,71,165,141],[164,142,-205,453,602,687,282,228],[164,91,197,101,181,151,255,199],[227,233,211,183,21,123,141,85]].forEach(a => b(...a))

Attempt 1

const canvas = document.createElement('canvas')
document.body.appendChild(canvas)
canvas.width *= window.devicePixelRatio
canvas.height *= window.devicePixelRatio
const ctx = canvas.getContext('2d')
function c(sX, sY, cp1x, cp1y, cp2x, cp2y, x, y, c, w) {
 ctx.strokeStyle = c
 ctx.lineWidth = w
 ctx.beginPath()
 ctx.moveTo(sX, sY)
 ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
 ctx.stroke()
}
function b(sX, sY, cp1x, cp1y, cp2x, cp2y, x, y) {
 c(sX, sY, cp1x, cp1y, cp2x, cp2y, x, y, "black", 29)
 c(sX, sY, cp1x, cp1y, cp2x, cp2y, x, y, "white", 21)
}
`164,178, 221,191, 254,279, 280,331
144,4, 120,521, 427,71, 165,141
164,142, -205,453, 602,687, 282,228
164,91, 197,101, 181,151, 255,199
227,233, 211,183, 21,123, 141,85`
 .split("\n")
 .forEach((line) => b(...line.split(",").map((p) => parseInt(p.trim(), 10))))

• Themoonisacheese: Welcome to code golf and nice first submission! I see a few easy outgolfs (unneccesary whitespace, long variable names) but really solid otherwise!