Trouble exporting 3D animation to SVG

Processing Coding Questions
1

Hey, everyone.

I’m just starting with coding and Processing, in particular. I’ve watched this great tutorial on how to make this nice 3D animation and I tried it myself. Everything worked great but I wanted to export the end result as a SVG file so I can edit it on Figma or Illustrator.

But no matter what I tried, I always end up with nothing but a white canvas. This is the code and what I’ve tried to do to solve this.

First attempt:

PImage img;
import processing.svg.*;
boolean record;

void setup() {
  size(900, 900, P3D);
  img = loadImage("art.png");
  img.resize(900, 900);
}

void draw() {
  if (record) {
    beginRecord(SVG, "frame-####.svg");
  }
  
  background(#f1f1f1);
  fill(0);
  noStroke();
  sphereDetail(3);
  float tiles = 100;
  float tileSize = width/tiles;
  
  push();
  
  translate(width/2,height/2);
  rotateY(radians(frameCount));
  
  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < tiles; y++) {
      color c = img.get(int(x*tileSize),int(y*tileSize));
      float b = map(brightness(c),0,255,1,0);
      float z = map(b,0,1,-150,150);
      
      push();
      translate(x*tileSize - width/2, y*tileSize - height/2, z);
      sphere(tileSize*b*0.4);
      pop();
    }
  }
  
  pop();
  
  if (record) {
    endRecord();
    record = false;
  }
}

// Use a keypress so thousands of files aren't created
void mousePressed() {
  record = true;
}

What I’ve got from this is a small freeze in the animation when I click with my mouse and a gray (#f1f1f1) frame-####.svg (897 bytes).

Second attempt:

PImage img;
import processing.svg.*;
boolean record;

void setup() {
  size(900, 900, P3D);
  img = loadImage("art.png");
  img.resize(900, 900);
}

void draw() {
  if (record) {
    beginRaw(SVG, "output.svg");
  }
  
  background(#f1f1f1);
  fill(0);
  noStroke();
  sphereDetail(3);
  float tiles = 100;
  
  float tileSize = width/tiles;
  push();
  
  translate(width/2,height/2);
  rotateY(radians(frameCount));
  
  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < tiles; y++) {
      color c = img.get(int(x*tileSize),int(y*tileSize));
      float b = map(brightness(c),0,255,1,0);
      float z = map(b,0,1,-150,150);
    
      push();
      
      translate(x*tileSize - width/2, y*tileSize - height/2, z);
      sphere(tileSize*b*0.4);
      pop();
      
      if (record) {
        endRaw();
        record = false;
      }
    }
  }
   
  pop();
}

void keyPressed() {
  if (key == 'r') {
    record = true;
  }
}

What I’ve got from this is a small freeze in the animation when I hit r and a full white output.svg file (2KB).

I’ve tried moving the background and the if(record) statement but nothing has changed.

Any ideas on how to export this?