For the SVG Open 2007 conference Jerrold Maddox Professor of Art The Pennsylvania State University

School of Visual Arts, 210 Patterson University Park PA 16802 United States jxm22@psu.edu

One of the most exciting opportunities to explore, to me at least, is the interaction of color using SVG on the small screens of mobile devices. By that I mean exploring the ways color can be varied through hue, value and intensity and the interactions between them to make images which are interesting, surprising and satisfying to look at. The possibilities are many, exciting, easy to do, scalable and light weight. For my presentation I will demonstrate some of these possibilities through five designs, each showing ways to explore color and shape on a small scale.

Introductory images First is an image which works with reds and blacks in a stack of rectangles scaled at 350px and 125px. Both the reds and blacks (most really dark reds from hex #900 to #100) become progressively darker and create a deepening color space. The reds (#f00 to #700) in this image are the same reds in the three variations on the design. The apparent changes in them is due to the altered context around them. The first variation is the same design with instead of the deep reds for the dark, there are greens (the complimentary color of the red - hex from #0a0 to #010). In it the contrast of the colors across the color wheel make a livelier image and because, scaled to this size—225px x 225px—the lines are narrow enough for the optical mixture of the colors to be evident. The first of the final two examples above uses colors that take a step away from the red—to either side, a red-violet, #e09 to #601, and an yellow-orange, #f90 to #710, and the last variation is a split compliment—#09f – #02a and #089 – #031—from the opposite side of the color wheel.

Color examples Here are simple presentations of some of the ways color can be varied for those who have not been exposed to these ideas before. There are examples of value(light and dark) - #1 - hue(colors) - #2 - intensity(brigntness and dullness) - #3 - closely related colors(next to each other on the color wheel) - #4 - split compliment(across the color wheel, but not directly) - #5 - and simultaneous contrast (a neutral taking on a complimentary color cast) - #6.

Design examples This example is a grid of lines with a rectangular overlay - the variations are in color, value and intensity.

Design examples This example uses sixteen lines of different weights varied with color and value and, in one case, #5, in color and length of line, as a break and accent. Each is against a differently colored background.

Design examples A square is rotated twenty times to create a circle with a border with the color and value varied and in the sixth example, the weight of the line varied.

Design examples Six circular motifs, four using colors near each other on the color wheel with variations in lightness and darkness - notice that the second (orange) and the forth(blue) optically blend in the transitions. The fith uses a split pair of complimentary colors and the sixth uses compliments with variations created by accents.