Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
SVG Animations Jacob Tomlinson Senior Engineer Informatics Lab
Slide 2
Slide 2 text
Designing Correcting Styling Animating Limitation
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Designing
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Correcting
Slide 9
Slide 9 text
.st0{fill:#FFFFFF;} .st1{fill:#BEC945;} .st2{fill:#E466A1;} .st3{fill:#36B7BC;}
Slide 10
Slide 10 text
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Styling
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
{% include images/background.svg %}
{% include images/logo.svg %}
Visualising the Connected World
Slide 15
Slide 15 text
...
...
Visualising the Connected World
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
$logo_blue: #36B7BC; $logo_pink_strong: #E5007E; ... #background { .main { fill: $logo_blue; } .accents { fill: $logo_pink_strong; } ... }
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Animating
Slide 20
Slide 20 text
@keyframes color-cycle { 0% { fill: $logo_pink; } 50% { fill: $logo_green; } 100% { fill: $logo_blue; } }
Slide 21
Slide 21 text
@mixin color-cycle-animation($delay, $time) { animation: color-cycle #{$time + $delay}s ease infinite; animation-direction: alternate; }
Slide 22
Slide 22 text
#logo { @for $i from 1 through 2 { .inner polygon:nth-child(#{$i}n) { @include color-cycle-animation($i, 2) } } }
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Limitations
Slide 26
Slide 26 text
One animation per selector
Slide 27
Slide 27 text
#logo { .elements { @include color-cycle-animation($i, 2) @include rotation-animation(720) } }
Slide 28
Slide 28 text
#logo { .elements.color { @include color-cycle-animation($i, 2) } .elements.rotate { @include rotation-animation(720) } }
Slide 29
Slide 29 text
Cross browser compatibility
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Thank You