I have an SVG image that is of size 200px x 300px but based on some conditions, I need to draw small circles that have a radius value of 30 whenever a condition fails and want this to be layered evenly (no overlapping), over a specified region of my image.
There could be multiple circles drawn but obviously don't want these to go off the image but instead wrapped around to the next line down when 5 circles have already been drawn on the first row of the image.
The same would then apply on row 2, once 5 circles of radius 30 are drawn, wrap to the next line.
I'm using snapsvg.io but unsure how to calculate the region of the image, where I want my circles drawn and unsure how to perform the wrap down to the next line.
Managed to work out how to achieve this by calculating the boundary of the region I wanted to target and also using javascript's modulo operator as suggested by Robert Longson.
By boundary, I manually determined each corner position of my image region that I wanted to use, i.e. left to right to bottom and to left again - basically width/height.
Further to this, I knew that I would only display 7 small circles from left to right across this image region and so when loop index % 7 = 0 then I reset my (x,y) coordinates to start on the next ine - 2r.
