​

let svg

let img

​

function preload() {

  svg = new SVG(window, 'tiger.svg')

}

​

function setup() {

  createCanvas(400, 400);

  img = svg.toImage(200, 200)

}

​

function draw() {

  background(220);

  imageMode(CENTER);

  const timeLoop = sin((millis() % 5000) / 5000 * TWO_PI);

  const svgSize = map(timeLoop, -1, 1, 1000, 3000);

  const imgSize = map(timeLoop, -1, 1, 200, 400);

  // Draw the svg, which will work at arbitrary sizes

  image(svg, width/2, height/2, svgSize, svgSize);

  // Draw the image, which is now a fixed size and will be blurry

  image(img, width/3, height/3, imgSize, imgSize);

}