Adding a <replicate> tag to SVG (updated Feb. 11, 2011)

If added to the SVG spec, the replicate tag will do for space in SVG what SMIL does for time. It is a declarative drawing extension that allows development of new classes of gradients, patterns and 2.5 dimensional effects with minimized effort for the author.

Before looking at the cool examples below, I suggest looking a bit into our paper or, at least, our talk on the subject.

Also, the script which underlies these examples is now part of a google code project. Please contribute!

Notice how succinct (and intuitive) the code is in these examples.

Link to demo Picture (as I think it should appear) Description Browsers
(Windows XP)
Chrome, Firefox4beta, Internet Explorer 8/ASV3.03, Opera11,  Safari		 Sample source
demo1

demo4

demo5

 cylinder, teardrop,
tri-colored teardrop
 		 All five agree, except on stroke-width of tri-colored teardrop: IE misses on smoothness of stroke-width transition. <ellipse cy="-100" cx="200" rx="30" ry="50"
fill="url(#f)" stroke-width=".5" stroke="none" >
<replicate repeatCount="80" >
<replicateAttribute attributeName="cy"
from="300" to="100" />
<replicateAttribute attributeName="ry"
from="100" to="0" />
<replicateAttribute attributeName="rx"
from="100" to="0" />
</replicate>
</ellipse>
demo7
demo8		 cupcake

rubber ducky

 All five seem to agree. <ellipse cy="-50" fill="url(#f)" stroke="none">
<replicate repeatCount="190" >
<replicateAttribute attributeName="cy"
from="300" to="100" />
<replicateAttribute attributeName="cx"
values="450; 250; 350" />
<replicateAttribute attributeName="ry" values="100;20;20;150;0" />
<replicateAttribute attributeName="rx"
values="150;200;0" />
<replicateAttribute attributeName="opacity"
values="1;1;0" />
</replicate>
</ellipse>
demoF Using rotation with <replicate>

cornucopia

spiral

 Same in all five <ellipse cy="-1000" cx="400" rx="30" ry="50" fill="url(#f)">
stroke-width=".5" stroke="none" >
<replicate repeatCount="140" >
<replicateAttribute attributeName="cy"
from="300" to="100" />
<replicateAttribute attributeName="transform" from="rotate(0 400 200)"
to="rotate(1240 400 200)" />
<replicateAttribute attributeName="ry"
from="100" to="15" />
<replicateAttribute attributeName="rx"
from="100" to="10" />
<replicateAttribute attributeName="opacity" from="1" to=".5" />
</replicate>
</ellipse>
twist
twist2
plastic		 The word "twist" twisted
peppermint twist		 3D text effects FF doesn't yet handle textLength and lengthAdjust for some of these 
<text id="T" fill="url(#g)" font-family="serif" stroke="black" 
stroke-width="1.5" stroke-opacity=".1"
font-size="28" x="4" y="60" font-weight="bold"> 
<replicate repeatCount="190">
<replicateAttribute attributeName="transform" 
from="rotate(-20 50 50)" to="rotate(10 50 50)" />
</replicate>
TWIST</text>
demo2 extruded text Specifying the font-family is needed to ensure similarity across browsers. <text font-size="12" id="WWW" x="-50" y="300" fill="red">
<replicate id="F" repeatCount="80">
<replicateAttribute attributeName="y"
from="150" to="290"/>
<replicateAttribute attributeName="x"
from="90" to="200"/>
<replicateAttribute attributeName="font-size"
from="9" to="170"/>
<replicateAttribute attributeName="fill"
from="rgb(0,0,0)" to="rgb(0,123,255)" />
</replicate>
TEXT</text>
demoA
demo3
demo6
gradrep
fancy gradients

nonlinear nonradial gradients

 All five appear to agree. <ellipse rx="100" ry="150" fill="rgb(255,200,0)" cx="-160" cy="200">
<replicate repeatCount="75" >
<replicateAttribute attributeName="cx" from="400" to="350" />
<replicateAttribute attributeName="cy" from="200" to="300" />
<replicateAttribute attributeName="ry" from="150" to="65" />
<replicateAttribute attributeName="rx" from="100" to="150" />
<replicateAttribute attributeName="opacity" from="1" to=".75" />
<replicateAttribute attributeName="stroke-opacity" from=".5" to="0" />
<replicateAttribute attributeName="stroke-width" from="4" to="0" />
<replicateAttribute attributeName="stroke" from="rgb(100,255,120)" to="rgb(0,124,124)" />
<replicateAttribute attributeName="fill" from="rgb(0,128,255)" to="rgb(225,255,220)" />
</replicate>
</ellipse>
demo9 spinning top (uses SMIL) Fine except for no animation in Safari. <ellipse cx="300" cy="50" fill="url(#g)"
stroke-width=".5" stroke="none" >
<replicate repeatCount="70" >
<replicateAttribute attributeName="cy"
from="300" to="100" />
<replicateAttribute attributeName="ry"
values="120;10" />
<replicateAttribute attributeName="rx" values="50;200;60;70;50" />
</replicate>
</ellipse>
demoB corkscrew (a la Escher, with SMIL) Safari handles neither the gradient nor the animation. 
<rect x="-200" width="40" height="40" 
fill="url(#g)">
<replicate repeatCount="200">
<replicateAttribute attributeName="y" 
values="200;50;200;50;200;50;200;50" />
<replicateAttribute attributeName="x" 
values="40;600;40;600" /></replicate>
 
