COAP:COAP-2100/week5

COAP 2100

COAP 2100 Archive

COAP:COAP-2100

COAP:COAP-2100/exams

COAP:COAP-2100/term project

COAP:COAP-2100/week1

COAP:COAP-2100/week2

COAP:COAP-2100/week3

COAP:COAP-2100/week4

COAP:COAP-2100/week5

COAP:COAP-2100/week6

COAP:COAP-2100/week7

COAP:COAP-2100/week8

Week 5

Topics covered

• Dynamic SVG (part II, continued)

Monday

• Static SVG tutorial (grouping constructs)
• SVG/SMIL animation tutorial
• SVG Essentials/Animating and Scripting SVG
• SVG Essentials On-line SVG textbook. Wiki version of J. David Eisenberg (2002), SVG Essentials, O'Reilly
• You can find a PDF of an SVG book in the worldclassroom / Documents folder

Motion examples:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Simple Motion animation example</title>
 
 <rect x="15" y="5" rx="5" ry="5" width="20" height="10" style="fill:#CCCCFF;stroke:#000099">
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
       <mpath xlink:href="#path1"/>
    </animateMotion>
   </rect>
 <path id="path1" d="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12" stroke-width="5" stroke="#000000" fill="none"/>
 </svg>

With internal path

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Simple Motion animation example</title>

 <rect x="15" y="5" rx="5" ry="5" width="20" height="10"  
       style="fill:#CCCCFF;stroke:#000099">
  <animateMotion dur="6s" repeatCount="indefinite" rotate="auto"
       path ="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"/>
   </rect>
 </svg>

Wednesday

Midterm exam

Subject area: SVG

• Graphic primitives
• Grouping and reusing
• Simple animation:
  • to/from/values/dur/begin/etc