back to feed

animated svg in sail

2024.07.22

here is an animated svg:

you can use the %feeds app to make something similar of your own and publish it to the web.

here is the udon/sail document:

;>

;+
;svg
  =width  "450"
  =xmlns  "http://www.w3.org/2000/svg"
  =viewBox  "-200 -200 800 800"
  ;*
  =/  decr
    |=  [base=@ inc=@ a=@]
    (scow %ud (sub base (mul inc a)))
  =/  incr
    |=  [base=@ inc=@ a=@]
    (scow %ud (add base (mul inc a)))
  =<  p
  %^  spin
      ^-  (list tape)
      ~["#111" "#333" "#555" "#777" "#999" "#aaa" "#ccc" "#eee"]
    0
  |=  [color=tape a=@]
  :_  +(a)
  ;rect
    =width  (decr 400 40 a)
    =height  (decr 400 40 a)
    =x  (incr 0 20 a)
    =y  (incr 0 20 a)
    =rx  "{(decr 16 2 a)}%"
    =ry  "{(decr 16 2 a)}%"
    =style  "fill: {color};"
    ;animateTransform
      =attributeName  "transform"
      =type  "rotate"
      =begin  "0s"
      =dur  "{(decr 30 3 a)}s"
      =from  "0 200 200"
      =to  "360 200 200"
      =repeatCount  "indefinite"
      ;
    ==
  ==
==

quite compact!