SVG Can Do That?!

A presentation at FullStack Fest in September 2017 in Barcelona, Spain by Sarah Drasner

Slide 1

Slide 1

SVG c an do THAT?! SVG c an do THAT?!   S ar ah

Dr a sn e r S ar ah

Dr a sn e r   : t w i t t e r | |

: c o d e pe n @ s a r a h _ e d o @ s d r a s

Slide 2

Slide 2

  S a r a h Dr a s n e r S a r a h Dr a s n e r Sr . De v eloper Adv ocate at Microsoft

Slide 3

Slide 3

SVG! SVG! This pen I made

Slide 4

Slide 4

SVG! SVG! Crisp on an y displa y L ess HTTP requests to handle Easily scalable for responsiv e Small filesize if y ou design for performance Easy to animate Easy to mak e accessible F un!

Slide 5

Slide 5

This . pen

Slide 6

Slide 6

SVG! SVG!

Slide 7

Slide 7

Slide 8

Slide 8

Positioning in CSS got y ou down? Positioning in CSS got y ou down?

Slide 9

Slide 9

b y This pen Chris Co yier

Slide 10

Slide 10

We c an do st uf f We c an do st uf f , All , All f ully re sponsive f ully re sponsive in in e very direction e very direction like this like this

Slide 11

Slide 11

made with Sar a Soueidan 's This pen circulus . SV G can mean conserving space in y our UI until icons are needed

Slide 12

Slide 12

I t

d o e s n ' t

n e c c e s s a r i l y

h a v e

t o

b e

f u l l y I t

d o e s n ' t

n e c c e s s a r i l y

h a v e

t o

b e

f u l l y f l u i d ,

e i t h e r .

L e t ' s

I m pl e m e n t

s o m e f l u i d ,

e i t h e r .

L e t ' s

I m pl e m e n t

s o m e R e s po n s i v e

D e s i g n R e s po n s i v e

D e s i g n . .

Slide 13

Slide 13

Like legos . Like legos .

Slide 14

Slide 14

This . pen

Slide 15

Slide 15

/ / v a r i a b l e

d e c l a r a t i o n

f o r

t h e

g l o b a l

r e p e a t e d

a n i m a t i o n c o n s t

g e a r

=

