W3C home > Mailing lists > Public > www-svg@w3.org > January 2013

Re: fancy lines

From: Doug Schepers <schepers@w3.org>
Date: Sun, 06 Jan 2013 03:22:57 -0500
Message-ID: <50E93461.8070201@w3.org>
To: David Dailey <ddailey@zoominternet.net>
CC: 'Brenton Chapin' <bzipitidoo@gmail.com>, www-svg@w3.org
Hi, folks-

To continue this thread, here are a few features of strokes that seem 
likely to be useful; it would be great to see some concrete proposals 
that address these.

Variable-stroke width:
* 
http://vector.tutsplus.com/tutorials/tools-tips/illustrator-cs5-variable-width-stroke-tool-gestural-sketches-and-digital-inking/
* 
http://dsmy2muqb7t4m.cloudfront.net/tuts/000-2011/403-variable-width-2/variable_width_part2_0.jpg
* 
http://www.adobe.com/products/illustrator/features._sl_id-contentfilter_sl_types%2Bof%2Bwork_sl_for%2Bdesign.html
* 
http://www.astutegraphics.com/images/blog/tutorials/gradients_on_strokes_22_may_2012/12.png
* 
http://us.123rf.com/400wm/400/400/cobaltmoon/cobaltmoon0705/cobaltmoon070500002/979444-grey-brush-stroke-cat-on-black-background.jpg

Stroke gradients:
* along a stroke: 
http://images.macworld.com/images/article/2012/06/gradient20strokes-283463.png
* across a stroke (neon effect):
** 
http://images.macworld.com/images/article/2012/06/gradient20strokes20glitch-283458.png
** 
http://www.astutegraphics.com/blog/how-to-apply-a-gradient-fill-to-strokes-in-adobe-illustrator-cs5-and-earlier/

Pattern along a stroke:
* 
http://www.astutegraphics.com/images/blog/tutorials/gradients_on_strokes_22_may_2012/14.png
* 
http://www.technicalcommunicationcenter.com/wp-content/uploads/2009/03/ink-4.jpg
* 
http://coreldraw.com/cfs-filesystemfile.ashx/__key/CommunityServer.Components.ImageFileViewer/CommunityServer.Discussions.Components.Files.22/8015.BlendTires.gif_2D00_680x1000.png
* http://www.hpc.ncep.noaa.gov/html/fntcodes2.shtml
* 
http://blogs.roanoke.com/weatherjournal/files/2011/10/weathermapSunAM1031.gif
* 
http://www.dnr.state.oh.us/LinkClick.aspx?fileticket=N6dtCPYOd5I%3d&tabid=21033
* 
http://2.bp.blogspot.com/_u1JniawTeJ4/TM-FjXM-RvI/AAAAAAAAAGs/2gthrP-2yXQ/s1600/map-symbol-legend.jpg
* 
http://web.williams.edu/Biology/Faculty_Staff/hwilliams/Orienteering/legend.html
* http://www.balloontales.com/tips/dashed/index.html
* 
http://www.reneepearson.com/rpblog/wordpress/wp-content/uploads/2012/05/coyle-scalloped-border.png

Shaped strokes:
* http://indesignsecrets.com/follow-the-yellow-brick-road.php
* http://indesignsecrets.com/american-flag-stroke-style.php
* http://www.jhlabs.com/java/java2d/strokes/ZigzagStroke.jpg
* http://tpettit.best.vwh.net/adobe/zigzag_oval.gif
* http://tpettit.best.vwh.net/adobe/zigzag_squared2.gif
* http://images.crestock.com/4890000-4899999/4892123-xs.jpg

Compound styles:
* http://www.vektorgarten.de/img/tut/badge-change.gif
* http://www.yassinebentaieb.com/wp-content/uploads/2011/04/tut2_9.png
* 
http://blog.rolandtoth.hu/post/33156150031/fake-indesign-zig-zag-stroke-style

Distorted brush:
* http://www.flickr.com/photos/bravosixninerdelta/7641888492/
* 
http://www.masterfile.com/stock-photography/image/400-04913735/vector-set-of-grunge-curves-strokes-dry-brush-effect
* http://image1.masterfile.com/em_w/04/09/56/400-04095653w.jpg
* http://image1.masterfile.com/em_w/04/09/56/400-04095650w.jpg
* http://qvectors.net/downloads/images/thumb/stroke_graphic_vector_thumb.jpg


Other types might include multiple strokes of different width or style 
(curvy, zigzag, dotted, dashed, etc.), multiple different strokes 
styles, multi-colored strokes, and so on.

Rik's brush proposal may address some of these.

Regards-
-Doug

On 1/5/13 6:45 PM, Doug Schepers wrote:
> Hi, David-
>
> On 1/5/13 6:17 PM, David Dailey wrote:
>> Actually, we do have a proposal. It is called <replicate>. See some
>> of Israel Eisenberg's examples.
>
> If you want to propose <replicate> as a versatile, comprehensive, and
> compact syntax for various stroke effects, work up some examples of
> stroke effects that you think are useful / attractive, and how you would
> accomplish them using <replicate>.
>
> My impression of <replicate> is that is has some cool effects, but that
> using it is rather idiosyncratic and only works for certain effects, but
> I'm open to being proven wrong.
>
> Show us how it addresses this specific use case, that would be a
> compelling argument for inclusion.
>
> Regards-
> -Doug
>
>> Cheers David
>>
>> -----Original Message----- From: Doug Schepers
>> [mailto:schepers@w3.org] Sent: Saturday, January 05, 2013 2:30 PM To:
>> Brenton Chapin Cc: www-svg@w3.org Subject: Re: fancy lines
>>
>> Hi, Brenton-
>>
>> On 1/4/13 1:45 AM, Brenton Chapin wrote:
>>> Greetings list.  I dabble with SVG and am still trying to figure
>>> out what it can do.
>>>
>>> Stroke-dasharray allows the drawing of many kinds of dashed lines.
>>> Is there any way to draw such things as a double line, tapered
>>> line, or a wavy line, with a single use of a path or line element?
>>> The SVG documentation says patterns can be used for strokes, but I
>>> haven't been able to get that to work.  There's an example of a
>>> pattern used for a fill, but no example for a stroke.
>>
>> Patterns on strokes in SVG 1.1 don't really do what you'd like them
>> to, just like gradients on strokes; they don't follow the shape of
>> the stroke, but just serve as a static background.
>>
>> In SVG2, we do plan to provide new ways to stroke shapes, including
>> double lines or stroke-outside-shape, using "vector effects", and
>> maybe to modulate the stroke itself for tapered or wavy lines, though
>> we haven't yet got a solid syntax proposal for that (suggestions
>> welcome).
>>
>>
>>> Another idea was <tspan dy="-1"> and <tspan dy="1"> for a double
>>> line, except tspan only works on text.
>>
>> You can also play with the <use> element here.
>>
>>
>>> Meantime, what does work for a double line is drawing a thin line
>>> in the background color on top of a thick line.
>>
>> Yes, the <use> element makes this technique a bit easier [1].
>>
>> Here's another place where an inverted clip-path would be handy, so
>> it would "cut through" the stroke shape to the underlying background,
>> rather than having to match the background (which is a bit brittle,
>> especially for transparent background). I hope to have that in SVG2.
>>
>>
>> [1] http://schepers.cc/svg/double-stroke2.svg
>>
>> Regards- -Doug
>>
>>
>>
>>
>
>
Received on Sunday, 6 January 2013 08:23:14 GMT

This archive was generated by hypermail 2.3.1 : Friday, 8 March 2013 15:54:53 GMT