Home
Animation
SVG Essentials
SVG Animation
Animating WWW Logos
More Animations
Site Map
Home
1994-2003
2004-2006
2007-2009
2010-2012
2013-2015
21. Lyon (2012)
Animation
History
Computers
Cmptr Img
Systems
Examples
SVG
History
Primer 1
Primer 2
Tools
Exmpls
SVG Anim
Primer
XSLT
Path_ology
3D
Scenes
WWW Logos
94-03
04-06
07-09
10-12
13-15
More Anims
Teaching
LBH
Hash
C&C
Road Trains
Navigation
Home
Animating WWW Logos
Index
19. Raleigh
20. Hyderabad
21. Lyon
Storyboard
Train
Lion
Ascii Lion
OnlyLyon
Final Move
1895-1900
ARRIVAL OF A TRAIN
AT LA CIOTAT
Lumière No. 653
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
0101010101
*LOPPKOXT9.
LPOOOOOPPXXXXT
KPPPOOOPOPXXXX
GPPOOOPOOPPXXX
POPPOPPPPAPOPO
POPOPPPPPKKPPO
POOPAPPPOAKKKP
KPPPPKKPPOKBKP
RKPPPPKP9OK#RK
#B01010101KB##
##10101010X#B#
##19801980XK#R
RR80198019TLMM
MR#BKMMKPXTTMM
MMRBGBMM#P9YLR
NRRRKBBB#BKT*K
GMNR#BBKK#KX*6
DKRM#BKKGKG6*6
DDMR#BKBKKLPTX
GDKR##KKGPL+TL
GL ##KKGPGX+YY
LM#BPBX+'T'
NNBAB6+*X
M#BBKA++Y
LMRM#KLY
LNMM#G6X
LMMRBALX
LMWRKA6
*D#NK6LX
6KB#GK6
#RKOX6,
KKX+Y,.
#6T'+..
'R*X'',,
'G6*'''
'GX*'+
RGYYY
ZZZ
K
T
Y
II
X
Y
H
O
F
L
T
I
YYYYY
II
HHHH
O
X
III
YYY
I
Y
I
HHHH
S
II
YYY
I
YY
II
HHH
I
Y
II
Y
IIII
M
I
Y
I
Y
I
Y
I
Y
IIIII
XX
II
Y
I
YY
I
M
III
Y
M
XXX
I
X
IIII
XX
II
Y
X
R
X
I
V
X
IIII
X
I
F
Y
X
U
V
X
U
R
X
I
S
II
M
F
H
X
R
UU
10
1
0
1
01
0
1
0
H
U
R
U
010
1
01
0
1
0
1
0
1
U
V
90
1
9
9
0
1
9
9
0
1
9
90
1
9
9
0
1
99
0
1
9
90
19
90
1
9
9
0
19
9
0
1
9
9
0
1
010
1
010
1
0
1
0
0
1
0
1
0
1
0
10
10
U
X
H
K
Q
D
X
V
N
U
R
XX
S
X
S
Q
K
Q
DD
N
V
U
R
X
R
XX
T
I
O
H
S
D
X
V
UU
XX
S
I
T
P
O
T
S
T
Z
UU
XX
S
I
S
H
P
JJ
ZZZ
T
N
U
R
I
R
H
P
G
O
G
ZZZZ
WW
R
M
R
Q
P
K
H
Z
ZZZZ
N
U
RR
X
M
PP
J
Z
ZZZZ
T
N
V
N
U
X
T
J
ZZ
ZZZZ
T
W
NN
U
S
Q
H
ZZ
ZZZZ
T
NN
V
R
M
T
H
ZZ
ZZZZ
T
N
B
A
X
M
Q
ZZZ
ZZZ
K
D
U
W
X
Q
T
H
ZZZ
ZZZ
Q
X
R
U
S
X
Q
ZZZZ
ZZZZ
U
A
X
Y
H
Q
C
ZZZ
ZZZZZ
XX
H
P
J
C
L
ZZ
ZZZZZZ
U
Q
O
G
P
LL
Z
ZZZZZZ
G
A
K
H
GG
CC
ZZZZZZZ
G
S
Q
K
GGG
ZZZZZZZZ
G
S
H
K
G
P
ZZZZZZZZZ
A
S
JJJ
ZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZ
ZZZ
K
T
Y
II
X
Y
H
O
F
L
T
I
YYYYY
II
HHHH
O
X
III
YYY
I
Y
I
HHHH
S
II
YYY
I
YY
II
HHH
I
Y
II
Y
IIII
M
I
Y
I
Y
I
Y
I
Y
IIIII
XX
II
Y
I
YY
I
M
III
Y
M
XXX
I
X
IIII
XX
II
Y
X
R
X
I
V
X
IIII
X
I
F
Y
X
U
V
X
U
R
X
I
S
II
M
F
H
X
R
UU
UU
R
S
U
II
M
F
T
H
U
R
U
UUU
1
01
0
1
0
1
0
X
U
V
VV
R
0
1
0
1
0
1
0
1
T
NN
N
L
Y
L
Y
ON
O
N
L
YL
YO
NN
V
O
N
L
YL
Y
O
N
W
T
V
L
YON
O
NLY
L
Y
O
N
K
X
S
N
0
1
0
10
10
1
0
1
K
Q
D
X
V
N
U
R
XX
S
X
S
Q
K
Q
DD
N
V
U
R
X
R
XX
T
I
O
H
S
D
X
V
UU
XX
S
I
T
P
O
T
S
T
Z
UU
XX
S
I
S
H
P
JJ
ZZZ
T
N
U
R
I
R
H
P
G
O
G
ZZZZ
WW
R
M
R
Q
P
K
H
Z
ZZZZ
N
U
RR
X
M
PP
J
Z
ZZZZ
T
N
V
N
U
X
T
J
ZZ
ZZZZ
T
W
NN
U
S
Q
H
ZZ
ZZZZ
T
NN
V
R
M
T
H
ZZ
ZZZZ
T
N
B
A
X
M
Q
ZZZ
ZZZ
K
D
U
W
X
Q
T
H
ZZZ
ZZZ
Q
X
R
U
S
X
Q
ZZZZ
ZZZZ
U
A
X
Y
H
Q
C
ZZZ
ZZZZZ
XX
H
P
J
C
L
ZZ
ZZZZZZ
U
Q
O
G
P
LL
Z
ZZZZZZ
G
A
K
H
GG
CC
ZZZZZZZ
G
S
Q
K
GGG
ZZZZZZZZ
G
S
H
K
G
P
ZZZZZZZZZ
A
S
JJJ
ZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZ
ZZZZZZZZZZZZZZ
ASCII ART
1993: HTML 1.1
Typewriter Art's Appearance in Films
1954's 'Stamp Day for Superman' featured typewriter art in the plot.
Read more
Standardization of ASCII Character Set by ANSI
In 1963, the US standards body, ASCII, defined the 96 characters in ASCII text.
Read more
Bell Labs Uses SC4020 for ASCII Art and Computer
Animation
In 1966, Ken Knowlton creates large photomosaic images from glyphs.
Read more
High Speed Lineprinters Allow Widespread Use of ASCII
Art
In the 1970s and 1980s, ASCII Art was also used for simple graphics.
Read more
Dot Matrix Printers and Variable-Width Fonts Improve
Quality
In the 1990s, larger character sets lead to a decline in ASCII Art.
Read more
Lyon Tourist Office and Convention Bureau
ONLY
LYON
TOURISM AND CONVENTIONS
Search
OK
ASCII ART
HISTORY
ASCII ART
HISTORY
ONLYLYON
LION
LYON'S
SIGHTS
IW3C2
CONFERENCES
ONLY
LYON
GREATER LYON
HIGH
LIGHTS
1995:
CSS 1
2000:
CSS 2
Typewriter Art's Appearance
in Films
1954's 'Stamp Day for Superman'
featured typewriter art in the plot ..
Standardization of ASCII Character
Set by ANSI
In 1963, the US standards body, ASCII,
defined the 96 characters in ASCII text ..
Bell Labs Uses SC4020 for ASCII
Art and Computer Animation
In 1966, Ken Knowlton creates large
photomosaic images from glyphs ..
High Speed Lineprinters Allow
Widespread Use of ASCII Art
In the 1970s and 1980s, ASCII
Art was used for simple graphics ..
Dot Matrix Printers and Variable-
Width Fonts Improve Quality
In the 1990s, larger character sets
lead to a decline in ASCII Art ..
All the highlights
HOT
SPOTS
Lyon by Night
Exploring the city of light... by night.
Smart move in August, park for
free
From the 1st to the 31st of August, why
not save some money and park for free...
Lyon city greeters
Do you want to see the City of Lyon
through the eyes of a Lyonnais ?
Hot Spot Museums
Museums in Lyon chose to open to all!
They set up attractive prices so that ..
Hot Spot: Music
All year, you can attend concerts,
rehearsals for free or at very attractive..
All the Hot spots
2005:
Web 2.0
LYON
EASILY
Maps, transport networks...
Everything to simplify your stay!
MY
ONLY
LYON
Have your picture taken in front of the
brand new ONLY LYON Monument. Silly,
romantic, funny or stylish, you decide!
JOIN
US!
ONLY
LYON
ONLYLYON (official
page)
on Facebook
Like
603 people like ONLYLYON
Also on
HTML5
+
CSS3
+
SVG
HTML5 builds upon
the widespread success of HTML4.
To give authors more flexibility, and enable
more interactive and exciting websites and
applications, HTML 5 introduces and enhances a
wide range of features and introduces multimedia via audio
and video elements. If you require the precise edges of vector-
drawn art, HTML 5 allows you to embed SVG (Scalable Vector Graphics)
in your own
documents. CSS3 offers some exciting new features to enhance the appearance of a website. Although these features
might not be absolutely necessary to the functionality of a website, users are coming to expect a website to look awesome as
well as operate cleanly. In both CSS3 and SVG, you may control the shape of the region into which the text is to flow by defining a
area into which the text is to flow. This area may consist of several separate regions in which case the text can be defined
to flow from one region to the next. This feature is regularly used in newspapers and magazines. Consistent
styling
over
the sub-regions that make up the complete flow region can help the reader to move easily from one sub-
flow
to the
next. HTML5 introduces built-in media support via the two <audio> and <video> elements, which offer
the
ability
to
easily embed media into HTML documents. Multiple source files can be specified using the <source>
element in order to provide video or audio encoded in different formats for different browsers. Audio on
the web has been fairly primitive up to this point and until very recently has had to be delivered through
plugins such as Flash and QuickTime. The introduction of the audio element in HTML5 is extremely
important, as it provides for basic streaming and
audio playback.
The CSS and SVG
Working groups have started a joint
task force to
discuss and develop mutual
features
such
as gradients,
transforms, filters, and
animation.
The aim
is to specify
a coherent under-
lying model
with
different
syntax,
syntactic
sugar,
for ease
of use.
It looks as
though
2012
will be
the year
when
many
of these
great
new features
will be seen in
browsers.
Lyon city greeters
Do you want to see the City of Lyon
through the eyes of a Lyonnais ?
Hot Spot Museums
Museums in Lyon chose to open to all!
They set up attractive prices so that ..
Hot Spot: Music
All year, you can attend concerts,
rehearsals for free or at very attractive..
All the Hot spots
2005:
Web 2.0
Have your picture taken in front of the
brand new ONLY LYON Monument. Silly,
romantic, funny or stylish, you decide!
JOIN
US!
ONLY
LYON
ONLYLYON (official
page)
on Facebook
Like
603 people like ONLYLYON
Also on
Figure 21.1: WWW21 Logo
Music:
Your browser does not support the audio element.
The following pages give some more detail on the various scenes:
Storyboard
Train
Lion
Ascii Lion
OnlyLyon Home Page
Final Scene