Re: fancy lines

Awesome list! We should have a session on the F2F about these kind of strokes. Your separation is reasonable. The "pattern along a path" is mainly the "brush" proposal from Rik. 

We would need to check how some of these new "paint servers" could be used to fill a shape. We never made an distinction between fill and stroke in the past.

Greetings,
Dirk

Sent from my iPhone

On Jan 6, 2013, at 12:24 AM, "Doug Schepers" <schepers@w3.org> wrote:

> 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 15:27:38 UTC