Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Graphical Web 2016: SVG Animations

Jacob Tomlinson
October 08, 2016
43

Graphical Web 2016: SVG Animations

Jacob Tomlinson

October 08, 2016
Tweet

Transcript

  1. <?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 "/>
  2. <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 "/>
  3. <div class="jumbotron"> {% include images/background.svg %} <div class="container"> {% include

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

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

    $logo_blue; } .accents { fill: $logo_pink_strong; } ... }
  6. @keyframes color-cycle { 0% { fill: $logo_pink; } 50% {

    fill: $logo_green; } 100% { fill: $logo_blue; } }
  7. #logo { @for $i from 1 through 2 { .inner

    polygon:nth-child(#{$i}n) { @include color-cycle-animation($i, 2) } } }