NimSvg

hello.nim

import nimsvg

const numFrames = 250

type
  Move = enum
    Up, Right, Down, Left
  Obj = object
    x: float
    y: float
    step: float
    moves: seq[Nodes]
    text: string

proc mv(obj: var Obj, mvType: Move): Nodes =
  case mvType
  of Up:
    obj.y = obj.y - obj.step
  of Down:
    obj.y = obj.y + obj.step
  of Left:
    obj.x = obj.x - obj.step
  of Right:
    obj.x = obj.x + obj.step
  buildSvg:
    text(x=obj.x, y=obj.y, `font-size`=30, fill="#a5a5a5"):
      t obj.text

proc appear(obj: Obj, n=1): seq[Nodes] =
  for i in 0..<n:
    let a = buildSvg:
      text(x=obj.x, y=obj.y, `font-size`=30, fill="#FFF"):
          t obj.text
    result.add(a)

proc hBuild(obj: var Obj) =
  obj.moves.add obj.appear(15)
  for i in 0..<50:
    obj.moves.add obj.mv(Down)
  obj.moves.add obj.appear(numFrames-15-50)

proc eBuild(obj: var Obj) =
  obj.moves.add obj.appear(50)
  for i in 0..<50:
    obj.moves.add obj.mv(Down)
  obj.moves.add obj.appear(numFrames-50-50)

proc l1Build(obj: var Obj) =
  obj.moves.add obj.appear(85)
  for i in 0..<50:
    obj.moves.add obj.mv(Down)
  obj.moves.add obj.appear(numFrames-50-85)

proc l2Build(obj: var Obj) =
  obj.moves.add obj.appear(120)
  for i in 0..<50:
    obj.moves.add obj.mv(Down)
  obj.moves.add obj.appear(numFrames-50-120)

proc oBuild(obj: var Obj) =
  obj.moves.add obj.appear(155)
  for i in 0..<50:
    obj.moves.add obj.mv(Down)
  obj.moves.add obj.appear(numFrames-50-155)



proc main() =
  let css = """
background-color: #83d0f2;
border: 1px solid #EFEFEF;
"""
  var chH = Obj(x: 30, y: 0, step: 2, text: "H")
  var chE = Obj(x: 60, y: 0, step: 2, text: "E")
  var chL1= Obj(x: 90, y: 0, step: 2, text: "L")
  var chL2= Obj(x: 120, y: 0, step: 2, text: "L")
  var chO = Obj(x: 150, y: 0, step: 2, text: "O")

  chH.hBuild()
  chE.eBuild()
  chL1.l1Build()
  chL2.l2Build()
  chO.oBuild()
  
  let settings = animSettings("hello", backAndForth=true, renderGif=false)

  settings.buildAnimation(numFrames) do (i: int) -> Nodes:
    let w = 242
    let h = 200
    buildSvg:
      svg(width=w, height=h, style=css):
        embed chH.moves[i]
        embed chE.moves[i]
        embed chL1.moves[i]
        embed chL2.moves[i]
        embed chO.moves[i]
main()