Artifact
a0ec7e6e460cb0d82b8f4328533ac5757efb90aebdf1f430d824ce67a5b90832:
0000: 3c 6c 6f 6f 70 2d 73 76 67 2d 6e 6f 64 65 73 3e <loop-svg-nodes>
0010: 0a 20 20 3c 73 76 67 3e 0a 20 20 20 20 3c 67 20 . <svg>. <g
0020: 64 61 74 61 2d 69 73 3d 27 6c 6f 6f 70 2d 73 76 data-is='loop-sv
0030: 67 2d 6e 6f 64 65 73 2d 63 75 73 74 6f 6d 2d 63 g-nodes-custom-c
0040: 69 72 63 6c 65 27 20 65 61 63 68 3d 7b 64 61 74 ircle' each={dat
0050: 61 20 69 6e 20 63 69 72 63 6c 65 73 7d 3e 3c 2f a in circles}></
0060: 67 3e 0a 20 20 20 20 3c 63 69 72 63 6c 65 20 65 g>. <circle e
0070: 61 63 68 3d 7b 20 70 6f 69 6e 74 73 20 7d 20 72 ach={ points } r
0080: 69 6f 74 2d 63 78 3d 7b 20 78 20 2a 20 31 30 20 iot-cx={ x * 10
0090: 2b 20 35 20 7d 20 72 69 6f 74 2d 63 79 3d 7b 20 + 5 } riot-cy={
00a0: 79 20 2a 20 31 30 20 2b 20 35 20 7d 20 72 3d 22 y * 10 + 5 } r="
00b0: 32 22 20 66 69 6c 6c 3d 22 62 6c 61 63 6b 22 3e 2" fill="black">
00c0: 3c 2f 63 69 72 63 6c 65 3e 0a 20 20 3c 2f 73 76 </circle>. </sv
00d0: 67 3e 0a 20 20 3c 70 3e 44 65 73 63 72 69 70 74 g>. <p>Descript
00e0: 69 6f 6e 3c 2f 70 3e 0a 0a 20 20 74 68 69 73 2e ion</p>.. this.
00f0: 70 6f 69 6e 74 73 20 3d 20 5b 7b 27 78 27 3a 20 points = [{'x':
0100: 31 2c 27 79 27 3a 20 30 7d 2c 20 7b 27 78 27 3a 1,'y': 0}, {'x':
0110: 20 39 2c 20 27 79 27 3a 20 36 7d 2c 20 7b 27 78 9, 'y': 6}, {'x
0120: 27 3a 20 34 2c 20 27 79 27 3a 20 37 7d 5d 0a 20 ': 4, 'y': 7}].
0130: 20 74 68 69 73 2e 63 69 72 63 6c 65 73 20 3d 20 this.circles =
0140: 5b 0a 20 20 20 20 7b 27 78 27 3a 20 34 30 2c 20 [. {'x': 40,
0150: 27 79 27 3a 20 32 30 2c 20 27 66 69 6c 6c 27 3a 'y': 20, 'fill':
0160: 20 27 72 65 64 27 7d 2c 0a 20 20 20 20 7b 27 78 'red'},. {'x
0170: 27 3a 20 36 30 2c 20 27 79 27 3a 20 32 30 2c 20 ': 60, 'y': 20,
0180: 27 66 69 6c 6c 27 3a 20 27 79 65 6c 6c 6f 77 27 'fill': 'yellow'
0190: 7d 2c 0a 20 20 5d 0a 3c 2f 6c 6f 6f 70 2d 73 76 },. ].</loop-sv
01a0: 67 2d 6e 6f 64 65 73 3e 0a 0a 3c 6c 6f 6f 70 2d g-nodes>..<loop-
01b0: 73 76 67 2d 6e 6f 64 65 73 2d 63 75 73 74 6f 6d svg-nodes-custom
01c0: 2d 63 69 72 63 6c 65 3e 0a 20 20 3c 63 69 72 63 -circle>. <circ
01d0: 6c 65 0a 20 20 20 20 72 65 66 3d 27 63 69 72 63 le. ref='circ
01e0: 6c 65 27 0a 20 20 20 20 72 69 6f 74 2d 63 78 3d le'. riot-cx=
01f0: 7b 64 61 74 61 2e 78 7d 0a 20 20 20 20 72 69 6f {data.x}. rio
0200: 74 2d 63 79 3d 7b 64 61 74 61 2e 79 7d 0a 20 20 t-cy={data.y}.
0210: 20 20 72 3d 22 31 30 22 0a 20 20 20 20 66 69 6c r="10". fil
0220: 6c 3d 7b 64 61 74 61 2e 66 69 6c 6c 7d 20 2f 3e l={data.fill} />
0230: 0a 3c 2f 6c 6f 6f 70 2d 73 76 67 2d 6e 6f 64 65 .</loop-svg-node
0240: 73 2d 63 75 73 74 6f 6d 2d 63 69 72 63 6c 65 3e s-custom-circle>