Saving every frame in SVG

Hey, I’m completely new to this, and this is an assignment for me, so pardon if there’s any errors in the code. I’ve been trying to implement SVG saving so I can edit the file in Illustrator, but I can’t seem to save the entire visual. It only seems to save a single frame of the newest generated bezier curve. Am I missing something, or is there a better way to do things?

Cheers!

float t = 0.0;
String myText = "click to pause/play, press r to reset canvas!";
import processing.svg.*;
//import processing.pdf.*;
boolean record;

void setup() {
  size(displayWidth, displayHeight);
  stroke(10, 100);
  noFill();
  background(255);
  frameRate(20);
  //createGraphics(displayWidth, displayHeight);
  //beginRecord(PDF, "everything.pdf");
}

void draw() {
  if (record) {
   // Note that #### will be replaced with the frame number. Fancy!
   beginRecord(SVG, "frame-####.svg");
  }
  push();
  fill(0);
  noStroke();
  textAlign(CENTER);
  textSize(24);
  text(myText, displayWidth/2, 0.8*displayHeight);
  pop();
  
//curves generating
  float x1 = width  * noise(t + 10);
  float x2 = mouseX * noise(t + 20);
  float x3 = width * noise(t + 30);
  float x4 = mouseX * noise(t + 40);
  float y1 = mouseY * noise(t + 50);
  float y2 = height * noise(t + 60);
  float y3 = mouseY * noise(t + 70);
  float y4 = height * noise(t + 80);

  bezier(x1, y1, x2, y2, x3, y3, x4, y4);

  t += 0.009;
}
  

void mouseClicked() {
if (isLooping()) {
  noLoop();
} else {
loop(); }
}

void keyPressed() {
  if (keyCode == 82) {
  background(255);
  }
  if (keyCode == ENTER) {
    record = false;
  }
}

Hello,

I was able to do this using createGraphics():
SVG \ Libraries \ Processing.org

The above reference states:

Unlike the PDF renderer, the SVG renderer will only save the final frame of a sequence.

And did something similar to this with createGraphics:
endRecord() \ Language (API) \ Processing 3+

References:
createGraphics() \ Language (API) \ Processing 3+

I did not see what I was drawing to the offscreen buffer.
There is and are ways to do this also. :)

Try it with a simple example and then go from there.

For example I used this in draw():
svg.line(0, 0, random(300), random(300));

I leave this challenge (opportunity) with you!

:)

SVG Output viewed with browser: