Loading ...
Sorry, an error occurred while loading the content.

"Spray Paint" Fill

Expand Messages
  • Grant Mc Auley
    Is there an easy way to create a spray paint fill for an SVG object - almost like a gradient fill, but with constant color density? In other words, suppose a
    Message 1 of 4 , Mar 2 2:29 PM
    • 0 Attachment
      Is there an easy way to create a "spray paint" fill for an SVG object -
      almost like a gradient fill, but with constant color density?

      In other words, suppose a have a white to red linear gradient. The
      density of the red *increases* as specified. I need a sparse density of
      red that remains constant across the whole object.

      Any info would be helpful.
    • Avraham Bernstein
      1. Lay down your gradient. 2. Overlay the same region with a pattern For sake of argument, assume that 1/4 pixels are transparent For example:
      Message 2 of 4 , Mar 3 8:19 AM
      • 0 Attachment
        1. Lay down your gradient.

        2. Overlay the same region with a pattern

        For sake of argument, assume that 1/4 pixels are transparent

        For example:

        <defs>

        <symbol id="region">

        <rect x="0" y="0" width="100" height="100"/>

        </symbol>

        <linearGradient id="gradient" x="0%" y="0%" x2="0%" y2="100%">

        <stop offset="0%" style="stop-color:white"/>

        <stop offset="100%" style="stop-color:red"/>

        </linearGradient>

        <pattern id="pattern" patternUnits="userSpaceOnUse" x="0" y="0" width="2" height="2">

        <rect x="0" y="0" width="1" height="1" fill="none"/>

        <rect x="1" y="0" width="1" height="1" fill="blue"/>

        <rect x="0" y="1" width="2" height="1" fill="blue"/>

        </pattern>

        </defs>

        <g>

        <use xlink:href="#region" fill="url(#gradient)"/>

        <use xlink:href="#region" fill="url(#pattern)"/>

        </g>

        ----- Original Message -----
        > Message: 8
        > Date: Tue, 2 Mar 2004 14:29:26 -0800
        > From: "Grant Mc Auley" <gmcauley@...>
        > Subject: "Spray Paint" Fill
        >
        > Is there an easy way to create a "spray paint" fill for an SVG object -
        > almost like a gradient fill, but with constant color density?
        >
        > In other words, suppose a have a white to red linear gradient. The
        > density of the red *increases* as specified. I need a sparse density of
        > red that remains constant across the whole object.
        >
        > Any info would be helpful.


        [Non-text portions of this message have been removed]
      • Grant Mc Auley
        To clarify: I am trying to represent a gas of constant density. The effect I want is a diffuse, discrete gaseous color distribution. This is similar to what
        Message 3 of 4 , Mar 3 11:09 AM
        • 0 Attachment
          To clarify:

          I am trying to represent a gas of constant density.

          The effect I want is a diffuse, discrete "gaseous" color distribution.
          This is similar to what the "airbrush" or "spray paint" tool in
          Photoshop does *except* that the density of the color is *constant*.
          This is also the problem with SVG gradients: the density of the color
          *changes*.

          One can get a diffuse color with constant density by lowering the
          opacity, but distribution of the color is *continuous* not discrete. A
          fine-grained discrete distribution does look diffuse.

          So, really what I want is: a white background, overlaid with a single
          color that is distributed finely and discretely with a constant density
          (like a "gas").
        • skatethere
          ... [...] ... single ... density ... I would think you would want to experiment with feTurbulence to create a non-continuous color distribution, similar to the
          Message 4 of 4 , Mar 4 9:47 AM
          • 0 Attachment
            --- In svg-developers@yahoogroups.com, "Grant Mc Auley"
            <gmcauley@s...> wrote:
            > To clarify:
            [...]
            > So, really what I want is: a white background, overlaid with a
            single
            > color that is distributed finely and discretely with a constant
            density
            > (like a "gas").

            I would think you would want to experiment with feTurbulence to create
            a non-continuous color distribution, similar to the demonstration at:

            http://jan.kollhof.net/projects/svg/examples/brushed.svg

            For example, slightly modifying Jan's filters, I generated the
            following, which seems to fit your description:

            <defs>

            <filter id="gaseousnoise" filterUnits="objectBoundingBox" x="-10%"
            y="-10%" width="120%" height="120%" >
            <!-- create noise. Adjust freq to achieve desired granularity
            -->
            <feTurbulence type="fractalNoise" baseFrequency="0.1"
            numOctaves="4" seed="1" result="fnoise"/>
            <!-- desaturate (so we can apply SourceGraphic color later) -->
            <feColorMatrix
            type="saturate" in="fnoise" values="0" result="desat"/>
            <!-- white source to lighten image. Adjust opacity as desired
            -->
            <feFlood flood-color="#FFFFFF" flood-opacity=".3"
            result="flood"/>
            <!-- combine white background with texture -->
            <feMerge result="lighten">
            <feMergeNode in="flood"/>
            <feMergeNode in="desat"/>
            </feMerge>
            <!-- combine with source object -->
            <feComposite in="lighten" in2="SourceGraphic"
            operator="arithmetic" k1="0" k2="1" k3="1" k4="0"
            result="merge"/>
            <!-- clip the result to the mask of the object -->
            <feComposite in="merge" in2="SourceAlpha"
            operator="in" result="mask"/>
            </filter>
            </defs>
            <rect
            width="400"
            height="200"
            x="100"
            y="200"
            fill="#C0C0FF" filter="url(#gaseousnoise)"/>

            --kirby
          Your message has been successfully submitted and would be delivered to recipients shortly.