Weeks 7 - 9
SVG text. masks, patterns, filters and animation
One more example with gradients (also #14)
Text and more text and visual entendre (typographic puns) -- consider accessibility
Pattern and more
Masks and clipPaths -- more mask (from textbook) -- fancy clipPath
Filters (examples from text)
The Graphical Web -- complex SVG example
Some newer experiments:
Peeling an apple declartively: http://cs.sru.edu/~ddailey/svgtests/gradientStroke1d.svg also animated dash-offset on trefoil http://cs.sru.edu/~ddailey/svg/cssSVGrotate3.htm
Not for IE, but okay in Chrome, Opera, Firefox, I think. (thanks to
students for reminding me of link!) (see problems with gradients across
browsers: http://cs.sru.edu/~ddailey/svg/StrokeEffects.jpg )
moving element in clipPath
rotating things in HTML
over and under in a knot-like thing
#5 -- Due date was postponed from Friday Oct. 13 to Monday October 16th
Friday October 20th -- Open book, open computer. Some
multiple choice, some essay (i.e., building code). Covering everthing
we've covered to that date.
Assignment #6 -- Due: Wednesday November 1st.
Create an SVG animation that animates all of the following concurrently (and with different durations)
containing a textarea, three buttons (labeled 'ellipse' 'rectangle',
and 'path' and an SVG. The SVG should occupy the right half of the
screen, regardless of screen-size. When any button is clicked, a random
example (having random coordinates within the SVG and being stroked and
filled with random colors ) of that SVG element should be drawn,
with its SVG markup (code) being written into the textarea.
- at least two attributes of at least three of these five "drawn objects" (rect, ellipse, line, image, text)
- the "d" attribute of a path
- a transform applied to at least one of the drawn objects (rect, ellipse, line, path)
a pattern, a clipPath, a gradient and a mask. At least two of those
should have their content (and/or attributes) modified by animation
- 10% of the grade is reserved for "coolness," innovation, cleverness, art!
If you want the full 10% then it must be the coolest in the class and
you must be willing (time allowing) to let me show it to the class.
Final Project -- due when the final exam (if we had one) would begin. initial notes