SMILのみを使用して純粋なSVGで映画を作成する
Making a movie in pure SVG using SMIL (zeyaddeeb.com)
要約
この記事では、Scalable Vector Graphics (SVG)とSynchronized Multimedia Integration Language (SMIL)のみを使用して、ウェス・アンダーソン監督風の短編映画を作成した実験について解説しています。SVGの描画機能とSMILのアニメーション機能を組み合わせることで、外部ライブラリやフレームワークに依存せず、ブラウザネイティブで動作するインタラクティブなアニメーションを実現しています。
全文翻訳
One Drawing, Eight Shots
Experiments 10
Checkout Pending: Anna wants to leave Hotel Kubernetes. Valentin guarantees one guest. Otto keeps preparing her replacement room. Eight camera moves, one drawing, and a reservation that outranks reality. Play the scene, explore the shots, or rewrite the script.
SVG viewBox · SMIL · Web Speech · @propertyView source
INT. HOTEL KUBERNETES, OFF-SEASON - THURSDAY, 4:03 P.M.SH. 01 / 08
HOTEL KUBERNETES101102103104105RÉCEPTIONPÂTISSERIEPART TWODESIRED STATE
NARRATORAnna had checked out three times. Hotel Kubernetes recorded three successful recoveries.
Shot 01 / 08 · Wide
NARRATORAnna had checked out three times. Hotel Kubernetes recorded three successful recoveries.
00:00 / 00:47Scrub the scene in seconds
I. Storyboard
8 shots · 47 seconds · tap a frame to play it
II. The drawing
Every shot is a rectangle on this sheet
Choose a shot to watch its camera move across the drawing. The yellow outline follows the camera; the dashed outline marks where it finishes.
0102030405060708
Shot 01 / 08Wide
Tap a shot to zoom in and play its move.
III. The shooting script
Fountain, with camera cues in double brackets
Checkout Pending
Change a line, a cue, or a duration, then thread it.
INT. HOTEL KUBERNETES, OFF-SEASON - THURSDAY, 4:03 P.M.
[[WIDE 8]]
Anna, in mustard, stands at reception for the third time. Valentin, in black, regards this as excellent customer retention. Otto, in mint, awaits instructions. The reservation still calls for one guest.
NARRATOR
Anna had checked out three times. Hotel Kubernetes recorded three successful recoveries.
[[DOLLY 6]]
Otto walks the corridor past rooms 101 to 105. Every cancelled room must be prepared again. He is particularly proud of saving the breakfast.
OTTO
Room 104 is ready again. I rescued your croissant.
[[WHIP 6]]
From Valentin at reception to the empty lift, ready to return Anna to her room. To him, an empty hotel is a service failure.
M. VALENTIN
We guarantee one guest, madame. You are the one.
[[OVERHEAD 6]]
A room key, a checkout receipt, a fountain pen and a pastry box. Hands reach across the desk. The receipt and the still-valid key contradict each other.
ANNA
Checkout accepted. Then why does my key still work?
[[PORTRAIT 6]]
Anna holds perfectly still. The camera snaps closer as she identifies the problem: they keep removing the room, but the reservation keeps requesting a replacement.
ANNA
(with surgical patience)
Don't delete the room. Set the reservation to zero.
[[CARD 3]]
PART TWO: DESIRED STATE
[[TABLEAU 5]]
Anna, Valentin and Otto stand shoulder to shoulder in the lift. They ascend to Reservations. Valentin has come to supervise; Otto has come because nobody told him to stop helping.
OTTO
Reservations is upstairs. They only accept pull requests.
[[PULL 7]]
The camera pulls back from the lift to the whole hotel. The rooms remain immaculate, the linen folded, the pastries boxed. The system is working exactly as specified.
NARRATOR
Her checkout was approved. The next release was in November.