Coons Patch Mesh Gradients in Inkscape

A Work in Progress — Last updated 29 September 2011

You can now create and edit meshes (warning, code is unstable). The code is available: bzr source. You will need Cairo trunk.

The Experiment

I've patched my copy of Inkscape trunk to support Mesh Gradients. It was relatively straight forward as all the hard work has been done for me by Cairo (trunk now contains Mesh Gradient support).[Thanks to Krzysztof Kosiński for giving me hints on where to begin!] My modifications are by no means generally usable. They contain little error checking and they will have to be rewritten if on-screen editing of meshes can be added. Never-the-less, it serves as a test bed for the proposed structure of a <meshGradient> specification. See: Coons Patch Mesh Gradients in SVG for more details.

Basic Gradient Types

Source.

Inkscape displaying examples of the old, rather boring, linear and radial gradients, as well as the exciting new Mesh Gradient (single patch). The gradients have been applied to <rect>s shown with red strokes.

Wild

Source.

Inkscape displaying an example of a single patch Mesh Gradient gone wild.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="300"
   height="300">
  <defs>
    <meshGradient
       x="50"
       y="130"
       id="meshGradient1"
       gradientUnits="userSpaceOnUse">
      <meshRow>
	<meshPatch>
	  <stop path="c  150,  0   300,-100   120,-100"  stop-color="red"    />
	  <stop path="c    0,100    40, 200    40, 220"  stop-color="yellow" />
	  <stop path="c  -250,-100  50,  60  -160,   0"  stop-color="orange" />
	  <stop path="c  -20,-80    20, -40"             stop-color="green " />
	</meshPatch>
       </meshRow>
     </meshGradient>
  </defs>
  <g>
    <rect
       width="280"
       height="280"
       x="10"
       y="10"
       style="fill:url(#meshGradient1); stroke:red" />
  </g>
</svg>
   

Wild — Opacity

Source.

Inkscape displaying the previous example with the opacity of the right two stops set to 0.5.

Sphere

Source.

Inkscape displaying an example of a sphere done with a Mesh Gradient consisting of a single row of four patches.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="400"
   height="400">
  <defs>
    <meshGradient
       x="54"
       y="163"
       id="meshGradient1"
       gradientUnits="userSpaceOnUse">
      <meshRow>
	<meshPatch>
	  <stop path="C  68, 110, 110,  68, 163,  54"  stop-color="red"    />
	  <stop path="C 153,  82, 148, 111, 143, 143"  stop-color="red"    />
	  <stop path="L 143, 143"                      stop-color="white " />
	  <stop path="C 113, 146,  82, 153"            stop-color="white"  />
	</meshPatch>
	<meshPatch>
	  <stop path="C 245,  35, 325,  83, 345, 163"                      />
	  <stop path="C 281, 138, 209, 136, 143, 143"  stop-color="red"    />
	  <stop path="L 143, 143"                      stop-color="white"  />
	</meshPatch>
	<meshPatch>
	  <stop path="C 374, 273, 273, 374, 163, 345"                      />
	  <stop path="C 138, 281, 136, 209, 143, 143"  stop-color="red"    />
	  <stop path="L 143, 143"                      stop-color="white " />
	</meshPatch>
	<meshPatch>
	  <stop path="C  83, 325,  35, 245,  54, 163"                      />
	  <stop path="C  82, 153, 111, 148, 143, 143"  stop-color="red"    />
	  <stop path="L 143, 143"                      stop-color="white " />
	</meshPatch>
       </meshRow>
     </meshGradient>
  </defs>
  <g>
    <rect
       width="360"
       height="360"
       x="20"
       y="20"
       style="fill:url(#meshGradient1); stroke:red" />
  </g>
</svg>

Conical Gradients

Source.

Inkscape displaying an example of a conical Mesh Gradient.

Mesh Patch Array

Source.

This example of a 6x6 patch Mesh Gradient was done to investigate the speed of rendering. It appears that rendering speed isn't a problem. Note, that Inkscape trunk with its Cairo based renderer is vastly faster than the current release (0.48). Also, I used a recent Sandy Bridge laptop.

Inkscape displaying an example of a multi-row Mesh gradient.