Seventies Wallpaper

Source: vignettes/wallpaper-01.Rmd 
library(minisvg)

The Wallpaper from ‘Lucky Number Slevin’

This is some wallpaper from the movie Lucky Number Slevin

70s wallpaper is my jam!

This example demonstrates:

  • Using svg_doc() as an alternative to SVGDocument$new()
  • Creating a <defs><pattern> object and applying it to a rectangle
doc <- svg_doc(width = 800, height = 800)
doc$rect(x=0, y=0, width="100%", height="100%", fill='#9B8A54')

pat  <- stag$defs()$pattern(id = 'motif', width=400, height=400, patternUnits = 'userSpaceOnUse')
patg <- pat$g()

patg$circle(cx=  0, cy=  0, r=138, fill= 'white')
patg$circle(cx=  0, cy=400, r=138, fill= 'white')
patg$circle(cx=400, cy=  0, r=138, fill= 'white')
patg$circle(cx=400, cy=400, r=138, fill= 'white')
patg$circle(cx=200, cy=200, r=138, fill= 'white')

patg$circle(cx=  0, cy=  0, r=90, fill= 'none', stroke = '#4a3322', stroke_width=35)
patg$circle(cx=  0, cy=400, r=90, fill= 'none', stroke = '#4a3322', stroke_width=35)
patg$circle(cx=400, cy=  0, r=90, fill= 'none', stroke = '#4a3322', stroke_width=35)
patg$circle(cx=400, cy=400, r=90, fill= 'none', stroke = '#4a3322', stroke_width=35)
patg$circle(cx=200, cy=200, r=90, fill= 'none', stroke = '#4a3322', stroke_width=35)

patg$circle(cx=200, cy=  0, r=90, fill= 'none', stroke = '#4a3322', stroke_width=10)
patg$circle(cx=  0, cy=200, r=90, fill= 'none', stroke = '#4a3322', stroke_width=10)
patg$circle(cx=400, cy=200, r=90, fill= 'none', stroke = '#4a3322', stroke_width=10)
patg$circle(cx=200, cy=400, r=90, fill= 'none', stroke = '#4a3322', stroke_width=10)

doc$append(pat)

doc$rect(x=0, y=0, width="100%", height="100%", fill=pat)

Show SVG text (click to open) 

   <?xml version="1.0" encoding="UTF-8"?>
   <svg width="800" height="800" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <rect fill="#9B8A54" x="0" y="0" width="100%" height="100%" />
     <pattern id="motif" width="400" height="400" patternUnits="userSpaceOnUse">
       <g>
         <circle fill="white" cx="0" cy="0" r="138" />
         <circle fill="white" cx="0" cy="400" r="138" />
         <circle fill="white" cx="400" cy="0" r="138" />
         <circle fill="white" cx="400" cy="400" r="138" />
         <circle fill="white" cx="200" cy="200" r="138" />
         <circle fill="none" stroke="#4a3322" stroke-width="35" cx="0" cy="0" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="35" cx="0" cy="400" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="35" cx="400" cy="0" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="35" cx="400" cy="400" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="35" cx="200" cy="200" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="10" cx="200" cy="0" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="10" cx="0" cy="200" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="10" cx="400" cy="200" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="10" cx="200" cy="400" r="90" />
       </g>
     </pattern>
     <rect fill="url(#motif)" x="0" y="0" width="100%" height="100%" />
   </svg>


Animating the pattern

In order to animate the pattern, an animateTransform is applied to the patternTransform attribute.

pat$animateTransform(
  attributeName = 'patternTransform',
  type          = 'translate',
  from          = '0 0',
  to            = "400 0",
  dur           = 5,
  repeatCount   = 'indefinite'
)

Show SVG text (click to open) 

   <?xml version="1.0" encoding="UTF-8"?>
   <svg width="800" height="800" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <rect fill="#9B8A54" x="0" y="0" width="100%" height="100%" />
     <pattern id="motif" width="400" height="400" patternUnits="userSpaceOnUse">
       <g>
         <circle fill="white" cx="0" cy="0" r="138" />
         <circle fill="white" cx="0" cy="400" r="138" />
         <circle fill="white" cx="400" cy="0" r="138" />
         <circle fill="white" cx="400" cy="400" r="138" />
         <circle fill="white" cx="200" cy="200" r="138" />
         <circle fill="none" stroke="#4a3322" stroke-width="35" cx="0" cy="0" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="35" cx="0" cy="400" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="35" cx="400" cy="0" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="35" cx="400" cy="400" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="35" cx="200" cy="200" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="10" cx="200" cy="0" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="10" cx="0" cy="200" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="10" cx="400" cy="200" r="90" />
         <circle fill="none" stroke="#4a3322" stroke-width="10" cx="200" cy="400" r="90" />
       </g>
       <animateTransform attributeName="patternTransform" from="0 0" to="400 0" type="translate" dur="5" repeatCount="indefinite" />
     </pattern>
     <rect fill="url(#motif)" x="0" y="0" width="100%" height="100%" />
   </svg>