$ ( "

g e a r 1 ,

g e a r 2 ,

g e a r 3 " ) ;

. . .

/ / a n i m a t i o n

t h a t ' s

r e p e a t e d

f o r

a l l

o f

t h e

s e c t i o n s

f u n c t i o n

r e v o l v e ( )

{

l e t

t l

=

n e w

T i m e l i n e M a x ( ) ;

t l . a d d ( " b e g i n " ) ;

t l . t o ( g e a r ,

4 ,

{

t r a n s f o r m O r i g i n :

" 5 0 %

5 0 % " ,

r o t a t i o n :

3 6 0 ,

e a s e :

L i n e a r . e a s e N o n e

} ,

" b e g i n " ) ;

. . .

r e t u r n

t l ;

}

c o n s t

r e p e a t

=

n e w

T i m e l i n e M a x ( { r e p e a t :

1 } ) ;

r e p e a t . a d d ( r e v o l v e ( ) ) ;

Slide 16

Slide 16

f u n c t i o n

p a i n t P a n d a ( )

{

l e t

t l

=

n e w

T i m e l i n e M a x ( ) ;

t l . t o ( l h ,

1 ,

{

s c a l e Y :

1 . 2 ,

r o t a t i o n :

5 ,

t r a n s f o r m O r i g i n :

" 5 0 %

0 " ,

e a s e :

C i r c . e a s e O u t

} ,

" p a i n t I t +

1 " ) ;

. . .

r e t u r n

t l ;

}

/ / c r e a t e

a

t i m e l i n e

b u t

i n i t i a l l y

p a u s e

i t

s o

t h a t

w e

c a n

c o n t r o l

i t

v i a

c l c o n s t

t r i g g e r P a i n t

=

n e w

T i m e l i n e M a x ( {

p a u s e d :

t r u e

} ) ;

t r i g g e r P a i n t . a d d ( p a i n t P a n d a ( ) ) ;

/ / t h i s

b u t t o n

k i c k s

o f f

t h e

p a n d a

p a i n t i n g

t i m e l i n e

b u t t o n . a d d E v e n t L i s t e n e r ( " c l i c k " ,

f u n c t i o n ( )

{

t r i g g e r P a i n t . r e s t a r t ( ) ;

} ) ;

. . .

Slide 17

Slide 17

We c an use this st a bility for We c an use this st a bility for P age Tr ansitions P age Tr ansitions

Slide 18

Slide 18

In React

Slide 19

Slide 19

t o g g l e S h a p e ( )

{

i f

( t h i s . s t a t e . s c r e e n

=

=

0 )

{

t h i s . a n i m F i r e ( t h i s . s t a t e . s p l i t T e x t )

}

. . .

t h i s . s e t S t a t e ( {

s c r e e n :

( t h i s . s t a t e . s c r e e n

1 )

%

3

} )

}

Slide 20

Slide 20

a n i m F i r e ( s p l i t T e x t )

{

c o n s t

t l

=

n e w

T i m e l i n e M a x ,

s t A

=

' s t a r t ' ;

T w e e n M a x . s e t ( [ t h i s . g 1 . c h i l d N o d e s ,

t h i s . g 2 . c h i l d N o d e s ] ,

{

c l e a r P r o p s : ' s v g O r i g i n '

} )

t l . a d d ( ' s t a r t ' )

t l . s t a g g e r F r o m T o ( t h i s . g 1 . c h i l d N o d e s ,

d u r ,

{

d r a w S V G :

' 6 8 %

1 0 0 % '

} ,

{

d r a w S V G :

' 2 7 . 7 5 %

0 % ' ,

e a s e :

B a c k . e a s e O u t

} ,

s t D ,

s t A )

. . .

}

Slide 21

Slide 21

In V ue.js with Nuxt

Slide 22

Slide 22

Repo: https:/ / github.com/ sdr as/ nuxt-type Demo: https:/ / nuxt-type.now .sh/

Slide 23

Slide 23

JS Hook s JS Hook s e x p o r t

d e f a u l t

{

t r a n s i t i o n :

{

m o d e :

' o u t

i n ' ,

c s s :

f a l s e ,

e n t e r

( e l ,

d o n e )

{

l e t

t l

=

n e w

T i m e l i n e M a x ( {

o n C o m p l e t e :

d o n e

} ) ,

s p t

=

n e w

S p l i t T e x t ( ' h 1 ' ,

{ t y p e :

' c h a r s '

} ) ,

c h a r s

=

s p t . c h a r s ;

T w e e n M a x . s e t ( c h a r s ,

{

t r a n s f o r m P e r s p e c t i v e :

6 0 0 ,

p e r s p e c t i v e :

3 0 0 ,

t r a n s f o r m S t y l e :

' p r e s e r v e

3 d '

} )

t l . a d d ( ' s t a r t ' )

t l . f r o m ( e l ,

0 . 8 ,

{

s c a l e :

0 . 9 ,

t r a n s f o r m O r i g i n :

' 5 0 %

5 0 % ' ,

e a s e :

S i n e . e a s e O u t

} ,

' s t a r t ' )

. . .

t l . t i m e S c a l e ( 1 . 5 )

}

. . .

Slide 24

Slide 24

F rom Codrops P osition: fix ed and morphed into pathdata:id

Slide 25

Slide 25

This b y pen Sullivan Nolan

Slide 26

Slide 26

Use it FOR the la y out preserveAspectRatio="none"

Slide 27

Slide 27

SVG c an be TINY SVG c an be TINY

Slide 28

Slide 28

HTTP Archiv e

Slide 29

Slide 29

Slide 30

Slide 30

  /

S V G O M G P e t e r C o l l i n g ri d g e ' s

S V G

Ed i t o r S V G O S V G O

G U I Be f o r e

w e

ge t

st ar t e d : Be f o r e

w e

ge t

st ar t e d : Opt i mi z e ! Opt i mi z e ! High P erformance SV Gs

Slide 31

Slide 31

Dr agg a ble for Dr agg a ble for Re sponsive Re sponsive

Slide 32

Slide 32

Th at whole SVG is 2KB! Th at whole SVG is 2KB!

Slide 33

Slide 33

Wh at's h appening? Wh at's h appening?

Slide 34

Slide 34

What the DOM actually sees

Slide 35

Slide 35

Entire file size: 6KB! Entire file size: 6KB! Lo ader s! Lo ader s!

Slide 36

Slide 36

SV G

c an

mak e

OT H ER

i mage s smal l e r ! SV G

c an

mak e

OT H ER

i mage s smal l e r ! By  (go follow him) Sha w 38k b => 16k b! 38k b => 16k b!

Slide 37

Slide 37

Ma k e

a

R e s pon s i v e

S VG Ma k e

a

R e s pon s i v e

S VG A n im a t ion

S pr i t e A n im a t ion

S pr i t e

Slide 38

Slide 38

V i e w bo x

S h i f t

w i t h

a

S pr i t e V i e w bo x

S h i f t

w i t h

a

S pr i t e This . pen

Slide 39

Slide 39

Vie wBox Shift with Ja v aScript Vie wBox Shift with Ja v aScript v a r

s h a p e

=

d o c u m e n t . g e t E l e m e n t B y I d ( " s h a p e " ) ;

/ /

m e d i a

q u e r y

e v e n t

h a n d l e r

i f

( m a t c h M e d i a )

{

v a r

m q

=

w i n d o w . m a t c h M e d i a ( " ( m i n

w i d t h :

5 0 0 p x ) " ) ;

m q . a d d L i s t e n e r ( W i d t h C h a n g e ) ;

W i d t h C h a n g e ( m q ) ;

}

/ /

m e d i a

q u e r y

c h a n g e

f u n c t i o n

W i d t h C h a n g e ( m q )

{

i f

( m q . m a t c h e s )

{

s h a p e . s e t A t t r i b u t e ( " v i e w B o x " ,

" 0

0

4 9 0

4 7 4 " ) ;

}

e l s e

{

s h a p e . s e t A t t r i b u t e ( " v i e w B o x " ,

" 0

4 9 0

5 0 0

5 0 0 " ) ;

}

} ; Acts lik e a window to show and hide the requisite parts of the sprite

Slide 40

Slide 40

Compare to using te xt with photos to illustr ate an article. 8KB 8KB  Gzipped.  Gzipped. Th at Whole Animation Th at Whole Animation and SVG w a s and SVG w a s

Slide 41

Slide 41

SVG c an be acce s sible SVG c an be acce s sible

Slide 42

Slide 42

Title and associativ e aria tags: < s v g

a r i a

l a b e l l e d b y

" t i t l e "

i d

" s v g "

r o l e

" p r e s e n t a t i o n "

x m l n s

" h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g "

v i e w B o x

" 0

0

7 6 5

5 8 7 "

< t i t l e

i d

" t i t l e "

l a n g

" e n "

I c o n s

t h a t

i l l u s t r a t e

G l o b a l

W a r m i n g

S o l u t i o n s

< / t i t l e

T i t l e fo r e l e m e n t s i n t h e SV G D O M R o l e t o l e t t h e s c re e n re a d e r k n o w w h e t h e r t o t r a v e rs e , w i t h s u ppo rt c h a rt s . b y H e a t h e r M i g l i o r i s i . T h i s re s o u rc e T h i s a rt i c l e

Slide 43

Slide 43

SVG

c an b e

s t y l e d

l i k e

t e x t SVG

c an b e

s t y l e d

l i k e

t e x t

Slide 44

Slide 44

< s v g

c l a s s

" i c o n "

w i d t h

" 2 4 "

h e i g h t

" 1 4 "

a l t

" M e n u "

< u s e

x l i n k : h r e f

" / s v g / s p r i t e s . s v g

i c o n

h a m b u r g e r "

< / u s e

< / s v g

< !

t h e

s v g

< ? x m l

v e r s i o n

" 1 . 0 "

e n c o d i n g

" U T F

8 " ?

< ! D O C T Y P E

s v g

P U B L I C

"

/ / W 3 C / / D T < s v g

x m l n s

" h t t p : / / w w w . w 3 . o r g / 2 0 0 0 / s v g "

x m l n s : x l i n k

" h t t p : / / w w w . w 3 . o r g

< s y m b o l

i d

" i c o n

h a m b u r g e r "

v i e w B o x

" 0

0

2 4

1 4 "

< g

f i l l

"

F F F "

f i l l

r u l e

" e v e n o d d "

< !

I

g u e s s

t h i s

i s

t h e

p a r t

I

n e e d

t o

s t y l e . .

B u t

I

h a v e

t r i e d

e v e r y t h i n g . .

l i t e r a l l y ,

I

t r i e d

s t y l i n g

{ f i l l :

r e d }

< p a t h

d

" M 0

0 h 2 4 v 2 H 0 z M 0

6 h 2 4 v 2 H 0 z M 6

1 2 h 1 8 v 2 H 6 z " /

< / g

< / s y m b o l

< / s v g

The original que stion code The original que stion code

Slide 45

Slide 45

The secret: fill needs to be currentColor

Slide 46

Slide 46

SVG c an BOUNCE SVG c an BOUNCE

Slide 47

Slide 47

This . pen

Slide 48

Slide 48

d a t a ( )

{

r e t u r n

{

t o t a l :

2 0 0 ,

r a d i u s :

1 5 ,

}

} ,

m e t h o d s :

{

i n c r e m e n t H e i g h t ( )

{

t h i s . t o t a l

=

1 0 0

} ,

i n c r e m e n t R a d i u s ( )

{

t h i s . r a d i u s

=

1

} ,

b o u n c e B a l l ( )

{

t h i s . v y

=

t h i s . g ;

/ /

g r a v i t y

i n c r e a s e s

t h e

v e r t i c a l

s p e e d

t h i s . x 1

=

t h i s . v x ;

/ /

h o r i z o n t a l

s p e e d

i n c c r e m e n t s

h o r i z o n t a l

p o s i t i o n

t h i s . y 1

=

t h i s . v y ;

/ /

v e r t i c a l

s p e e d

i n c r e a s e s

v e r t i c a l

p o s i t i o n

i f

( t h i s . y 1

t h i s . t o t a l

t h i s . r a d i u s )

{

/ /

i f

b a l l

h i t s

t h e

g r o u n d

t h i s . y 1

=

t h i s . t o t a l

t h i s . r a d i u s ;

/ /

r e p o s i t i o n

i t

a t

t h e

g r o u n d

t h i s . v y

=

0 . 8 ;

/ /

t h e n

r e v e r s e

a n d

r e d u c e

i t s

s p e e d

}

} ,

. . . V ue.js

Slide 49

Slide 49

a n i m a t e B a l l ( )

{

/ / u s e

r A F

t o

a n i m a t e

b u t

p u t

a

b o u n d a r y

o n

i t

s o

i t

d o e s n ' t

r u n

f o r e v e r

l e t

s t a r t ,

v u e T h i s

=

t h i s ;

t h i s . r u n n i n g

=

t r u e ;

f u n c t i o n

s t e p ( t i m e s t a m p )

{

i f

( ! s t a r t )

s t a r t

=

t i m e s t a m p ;

v a r

p r o g r e s s

=

t i m e s t a m p

s t a r t ;

i f

( p r o g r e s s

<

1 3 0 0 0 )

{

v u e T h i s . b o u n c e B a l l ( ) ;

v u e T h i s . r e q

=

w i n d o w . r e q u e s t A n i m a t i o n F r a m e ( s t e p ) ;

}

e l s e

{

v u e T h i s . x 1

=

t h i s . r a d i u s ;

v u e T h i s . y 1

=

t h i s . r a d i u s ;

v u e T h i s . r u n n i n g

=

f a l s e ;

}

}

t h i s . r e q

=

w i n d o w . r e q u e s t A n i m a t i o n F r a m e ( s t e p ) ;

} , < b u t t o n

@ c l i c k

" a n i m a t e B a l l "

v

i f

" ! r u n n i n g "

S t a r t < / b u t t o n

Slide 50

Slide 50

b y This pen Tiffan y Ra yside

Slide 51

Slide 51

SVG c an SNAP SVG c an SNAP

Slide 52

Slide 52

E S 6 Templa t e E S 6 Templa t e Liter a l s Liter a l s

Slide 53

Slide 53

Pre v i o u s l y :

S t r i n g

C o n c a t e n a t i o n Pre v i o u s l y :

S t r i n g

C o n c a t e n a t i o n v a r

s t r i n g i e

=

" H i ,

I

o r d e r e d

"

n u m 1

"

"

p r o d u c t 1

" s

a n d

"

n u m 2

"

"

p r o d u c t 2

" s . " ; Hi, I ordered 5 apples and 2 or anges. c o n s t

s t r i n g i e

=

` H i ,

I

o r d e r e d

$ { n u m 1 }

$ { p r o d u c t 1 } s

a n d

$ { n u m 2 }

$ { p r o d u c t 2 } s . ` ;

Slide 54

Slide 54

This b y pen Anthon y Dugois

Slide 55

Slide 55

Slide 56

Slide 56

M two points x, y Q two points for the bezier handle x, y , two points x, y

Slide 57

Slide 57

f u n c t i o n

p l o t t e r ( p o i n t s ,

s t a r t X )

{

v a r

p a t h A r r

=

[ ] ,

p a t h p o i n t s

=

[ ] ;

f o r

( i

=

0 ;

i

<

i n c ;

i + + )

{

p a t h p o i n t s . p u s h ( p o i n t s

( ( i

( p o i n t s * 2 ) )

p o i n t s ) ) ;

p a t h A r r . p u s h ( `

$ { s t a r t X }

$ { p a t h p o i n t s [ i ] } ` ) ;

}

r e t u r n

p a t h A r r ;

}

r o p e 1 . s e t A t t r i b u t e ( " d " ,

` M

$ { p l o t t e r ( 5 0 ,

s t a r t 1 ) } ` . j o i n ( "

L " )

) ; Plot the point s Plot the point s M

x c o o rd

y c o o rd

L

x c o o rd

y c o o rd

Slide 58

Slide 58

Slide 59

Slide 59

SVG c an Distort SVG c an Distort

Slide 60

Slide 60

D i s t o r t i o n

F i l t e r s D i s t o r t i o n

F i l t e r s codrops buttons < f i l t e r

i d

" t u r b "

< f e T u r b u l e n c e

i d

" t u r b w a v e "

t y p e

" f r a c t a l N o i s e "

b a s e F r e q u e n c y

" 0 "

n u m O c t a v e s

" 2 "

r e s u l t

" t u r b u l e n c e _ 3 "

d a t a

f i l t e r I d

" 3 "

/

< f e D i s p l a c e m e n t M a p

x C h a n n e l S e l e c t o r

" R "

y C h a n n e l S e l e c t o r

" G "

i n

" S o u r c e G r a p h i c "

i n 2

" t u r b u l e n c e _ 3 "

s c a l e

" 4 0 "

/

< / f i l t e r

Slide 61

Slide 61

f u n c t i o n

a d d F i l t e r ( )

{

v a r

a l l

=

d o c u m e n t . g e t E l e m e n t B y I d ( " a l l " ) ;

a l l . s e t A t t r i b u t e ( " f i l t e r " ,

" u r l (

t u r b ) " ) ;

} ;

( f u n c t i o n

a d d F i l t e r T i m e d ( )

{

w i n d o w . s e t T i m e o u t ( a d d F i l t e r ,

5 0 0 0 ) ;

} ( ) ) ; Set the filter on a timer Set the filter on a timer

Slide 62

Slide 62

P ool

Slide 63

Slide 63

Slide 64

Slide 64

l e t

t u r b

=

d o c u m e n t . q u e r y S e l e c t o r A l l ( '

f i l t e r

r i p p l e

2

f e I m a g e ' ) [ 0 ] ,

f e D

=

d o c u m e n t . q u e r y S e l e c t o r A l l ( '

f i l t e r

r i p p l e

2

f e D i s p l a c e m e n t M a p ' ) [ 0 ] ;

f u n c t i o n

s c e n e O n e ( )

{

v a r

t l

=

n e w

T i m e l i n e M a x ( ) ;

t l . a d d ( ' b e g i n ' ) ;

. . .

t l . f r o m T o ( f e D ,

8 ,

{

a t t r :

{

s c a l e :

3 0

}

} ,

{

a t t r :

{

s c a l e :

0 ,

t r a n s f o r m O r i g i n :

' 5 0 %

5 0 % '

}

} ,

' b e g i n +

0 . 4 ' ) ;

} Animate the filter Animate the filter

Slide 65

Slide 65

This . pen

Slide 66

Slide 66

Slide 67

Slide 67

Slide 68

Slide 68

This b y (go follow him!) pen Lucas Bebber

Slide 69

Slide 69

M o r p h S V G P l u g i n . c o n v e r t T o P a t h ( " e l l i p s e " ) ;

f u n c t i o n

f l a m e ( )

{

v a r

t l

=

n e w

T i m e l i n e M a x ( ) ;

t l . a d d ( " b e g i n " ) ;

t l . f r o m T o ( b l u r N o d e ,

2 . 5 ,

{

a t t r :

{

s t d D e v i a t i o n :

9

}

} ,

{

a t t r :

{

s t d D e v i a t i o n :

3

}

} ,

" b e g i n " ) ;

v a r

n u m

=

9 ;

f o r

( v a r

i

=

1 ;

i

<

n u m ;

i + + )

{

t l . t o ( f S t a b l e ,

1 ,

{

m o r p h S V G :

{

s h a p e :

"

f "

i

} ,

o p a c i t y :

( ( M a t h . r a n d o m ( )

0 . 7 )

0 . 7 ) ,

e a s e :

L i n e a r . e a s e N o n e

} ,

" b e g i n +

"

i ) ;

}

Slide 70

Slide 70

This . pen

Slide 71

Slide 71

SVG c an do on-the-fly SVG c an do on-the-fly logo adjustment logo adjustment

Slide 72

Slide 72

, b y (y ou should go follow her , and the project) Ma v o L ea V erou

Slide 73

Slide 73

SVG c an incre a se KPIs SVG c an incre a se KPIs

Slide 74

Slide 74

Re visiting old appro ache s Re visiting old appro ache s Re sponsive animated Infogr aphic Re sponsive animated Infogr aphic  article Rethinking Information Presentation

Slide 75

Slide 75

C o n v e r si o n C o n v e r si o n ( one source e xample, ) The Whole Br ain Group i n c re a s e d

t r a ffic

t o

t h e i r w e b s i t e

b y

o v e r   4 0 0 % l e a d

i n c re a s e

b y

a l m o s t   4 5 0 0 % t h e

n u m b e r o f

n e w

v i s i t o rs

t o

t h e i r s i t e

t o

a l m o s t   7 8 %

Slide 76

Slide 76

Problems Problems Not responsiv e- tipping point: Not updated to current conte xt ^ Especially design Tim Kadlec Al l

po st s o l d e r

t h an

Al l

po st s o l d e r

t h an

2

y e a r s . 2

y e a r s . W h at

H appened? W h at

H appened?

Slide 77

Slide 77

This pen.

Slide 78

Slide 78

Change the viewbo x in Ja vaScript lik e we did before: Re sponsive: Re sponsive:

Slide 79

Slide 79

Re sponsive: Re sponsive: / *

m e d i a

q u e r y

e x a m p l e

e l e m e n t ,

m o b i l e

f i r s t

/

@ m e d i a

( m a x

w i d t h :

8 2 5 p x )

{

c o n t a i n e r

{

w i d t h :

1 0 0 % ;

}

}

@ m e d i a

( m i n

w i d t h :

8 2 6 p x )

{

. c o n t a i n e r

{

w i d t h :

8 2 5 p x ;

}

} Y ou already know this!

Slide 80

Slide 80

SVG c an dr a w it self SVG c an dr a w it self

Slide 81

Slide 81

The dash 's offset is an animatable property!

Slide 82

Slide 82

This pen

Slide 83

Slide 83

This b y (go follow him!) pen Chris Gannon

Slide 84

Slide 84

You c an inter act with an SVG You c an inter act with an SVG

Slide 85

Slide 85

Inter action

Slide 86

Slide 86

v a r

r a d i u s

=

b a l l o o n . g e t A t t r i b u t e ( " r " ) ;

v a r

c y S e t

=

b a l l o o n . g e t A t t r i b u t e ( " c y " ) ;

b a l l o o n . s e t A t t r i b u t e ( ' r ' ,

p a r s e I n t ( r a d i u s )

1 0 ) ;

b a l l o o n . s e t A t t r i b u t e ( ' c y ' ,

p a r s e I n t ( c y S e t )

1 0 ) ;

i f

( p a r s e I n t ( r a d i u s )

1 2 5 )

{

i o n . s o u n d . p l a y ( " b a l l o o n

p o p 3 " ) ;

v a r

b a l l o o n T l

=

n e w

T i m e l i n e M a x ( ) ;

b a l l o o n T l . a d d ( " p o p " ) ;

b a l l o o n T l . t o ( "

b a l l o o n " ,

0 . 0 5 ,

{

s c a l e :

5 ,

o p a c i t y :

0 ,

t r a n s f o r m O r i g i n :

" 5 0 %

5 0 % " ,

e a s e :

C i r c . e a s e O u t

} ,

" p o p " ) ;

. . .

s e t T i m e o u t ( f u n c t i o n ( ) {

b a l l o o n . s e t A t t r i b u t e ( " r " ,

" 4 5 " ) ;

b a l l o o n . s e t A t t r i b u t e ( " c y " ,

" 2 3 3 . 5 " ) ;

} ,

2 0 0 ) ;

}

Slide 87

Slide 87

Slide 88

Slide 88

c r e a t e B i g C i r c l e s ( )

{

c o n s t

s v g N S

=

t h i s . $ r e f s . f i g u r e . n a m e s p a c e U R I ;

t h i s . $ r e f s . p a t t e r n g r o u p . i n n e r H T M L

=

' ' ;

f o r

( l e t

i

=

0 ;

i

<

t h i s . n u m L i n e s / 2 ;

i + + )

{

l e t

c i r c

=

d o c u m e n t . c r e a t e E l e m e n t N S ( s v g N S ,

' c i r c l e ' ) ;

t h i s . a p p e n d ( t h i s . $ r e f s . p a t t e r n g r o u p ,

c i r c ) ;

t h i s . s e t A t t r i b u t e s ( c i r c ,

{

' c x ' :

t h i s . s i z e / 2 ,

' c y ' :

t h i s . s i z e / 2 ,

' r ' :

t h i s . t o t e s R a n d o ( t h i s . s i z e / 2 ,

0 ) ,

' f i l l ' :

' n o n e ' ,

' s t r o k e ' :

t h i s . g r a d i e n t s 2 [ t h i s . t o t e s R a n d o ( 1 ,

0 ) ] ,

' s t r o k e

w i d t h ' :

1

} ) ;

}

} , < d i v

c l a s s

" f o r m a r e a "

< h 3

C r e a t e

C i r c l e s : < / h 3

< b u t t o n

@ c l i c k

" c r e a t e S m C i r c l e s "

M a k e

s m a l l

c i r c l e s < / b u t t o n

< b u t t o n

@ c l i c k

" c r e a t e B i g C i r c l e s "

M a k e

b i g

c i r c l e s < / b u t t o n

< / d i v

Slide 89

Slide 89

a n i m a t i o n ( )

{

l e t

t l

=

n e w

T i m e l i n e M a x ( )

t l . a d d ( ' b e g i n ' )

t l . t o ( ' l i n e ' ,

2 ,

{

r o t a t i o n :

3 6 0 ,

r e p e a t :

1 ,

t r a n s f o r m O r i g i n :

' 5 0 %

5 0 % ' ,

e a s e :

S i n e . e a s e O u t

} ,

' b e g i n ' )

. . .

r e t u r n

t l ;

} ,

p a u s e A n i m ( )

{

v a r

t l

=

T i m e l i n e L i t e . e x p o r t R o o t ( ) ;

t l . p a u s e ( 0 ) ;

} , < d i v

c l a s s

" f o r m a r e a "

< h 3

A n i m a t i o n : < / h 3

< b u t t o n

@ c l i c k

" a n i m a t i o n "

P l a y

A n i m a t i o n < / b u t t o n

< b u t t o n

@ c l i c k

" p a u s e A n i m "

S t o p

A n i m a t i o n < / b u t t o n

< / d i v

Slide 90

Slide 90

This . pen

Slide 91

Slide 91

< d i v

i d

" a p p "

@ m o u s e m o v e

" c o o r d i n a t e s "

c o o r d i n a t e s ( e )

{

. . .

t h i s . s t a r t A r m s . p r o g r e s s ( 1

( e . c l i e n t X

/

w a l l e C o o r d s ) ) . p a u s e ( ) ;

} HTML (V ue Component) Ja vaScript

Slide 92

Slide 92

SVG c an be clipped and SVG c an be clipped and ma sked ma sked

Slide 93

Slide 93

Slide 94

Slide 94

This . pen

Slide 95

Slide 95

< s v g

c l a s s

" s v g "

v i e w B o x

" 0

0

5 0 0

5 0 0 "

< d e f s

< m a s k

i d

" m a s k "

m a s k u n i t s

" u s e r S p a c e O n U s e "

m a s k c o n t e n t u n i t s

" u s e r S p a c e O n U s e "

< i m a g e

x l i n k : h r e f

" h t t p s : / / s 3

u s

w e s t

2 . a m a z o n a w s . c o m / s . c d p n . i o / 2 8 9 6 3 / g i p h y

w i d t h

" 1 0 0 % "

h e i g h t

" 1 0 0 % "

/

< / m a s k

. . .

< r e c t

w i d t h

" 1 0 0 % "

h e i g h t

" 1 0 0 % "

f i l l

" u r l (

c h e c k e r ) "

m a s k

" u r l (

m a s k ) "

/

< / s v g

Slide 96

Slide 96

This b y (go follow her!) pen Y oksel

Slide 97

Slide 97

This b y Y oksel reference pen My on the differences CSS- T ricks article

Slide 98

Slide 98

Slide 99

Slide 99

This b y pen Noel Delgado

Slide 100

Slide 100

SVG c an signify something ch anging SVG c an signify something ch anging

Slide 101

Slide 101

This  with V ue.js pen

Slide 102

Slide 102

m e t h o d s :

{

/ / t h i s

f o r m a t s

t h e

h o u r

i n f o

w i t h o u t

a

l i b r a r y

g e t C u r r e n t H o u r ( z o n e )

{

l e t

n e w h r

=

n e w

D a t e ( ) . t o L o c a l e T i m e S t r i n g ( ' e n ' ,

{

h o u r :

' 2

d i g i t ' ,

m i n u t e :

' 2

d i g i t ' ,

h o u r 1 2 :

t r u e ,

t i m e Z o n e :

z o n e

} )

r e t u r n

n e w h r

} ,

. . .

} Side note: get rid of big libr aries

Slide 103

Slide 103

Y o u

c a n

u s e a n

S V G' s Y o u

c a n

u s e a n

S V G' s vi e w B o x

l i k e a

c a m e r a vi e w B o x

l i k e a

c a m e r a

Slide 104

Slide 104

Slide 105

Slide 105

get b box(); get b box();

Slide 106

Slide 106

Slide 107

Slide 107

This . pen

Slide 108

Slide 108

T h i s

. pe n F L O W C H A R T F L O W C H A R T

Slide 109

Slide 109

This b y pen Andre y Sorokin

Slide 110

Slide 110

SVG c an make a GAME SVG c an make a GAME

Slide 111

Slide 111

This . pen

Slide 112

Slide 112

H o w

did w e

u s e

S V G ? H o w

did w e

u s e

S V G ? T h r e e

w ay s: T h r e e

w ay s: Directly inline in the HTML , for loops Background images, for things lik e taco Inline in React

Slide 113

Slide 113

const App = React.createClass({

getInitialState : function ( ) {

return {

score : 500 ,

startTime : 0 ,

finalScore : 0

};

},

_startGame : function ( setGameToStart ) {

this .setState({ isPlaying : setGameToStart,

score : 500 ,

startTime : Date .now()

              });

},

_updateScore : function ( scoreDelta ) {

let score = Math .min( Math .max( 0 , this .state.score + scoreDelta), 1270 );

this .setState({ score : score });

if (score === 0 || score === 1270 ) {

this .setState({ isPlaying : false ,

finalScore : 10000

Math .round(( Date .now() - this .state.s }

},

...

render() {

return (

< div

    ...

    

< HeartMeter

score

{this.state.score}/

    ...

  

</ div

)

}

});

Slide 114

Slide 114

const HeartMeter = React.createClass({

render() {

return (

  <div>

    <svg className=&#34;heartmeter&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;2
      <path d=&#34;M1741.8 197.7c0 109.3-89 197.8-198.8 197.8a198.6 198.6 0 0 1
      <path d=&#34;M1591.8 127c-18.3 0-34.1 14.8-41.4 30.3-7.3-15.5-23.1-30.3-4
      <rect x=&#34;68.2&#34; y=&#34;140.8&#34; width={this.props.score} height=&#34;101.55&#34; fil
    </svg>

  </div>

)

}

});

Slide 115

Slide 115

Slide 116

Slide 116

Request Animation F r ame ( f u n c t i o n

g e t C o o r d s ( )

{

l e t

t C o o r d s

=

t C 1 . g e t B o u n d i n g C l i e n t R e c t ( ) ,

t x C o o r d s

=

t x C 1 . g e t B o u n d i n g C l i e n t R e c t ( ) ,

m C o o r d s

=

m C 1 . g e t B o u n d i n g C l i e n t R e c t ( ) ,

e l C o o r d s

=

e l e 1 . g e t B o u n d i n g C l i e n t R e c t ( ) ;

f u n c t i o n

i n t e r s e c t R e c t ( a ,

b )

{

r e t u r n

M a t h . m a x ( a . l e f t ,

b . l e f t

4 0 )

<

M a t h . m i n ( a . r i g h t ,

b . r i g h t

4 0 )

& &

M a t h . m a x ( a . t o p ,

b . t o p

4 0 )

<

M a t h . m i n ( a . b o t t o m ,

b . b o t t o m

4 0 ) ;

}

/ /

c a n ' t

d o

i f / e l s e

b e c a u s e

s o m e t i m e s

t h e y

b o t h

c o m e

o u t

a t

o n c e

/ /

a n d

o n e

o f

t h e m

w i l l

b e

i g n o r e d

i f

( i n t e r s e c t R e c t ( t C o o r d s ,

e l C o o r d s ) )

{

g e t H i t T e s t I n c r e a s e ( ) ;

}

i f

( i n t e r s e c t R e c t ( t x C o o r d s ,

e l C o o r d s ) )

{

g e t H i t T e s t D e c r e a s e ( ) ;

}

i f

( i n t e r s e c t R e c t ( m C o o r d s ,

e l C o o r d s ) )

{

g e t H i t T e s t M a r g a r i t a ( ) ;

}

r e q u e s t A n i m a t i o n F r a m e ( g e t C o o r d s ) ;

} ( ) ) ;

Slide 117

Slide 117

All this, and we didn't e ven All this, and we didn't e ven get to dat a vis! get to dat a vis!

Slide 118

Slide 118

O' R e i l l y

Book O' R e i l l y

Book SV G

An i mat i o n SV G

An i mat i o n

Slide 119

Slide 119

We b Animation Work shops We b Animation Work shops with V al Head � �

Slide 120

Slide 120

Th ank y ou! Th ank y ou!

on twitter @sar ah_edo