Wrap multiple emphatic object into an SVG animation

Source: R/core-svg.R

Idea borrowed from pointblank

as_svg_anim(
  x,
  width = 1200,
  height = 900,
  duration = 1,
  playback = c("infinite", "click"),
  font_size = NULL,
  style = list(),
  svg_id = NULL,
  browsable = FALSE
)

Arguments

x

list of emphatic objects

width, height

viewBox dimensions for SVG

duration

frame duration in seconds. May be a single value used for all frames, or a vector of values (one duration value for each frame). Can be fractions of a second.

playback

'click', 'infinite'

font_size

CSS font-size. Default: NULL means to not adjust font size. Otherwise, use valid CSS font-size specification e.g. "3em", "22px" etc.

style

html tag styling to apply to the <pre> wrapper for the returned HTML

svg_id

ID to use for the SVG tag. Default: NULL means to create a random ID

browsable

Should the SVG be rendered to the RStudio Viewer pane when when printed (instead of console output)? Default: FALSE

Value

Character string containing an animated SVG representation displaying all elements sequentially

Examples

list(
  hl_diff('hello', 'there'),
  hl_diff('goodbye', 'good boy')
) |>
  as_svg_anim() |>
  cat()
#> <svg id="emphaticwl4dieex" fill="none" viewBox="0 0 1200 900" width="1200" height="900" xmlns="http://www.w3.org/2000/svg"><g visibility="hidden">
#> <foreignObject width="100%" height="100%">
#> <div xmlns="http://www.w3.org/1999/xhtml">
#> <pre style=''>
#> <span><span>[1] &quot;</span></span><span style='color:#000000;'><span style='background-color:#9aff9a;'> </span></span><span><span>he</span></span><span style='color:#000000;'><span style='background-color:#97ffff;'>ll</span></span><span style='color:#000000;'><span style='background-color:#ff7f50;'>o</span></span><span><span>&quot;</span></span><br/><span><span>[1] &quot;</span></span><span style='color:#000000;'><span style='background-color:#9aff9a;'>t</span></span><span><span>he</span></span><span style='color:#000000;'><span style='background-color:#97ffff;'>re</span></span><span style='color:#000000;'><span style='background-color:#ff7f50;'> </span></span><span><span>&quot;</span></span>
#> </pre>
#> </div>
#> </foreignObject>
#> <set id="emphaticwl4dieex001" attributeName="visibility" begin="0s;emphaticwl4dieex002.end"
#>             to="visible" dur="1.000000s" />
#> </g><g visibility="hidden">
#> <foreignObject width="100%" height="100%">
#> <div xmlns="http://www.w3.org/1999/xhtml">
#> <pre style=''>
#> <span><span>[1] &quot;good</span></span><span style='color:#000000;'><span style='background-color:#9aff9a;'> </span></span><span><span>b</span></span><span style='color:#000000;'><span style='background-color:#9aff9a;'> </span></span><span><span>y</span></span><span style='color:#000000;'><span style='background-color:#ff7f50;'>e</span></span><span><span>&quot;</span></span><br/><span><span>[1] &quot;good</span></span><span style='color:#000000;'><span style='background-color:#9aff9a;'> </span></span><span><span>b</span></span><span style='color:#000000;'><span style='background-color:#9aff9a;'>o</span></span><span><span>y</span></span><span style='color:#000000;'><span style='background-color:#ff7f50;'> </span></span><span><span>&quot;</span></span>
#> </pre>
#> </div>
#> </foreignObject>
#> <set id="emphaticwl4dieex002" attributeName="visibility" begin="emphaticwl4dieex001.end"
#>             to="visible" dur="1.000000s" />
#> </g></svg>