pathRep dragging control points to determine shape Drawing in 5D Using the ability of multiple attributes to follow curves. (Extending animatePath into the multivariate arena)
demoC

demoD

 sprinkles

seaweed

 Safari and Chrome don't see the animation on the seaweed. 
<circle cx="-200" r="40" fill="url(#g)">
<replicate repeatCount="120">
<replicateAttribute attributeName="cy" 
values="230;50;400;50;500;50;450;50" />
<replicateAttribute attributeName="cx" 
values="40;600;130;700;50;600;40;700;50;600;0"/>
<replicateAttribute attributeName="r" 
values="14;8;16;9;12" />
<replicateAttribute attributeName="fill" 
from="rgb(0,0,255)" to="rgb(255,255,0)" />
demoE spinning DNA Six months ago all browsers had problems. Now just Safari (doesn't handle rotation of gradient) and IE/ASV -- gradient is grainy. a <replicate> similar to Demo B is placed
into a pattern space.
demoH

demoI

 Using rotation with <replicate>

Flower

Starshine

 Good in all five. <ellipse cy="-1000" cx="400" rx="30" ry="50">
stroke-width=".5" stroke="none" >
<replicate repeatCount="380" >
<replicateAttribute attributeName="cy"
from="300" to="100" />
<replicateAttribute attributeName="transform" from="rotate(0 400 200)"
to="rotate(5080 400 200)" />
<replicateAttribute attributeName="ry"
from="100" to="15" />
<replicateAttribute attributeName="rx" values="500; 450;0" />
<replicateAttribute attributeName="fill"
from="rgb(45,45,128)" to="rgb(255,233,128)" />
</replicate>
</ellipse>
demoJ

demoK

demoL

 Using rotation with <replicate> Good in all five.  

Several more:

 

FF4 needed for animation. Safari and Chrome not handling animation.

path interpolation and using paths for attribute values -- These work everywhere

 

Interpolating between and across multiple colorvalues

 

Using <replicateModifier> to clone and adjust gradients, animations, patterns, filters as we replicate.
(Chrome, Safari and Opera have trouble with A,B, C, and D )
Venn diagram on 7 sets

 

Nested Replicates
Link to demo Picture (as I think it should appear) Description Sample source
nestedReplicates6.svg

HistoryOfEurope

nestedReplicates4.svg

nestedReplicates7.svg

 replicated tiling: no animation in Chrome/Safari. 
<rect x="-200">
<replicate repeatCount="70">
<replicateAttribute attributeName="height" 
values="100;0" />
<replicateAttribute attributeName="y" 
values="100;150"/>
<replicateAttribute attributeName="width" 
values="100;0" />
<replicateAttribute attributeName="x" 
values="100;150"/>
<replicateAttribute attributeName="fill" 
from="rgb(0,128,255)" to="rgb(225,255,220)"/> 
</replicate>
</rect>
nestedReplicates1.svg seven-pointed star
(seems to take forever in FF4)		 <ellipse cy="-100" cx="200" rx="30" ry="50"
fill="url(#f)" stroke-width=".5" stroke="none" >
<replicate repeatCount="80" >
<replicateAttribute attributeName="cy"
from="300" to="100" />
<replicateAttribute attributeName="ry"
from="100" to="0" />
<replicateAttribute attributeName="rx"
from="100" to="0" />
</replicate>
</ellipse>
cobblestones non-affine
cobblestones		 
<g >
 <replicate repeatCount="13" >
 <replicateAttribute attributeName="transform" 
values="scale(1);scale(.75);scale(.55);scale(.40);scale(.30);scale(.25);scale(.2)" />
 </replicate>
 <path d="M 20 20 100 20 120 50 0 50 z" 
stroke="none" transform="scale(2,1.2)" fill="url(#f)" >
 <replicate repeatCount="9" >
 <replicateAttribute attributeName="d" 
values="M 0 400 80 400 100 360 20 360 z; M 800 400 880 400 860 360 780 360 z" />
 <replicateModifier modifierType="gradientStop" childNum="2" 
 attributeName="stop-color" 
	values=" rgb(244,45,45); rgb(200,233,4); rgb(0,0,255)"/>
 </replicate>
 </path>
</g>

 

 

 Nothing shows up in FF4.  
texture2

texture3

texture4

 Similar but animated. Chrome/Safari don't show animation  
texture1

texture5

texture6

 Okay everywhere  
spectralTerrain spectral terrain -- may crash FF4. Nothing in Safari.  
NorthernLights Northern Lights -- if you whistle at them they dance.

Fine in FF,O, ASV

No animation in Chrome. Nothing shows up in Safari.

  
Cardioid2

(inspired by Eric Elder)

 Replicating within a replicate.  
monkey bars
(slow to load)		 Triply replicated  
activebox    
animated box with Question
(by Eric Elder)		    
tubefy demonstration
(by Israel Eisenberg)

also see more by Israel:
a nice color wheel
tubefy with keySplines
http://owl3d.com/svg/tubefy/articles/article1.html
 http://owl3d.com/svg/tubefy/articles/article2.html
http://owl3d.com/svg/tubefy/articles/article3.html