Animated Christmas SVG in R with htmltools + rvest + XML & vivus.js

code.R

#http://www.smashingmagazine.com/2014/11/25/freebie-christmas-icon-set-ai-psd-eps-pdf-svg-png/
# please note all praise and attribution for the artwork
# should go to 

library(htmltools)
library(pipeR)
library(rvest)
library(XML)

tempdir() %>>% 
  (
    tDir ~
      "http://provide.smashingmagazine.com/smashing-freebie-christmas-icon-set-2014.zip" %>>%
      download.file( file.path(tDir,"christmas_svg.zip") ) %>>%
      (unzip( zipfile = file.path(tDir,"christmas_svg.zip"), exdir = tDir ))
  ) -> svgfiles  # save lsit of files so we don't have to download each time

svgfiles %>>%
  (.[grep(
    x=.
    #uncomment to give a list showing all svg files 
    #,pattern="SVG/#([:a-z:]|[:A-Z:]|[:0-9:].svg)")
    # I like the fireplace
    # ,pattern="SVG/#fireplace.svg")
    # another favorite of mine is santa
    ,pattern="SVG/#santa.svg")
  ]) %>>%
  # use rvest html which is XML::htmlParse
  html %>>%
  # grab the svg node and save as svg_original
  html_node("svg") %>>% ( ~ svg_original = saveXML(.) ) %>>%
  # and add id so we can refer to it in the script
  (~ addAttributes(.,id="christmas_svg") ) %>>%
  (~
     xmlApply(
       getNodeSet(.,"//path")
       ,function(p){
         # replace fill style with stroke so the outline is the fill color
         sty = gsub(x=xmlAttrs(p)["style"],pattern="fill",replacement="stroke")
         # remove the original style attribute
         removeAttributes(p,"style")
         # add the new style attribute where we replaced fill with stroke
         addAttributes(p,style=paste0(sty,";stroke-width:3;fill-opacity:0.2"))
         # to just see the original, comment above and uncomment below
         # return(p)
       }
     )
  ) %>>%
  # make a side by side div with the original svg
  # and the new vivus.js animated path svg
  (tagList(
    tags$h1("R (htmltools+rvest+XML)  & Javascript (vivus.js)")
    ,tags$button(
      onclick="vChristmas.reset().play();"
      ,"replay"
    )    
    ,tags$div( style = "position:relative;left:5%"
      ,tags$div( style = "height:100%;width:45%;display:inline-block;"
        ,svg_original %>>% HTML
      )
      ,tags$div( style = "height:100%;width:45%;display:inline-block"
        ,saveXML(.) %>>% HTML
      )
    )
    ,tags$footer(
      tags$blockquote(
        # basic blockquote styling from http://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
        style = "background: #f9f9f9; border-left: 10px solid #ccc;  margin: 1.5em 10px; padding: 0.5em 10px;"
        ,tags$h3(style= "margin:0 0 0 0;", "Source:")
        ,"article: ",tags$a(
          href = "http://www.smashingmagazine.com/2014/11/25/freebie-christmas-icon-set-ai-psd-eps-pdf-svg-png/"
          , "Smashing Magazine: Freebie Christmas Icon Set"
        )
      ,tags$br()
      ,"artist:", tags$a(
        href = "http://mokreo.com/"
        ,"Manuela Langella"
      ))
    )
    ,tags$script(
      #"var vChristmas = new Vivus('christmas_svg',{type: 'oneByOne',start:'autostart',delay:0,duration:500})"
      "var vChristmas = new Vivus('christmas_svg',{type: 'delayed',start:'autostart',delay:0,duration:500})"
    )
  )) %>>%
  attachDependencies(
    list(
      # add d3 potentially for additional customization / animation
      #htmlDependency(
      #  name="d3"
      #  ,version="3.4"
      #  ,src=c("href"="http://d3js.org")
      #  ,script = "d3.v3.min.js"
      #)
      htmlDependency(
        name="vivus"
        ,version="0.1"
        ,src=c("href"="http://maxwellito.github.io/vivus/dist")
        ,script = "vivus.min.js"
      )
    )
  ) %>>% html_print