Zenn
Closed3

nimSvg

NeoNeo

karaxと似たような記法で直感的にSVG形式の図形などを作成できる

円を描く
buildSvgFile("basic.svg"):
  svg(width = 200, height = 200):
    circle(cx = 100, cy = 100, r = 80, stroke = "teal", `stroke-width` = 4, fill = "#eef")
basic.svg
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="100" r="80" stroke="teal" stroke-width="4" fill="#eef"/>
</svg>

output:

NeoNeo

文法はほぼkaraxなのでforやifが使える

NeoNeo

アニメーションも作れる。

import nimSvg

let settings = animSettings(
  "animation1",
  renderGif = true,
  backAndForth = true
)
let frames = 100

settings.buildAnimation(frames) do (i: int) -> Nodes:
  let
    w = 800
    h = 800
  buildSvg:
    svg(width = w, height = h):
      let r = 0.3 * (w * i / frames).float
      circle(cx = w/2, cy = h/2, r = r, stroke = "teal", `stroke-width` = 4, fill = "#eef")

htmlファイルが出力され、開くとちゃんとアニメーションになっている。また、animSettings()のrenderGif引数にtrueを渡すと、30秒程度かけてGIFも併せて出力される。backAndForth引数にtrueを渡すと、逆再生も含めたGIFが出力される。ただし、htmlの方は逆再生されないことに注意する。

output:

このスクラップは2023/01/22にクローズされました