Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Graphical Web 2016: SVG Animations
Jacob Tomlinson
October 08, 2016
0
21
Graphical Web 2016: SVG Animations
Jacob Tomlinson
October 08, 2016
Tweet
Share
More Decks by Jacob Tomlinson
See All by Jacob Tomlinson
Dask Overview - Stanford Legion all-hands
jacobtomlinson
0
37
Container Canary - Lightning Talk
jacobtomlinson
0
17
Parallelizing Your ETL with Dask on Kubeflow
jacobtomlinson
0
410
GPU accelerating your computation in Python
jacobtomlinson
0
74
Bristech - GPU Computing in Python
jacobtomlinson
0
85
What is RAPIDS?
jacobtomlinson
0
66
Lightning talk - Managing cluster lifecycle with dask-ctl
jacobtomlinson
0
42
Deploying Dask Distributed
jacobtomlinson
0
120
Dask on Kubernetes
jacobtomlinson
0
210
Featured
See All Featured
Three Pipe Problems
jasonvnalue
89
8.9k
Designing for Performance
lara
600
65k
Six Lessons from altMBA
skipperchong
15
2.3k
Designing Experiences People Love
moore
130
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
How to name files
jennybc
47
73k
In The Pink: A Labor of Love
frogandcode
132
21k
The Pragmatic Product Professional
lauravandoore
21
3.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
217
21k
Designing with Data
zakiwarfel
91
4.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
Transcript
SVG Animations Jacob Tomlinson Senior Engineer Informatics Lab
Designing Correcting Styling Animating Limitation
None
Designing
None
None
None
Correcting
<?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 "/>
<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 "/>
None
Styling
None
<div class="jumbotron"> {% include images/background.svg %} <div class="container"> {% include
images/logo.svg %} <p class="strapline">Visualising the Connected World</p> </div> </div>
<div class="jumbotron"> <svg id="background" ... > ... </svg> <div class="container">
<svg id="logo" ... > ... </svg> <p class="strapline">Visualising the Connected World</p> </div> </div>
None
$logo_blue: #36B7BC; $logo_pink_strong: #E5007E; ... #background { .main { fill:
$logo_blue; } .accents { fill: $logo_pink_strong; } ... }
None
Animating
@keyframes color-cycle { 0% { fill: $logo_pink; } 50% {
fill: $logo_green; } 100% { fill: $logo_blue; } }
@mixin color-cycle-animation($delay, $time) { animation: color-cycle #{$time + $delay}s ease
infinite; animation-direction: alternate; }
#logo { @for $i from 1 through 2 { .inner
polygon:nth-child(#{$i}n) { @include color-cycle-animation($i, 2) } } }
None
None
Limitations
One animation per selector
#logo { .elements { @include color-cycle-animation($i, 2) @include rotation-animation(720) }
}
#logo { .elements.color { @include color-cycle-animation($i, 2) } .elements.rotate {
@include rotation-animation(720) } }
Cross browser compatibility
None
None
Thank You