Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Graphical Web 2016: SVG Animations

Ca3d0556227d66b3c15be1eadf69473b?s=47 Jacob Tomlinson
October 08, 2016
2

Graphical Web 2016: SVG Animations

Ca3d0556227d66b3c15be1eadf69473b?s=128

Jacob Tomlinson

October 08, 2016
Tweet

Transcript

  1. SVG Animations Jacob Tomlinson Senior Engineer Informatics Lab

  2. Designing Correcting Styling Animating Limitation

  3. None
  4. Designing

  5. None
  6. None
  7. None
  8. Correcting

  9. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export

    Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 207 222" style="enable-background:new 0 0 207 222;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FFFFFF;} .st1{fill:#BEC945;} .st2{fill:#E466A1;} .st3{fill:#36B7BC;} </style> <g> <polygon class="st2" points="102.3,13.5 99.3,8.8 102.3,6.9 "/> <polygon class="st2" points="102.3,13.5 105.3,8.8 102.3,6.9 "/> </g> <g> <polygon id="_438677864_12_" class="st2" points="14.6,162.3 12.1,167.3 8.9,165.6 "/> <polygon id="_438677888_12_" class="st2" points="14.6,162.3 9,162 8.9,165.6 "/> </g> <g> <polygon id="_376294400_12_" class="st2" points="190.8,162.3 196.4,162 196.5,165.6 "/> <polygon id="_376294568_12_" class="st2" points="190.8,162.3 193.3,167.3 196.5,165.6 "/>
  10. <polygon points="371.9,179.5 419.3,226.9 419.3,152 "/> <polygon points="466.6,179.5 419.3,226.9 419.3,152 "/>

    <polygon points="371.9,179.5 382.1,264 354.1,230.3 "/> <polygon points="466.6,179.5 456.4,264 484.4,230.3 "/> <polygon points="218.1,323 282.8,305.7 217.9,268.2 "/> <polygon points="265.4,241 282.8,305.7 217.9,268.2 "/> <polygon points="265.4,241 333.5,292 318.3,250.9 "/> <polygon points="265.4,527.9 282.8,463.2 217.9,500.7 "/> <polygon points="218.1,445.9 282.8,463.2 217.9,500.7 "/> <polygon points="265.4,527.9 333.5,476.9 318.3,518 "/> <polygon points="466.6,589.4 419.3,542 419.3,616.9 "/> <polygon points="371.9,589.4 419.3,542 419.3,616.9 "/> <polygon points="466.6,589.4 456.4,504.9 484.4,538.6 "/> <polygon points="371.9,589.4 382.1,504.9 354.1,538.6 "/> <polygon points="620.4,445.9 555.7,463.2 620.6,500.7 "/> <polygon points="573.1,527.9 555.7,463.2 620.6,500.7 "/> <polygon points="573.1,527.9 505,476.9 520.2,518 "/> <polygon points="573.1,241 555.7,305.7 620.6,268.2 "/> <polygon points="620.4,323 555.7,305.7 620.6,268.2 "/> <polygon points="573.1,241 505,292 520.2,250.9 "/> <polygon points="484.9,176 502.2,240.7 539.7,175.8 "/> <polygon points="566.9,223.4 502.2,240.7 539.7,175.8 "/> <polygon points="271.6,223.4 336.3,240.7 298.8,175.8 "/> <polygon points="353.6,176 336.3,240.7 298.8,175.8 "/> <polygon points="353.6,592.9 336.3,528.2 298.8,593.1 "/> <polygon points="271.6,545.6 336.3,528.2 298.8,593.1 "/> <polygon points="566.9,545.6 502.2,528.2 539.7,593.1 "/>
  11. None
  12. Styling

  13. None
  14. <div class="jumbotron"> {% include images/background.svg %} <div class="container"> {% include

    images/logo.svg %} <p class="strapline">Visualising the Connected World</p> </div> </div>
  15. <div class="jumbotron"> <svg id="background" ... > ... </svg> <div class="container">

    <svg id="logo" ... > ... </svg> <p class="strapline">Visualising the Connected World</p> </div> </div>
  16. None
  17. $logo_blue: #36B7BC; $logo_pink_strong: #E5007E; ... #background { .main { fill:

    $logo_blue; } .accents { fill: $logo_pink_strong; } ... }
  18. None
  19. Animating

  20. @keyframes color-cycle { 0% { fill: $logo_pink; } 50% {

    fill: $logo_green; } 100% { fill: $logo_blue; } }
  21. @mixin color-cycle-animation($delay, $time) { animation: color-cycle #{$time + $delay}s ease

    infinite; animation-direction: alternate; }
  22. #logo { @for $i from 1 through 2 { .inner

    polygon:nth-child(#{$i}n) { @include color-cycle-animation($i, 2) } } }
  23. None
  24. None
  25. Limitations

  26. One animation per selector

  27. #logo { .elements { @include color-cycle-animation($i, 2) @include rotation-animation(720) }

    }
  28. #logo { .elements.color { @include color-cycle-animation($i, 2) } .elements.rotate {

    @include rotation-animation(720) } }
  29. Cross browser compatibility

  30. None
  31. None
  32. Thank You