Drawing Fibonacci Spiral with SVG that Changes Angles

Hey hey, obviously I’m new to proccessing but long story short, I am trying to replace the line/points drawn out for a Fibonnaci Spiral with an svg file of my design, but I’m struggling to make that work. I have some code that I know would be a good start which is drawing an svg based on my mouse’s movement and a fibonnaci drawing code but I’m trying to combine the two so the spiral is drawn with my svg file.

I’d love to add more so the svg changes angle and grows in size along the spiral, but one thing at a time, which mine is "draw the spiral haha.

Any insight would be deeply appreciated.

PShape heart;
import processing.pdf.*;
void setup() {
size(800, 800);
heart = loadShape(“CZS.svg”);
void draw() {
variableEllipse(mouseX, mouseY, pmouseX, pmouseY);
void variableEllipse(int x, int y, int px, int py) {
float speed = abs(x-px) + abs(y-py);
shape(heart,x, y, speed, speed);
void keyPressed() {
if (key == ‘s’) {

Hello @DDe ,

There are resources (tutorials, references and examples) here:

Take a look at the tutorial for Interactivity.

Consider using mouseMoved().

This will rotate the shape:


Your PDF code is incomplete… see the library reference for examples.


1 Like

I appreciate the help, and I will definitely use the rotate with a function to math the spiral, but I do believe using mouseMoved misunderstands my struggle. My design isn’t meant to be interactive/change based on where I “draw” with my mouse, I’m tying to get my “shape” from a SVG file to match the fibonacci spiral exactly so there isn’t any scattered shapes.

I can print the spiral, I can print an SVG (with a mouse) but I want to print the spiral using the SVG.

Something like this with your spiral?

I placed a rotated SVG at a point x, y with my spiral code.


Well, not exactly cause the Fibonnaci spiral is a specific type of spiral (math involved) but in the mean time, what did you write for this code? it has some parts I was looking for