SVG Animation Demo

svg_generator.js

var fs = require('fs');

let frame1 = [
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 2, 2, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
]

let frame2 = [
  [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
  [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
  [3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3],
  [3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3],
  [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 3, 3, 3, 3],
  [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 3, 3, 3, 3],
  [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 3, 3, 3, 3],
  [3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3],
  [3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3],
  [3, 3, 3, 3, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
  [3, 3, 3, 3, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
  [3, 3, 3, 3, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
  [3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3],
  [3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3],
  [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
  [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3]
]

let frame3 = [
  [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
  [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
  [4, 4, 4, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4, 4],
  [4, 4, 4, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4, 4],
  [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 4, 4, 4, 4],
  [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 4, 4, 4, 4],
  [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 4, 4, 4, 4],
  [4, 4, 4, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4, 4],
  [4, 4, 4, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4, 4],
  [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 4, 4, 4, 4],
  [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 4, 4, 4, 4],
  [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 1, 4, 4, 4, 4],
  [4, 4, 4, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4, 4],
  [4, 4, 4, 4, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4, 4],
  [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
  [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4]
]

let colors = {
  1: "#8BC34A",
  2: "#FFFFFF",
  3: "#FFCDD2",
  4: "#FFEB3B"
}

let IMAGE_PIXEL_HEIGHT = 16 
let IMAGE_PIXEL_WIDTH = 16
let CANVAS_WIDTH = 640
let PIXEL_WIDTH = CANVAS_WIDTH / IMAGE_PIXEL_WIDTH
let PIXEL_HEIGHT = CANVAS_WIDTH / IMAGE_PIXEL_HEIGHT
let ANIMATE_DURATION = "3s"

let frames = [frame1, frame2, frame3]
let svg = generateSVG(frames)
fs.writeFile('test.svg', svg, function (err) {
  if (err) throw err;
  console.log('Saved!')
})


function generateSVG(frames) {
  if (!isFramesValid(frames)) {
    console.error("Invalid frames")
    return
  }

  let rects = ""
  for (var i = 0; i < IMAGE_PIXEL_HEIGHT; i++) {
    for (var j = 0; j < IMAGE_PIXEL_WIDTH; j++) {
      var color = ""
      for (var k = 0; k < frames.length; k++) {
        color = color + colors[frames[k][i][j]] + "; "
      }
      rects = rects + 
        `\t<rect x="${j * PIXEL_WIDTH}" y="${i * PIXEL_HEIGHT}" width="${PIXEL_WIDTH}" height="${PIXEL_HEIGHT}" style="stroke:#9E9E9E;stroke-width:0.5"><animate attributeName="fill" begin="0s" dur="${ANIMATE_DURATION}" calcMode="discrete" values="${color}" repeatCount="indefinite" /></rect>\n`
    }
  }
  return `<svg width="640" height="640" xmlns="http://www.w3.org/2000/svg">\n` + rects + `</svg>`
}

function isFramesValid(frames) {
  if (frames.length < 1 || frames.length > 30) {
    return false
  }

  for (var i = 0; i < frames.length; i++) {
    let image = frames[i]
    if (image.length != IMAGE_PIXEL_HEIGHT) {
      return false
    }

    for (var j = 0; j < image.length; j++) {
      let row = image[j]
      if (row.length != IMAGE_PIXEL_WIDTH) {
        return false
      }

      for (var k = 0; k < row.length; k++) {
        if (!colors[row[k]]) {
          return false
        }
      }
    }
  }

  return true
}