Re: fancy lines

On Sun, Jan 6, 2013 at 7:27 AM, Dirk Schulze <dschulze@adobe.com> wrote:

> 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.
>

Yes,
the more simple border effects can be done with the border brush I proposed.

Variable width strokes is something that we can add too. I would be worried
if this can be implemented reliably since it is a fairly hard problem. If
there's interest, I can see how we defined them internally so we can
extrapolate markup. (It looks like we define a set of stroke widths along
the path)

The 'bristle' brush examples would be really hard to implement or create
markup for. They are also very slow and memory intensive so maybe best
tackled later.


>
> 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.
>

They're still strokes so none of the fill rules changes.
The path is filled like before but when the stroke is calculated on the
path, you get all these fancy effects.


>
> 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
> >>>
> >>>
> >>>
> >>>
> >>
> >>
> >
> >
> >
>
>