SVG (animated) example

animated.reb

Rebol [
    Title: "SVG Sample"
    Needs: [
        r3:rgchris:svg
    ]
]

print svg/encode svg/create 400x400 [
    rectangle #[fill: #myGradient] 20x200 360x180
    circle #[fill: none stroke: #myGradient stroke-width: 10] 160x200 100

    animate linear-gradient #myGradient [
        start 0x100
        end 100x0
        ; user-space-on-use

        stop 0 1 #f00
        stop 50% .5 #0f0
        animate stop 100% 1 #00f [
            animate 'stop-opacity 5 [1 0 1]
        ]
    ][
        animate 'x1 5 [0 1 1 0 0]
        animate 'y1 5 [0 0 1 1 0]
        animate 'x2 5 [1 0 0 1 1]
        animate 'y2 5 [1 1 0 0 1]
    ]
]

animated.svg

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400" viewBox="0,0,400,400">
<defs>
<linearGradient id="myGradient" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0" stop-opacity="1" stop-color="rgb(255,0,0)" />
<stop offset="50%" stop-opacity=".5" stop-color="rgb(0,255,0)" />
<stop offset="100%" stop-opacity="1" stop-color="rgb(0,0,255)">
<animate attributeName="stop-opacity" values="1;0;1" dur="5s" repeatCount="indefinite" />
</stop>
<animate attributeName="x1" values="0;1;1;0;0" dur="5s" repeatCount="indefinite" />
<animate attributeName="y1" values="0;0;1;1;0" dur="5s" repeatCount="indefinite" />
<animate attributeName="x2" values="1;0;0;1;1" dur="5s" repeatCount="indefinite" />
<animate attributeName="y2" values="1;1;0;0;1" dur="5s" repeatCount="indefinite" />
</linearGradient>
</defs>
<rect x="20" y="200" width="360" height="180" fill="url(#myGradient)" />
<circle cx="160" cy="200" r="100" fill="none" stroke="url(#myGradient)" stroke-width="10" />
</svg>

~README.md

Notes

• Modules installation instructions: rgchris/Scripts/r3-oldes

• Shape and other functions that are currently supported (e.g. path, rectangle, circle, linear-gradient, radial-gradient, stop) return the tree at the point where the shape/node has been inserted, the animate function takes this as its argument.

• The none on line 10 of animated.reb is a WORD! of value none, not a NONE! value.