Faint separation line between svgs on a diagonal path

Processing Coding Questions
1 
import processing.svg.*;

PShape svg1;

float size;
float sizeD;

void setup()
{
  size(1440, 1240);
  shapeMode(CENTER);
  svg1=loadShape("1.svg");
  size = 150;
  sizeD = sqrt(pow(size, 2) + pow(size, 2));
}

void draw()
{ 
  background(0);
  translate(width/2, height/2);
  ellipse(0, 0, 5, 5);
  
  push();
  translate(3*size*cos(radians(45)),3*size*sin(radians(-45)));
  rotate(radians(45));
  shape(svg1,0,0,size,size);
  ellipse(0,0,5,5);
  pop();
  
  push();
  translate(3*size*cos(radians(45)),3*size*sin(radians(-45)));
  //float hypo = sqrt(pow(2*size,2) + pow(size,2));
  float x = cos(radians(45))*size;
  float y = sin(radians(45))*size;
  translate(x,y);
  rotate(radians(45));
  shape(svg1,0,0,-size,size);
  ellipse(0,0,5,5);
  
  pop();
  
   push();
  translate(3*size*cos(radians(45)),3*size*sin(radians(-45)));
  //float hypo = sqrt(pow(2*size,2) + pow(size,2));
   x = cos(radians(45))*2*size;
   y = sin(radians(45))*2*size;
  translate(x,y);
  rotate(radians(45));
  shape(svg1,0,0,size,size);
  ellipse(0,0,5,5);
  
  pop();
  
  
  
   push();
  translate(3*sizeD*cos(radians(0)),3*sizeD*sin(radians(0)));
  rotate(radians(45)); 
  shape(svg1,0,0,-size,size);
  ellipse(0,0,5,5);
  pop(); 
  shape(svg1,-size,0,-size,size);
  shape(svg1,-2*size,0,size,size);
  shape(svg1,-3*size,0,-size,size);
 
}

I don’t know if this is a coding issue or svg issue as when svgs are positioned next to each other all is good. But when translated & rotated along a diagonal path. There is a faint line with slight dispositioning of designs in svgs.

Is there a way of regrouping svg elements that are present in two separate svgs. Like in my example, the semi ellipses on the sides are located in two separate svgs but when positioning them in processing I want them together. Some what like regrouping & redrawing the whole ellipse together on the same exact place.

Or just getting rid of the faint line (just how svgs without rotation appear ) without the need to regroup them.

Any insight would be greatly helpful.

Attaching png file as svg is not accepted.

1
1833×833 13.1 KB

a
a1440×1240 76.9 KB

1 Like
4

Hi @Ruchi – you answered your own question, marked as solved, but then deleted your reply – this left your question posted, but with a (hidden) solution marked.

Would you like your question hidden? Or do you still want answers? I couldn’t tell.

5

I changed the question as I figured out the solution for earlier post. But I don’t see any solution tick on my end. The question is still open to answers.
Thanks:)

7

Have you tried looking at the source of the svg? Is it possible that those circles are drawn as two separate halves in the source? That might cause cracks to appear if the two halves are rotated.

Just a guess.

8

@jeremydouglass well the svg is created by me. I have many such svgs as I am creating a pattern. I want them separate ellipses in the svgs only. For now the cheat solution I am using is to slide them outside the square a bit in illustrator so that when the merge they look combined in processing.

1 Like