Demo for Daniel Pearson

By Matt Visiwig Aug 21, 2024

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'>
   <rect fill='#141933' width='2000' height='1500' />
   <defs>
      <g id='c'>
         <g id='b' stroke-width='0' stroke='#141933'>
            <circle r='5'/>
            <circle r='5' cx='40' cy='1'/>
            <circle r='5' cx='80' cy='2'/>
            <circle r='5' cx='120' cy='4'/>
            <circle r='5' cx='160' cy='7'/>
            <circle r='5' cx='200' cy='11'/>
            <circle r='5' cx='240' cy='15'/>
            <circle r='5' cx='280' cy='21'/>
            <circle r='5' cx='320' cy='28'/>
            <circle r='5' cx='360' cy='36'/>
            <circle r='5' cx='400' cy='45'/>
            <circle r='5' cx='440' cy='55'/>
            <circle r='5' cx='480' cy='66'/>
            <circle r='5' cx='520' cy='78'/>
            <circle r='5' cx='560' cy='90'/>
            <circle r='5' cx='600' cy='103'/>
            <circle r='5' cx='640' cy='117'/>
            <circle r='5' cx='680' cy='132'/>
            <circle r='5' cx='720' cy='148'/>
            <circle r='5' cx='760' cy='165'/>
            <circle r='5' cx='800' cy='181'/>
            <circle r='5' cx='840' cy='198'/>
            <circle r='5' cx='880' cy='214'/>
            <circle r='5' cx='920' cy='233'/>
            <circle r='5' cx='960' cy='255'/>
            <circle r='5' cx='1000' cy='277'/>
            <circle r='5' cx='1040' cy='299'/>
            <circle r='5' cx='1080' cy='311'/>
         </g>
         <use href='#b' transform='scale(-1 1)' style='transform-origin:0 0'/>
      </g>
   </defs>
   <g transform='rotate(0 0 0)' style='transform-origin:center'>
      <g transform='rotate(0 0 0)' style='transform-origin:center'>
         <g transform='translate(1000 750)' style='transform-origin:center'>
            <use fill='#FF7' href='#c'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='0' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#fff06f' href='#c' y='2'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-.2s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#ffe269' href='#c' y='4'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-.4s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#ffd365' href='#c' y='8'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-.6s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#ffc563' href='#c' y='14'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-.8s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#ffb762' href='#c' y='22'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-1s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#ffaa62' href='#c' y='32'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-1.2s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#fa9d63' href='#c' y='44'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-1.4s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#f39065' href='#c' y='58'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-1.6s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#eb8567' href='#c' y='74'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-1.8s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#e27a68' href='#c' y='92'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-2s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#d76f6a' href='#c' y='112'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-2.2s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#cb666b' href='#c' y='134'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-2.4s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#bf5e6c' href='#c' y='158'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-2.6s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#b1566c' href='#c' y='184'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-2.8s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#a34f6b' href='#c' y='212'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-3s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#954869' href='#c' y='242'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-3.2s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#864367' href='#c' y='274'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-3.4s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#773d63' href='#c' y='308'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-3.6s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#67385f' href='#c' y='344'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-3.8s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#583359' href='#c' y='382'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-4s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#4a2e53' href='#c' y='422'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-4.2s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#3b294c' href='#c' y='464'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-4.4s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#2e2444' href='#c' y='508'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-4.6s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#201e3c' href='#c' y='554'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-4.8s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
            <use fill='#141933' href='#c' y='602'>
               <animateTransform attributeName='transform' type='translate' dur='6s' begin='-5s' values='0 0;0 20; 0 0' calcMode='spline' keySplines='.7 0 .3 1;.7 0 .3 1' repeatCount='indefinite' />
            </use>
         </g>
      </g>
   </g>
</svg>