Diffusion Curves

From Inkscape Wiki
Jump to navigation Jump to search

Diffusion Curves are a way of specifying very free form gradients. It works by letting colors diffuse from curves, seeding the colors along both sides of the curves using gradients (along the curves). Additionally a varying amount of blur can be applied along the curves. This makes diffusion curves extremely flexible and very interesting to have in Inkscape.


The links at the bottom define various features that can be useful for Diffusion Curves. Here the following features are considered:

  • Colors at nodes / gradients defined on paths (on one or both sides of the curve)
  • Diffusion across boundaries

Diffusion curves could be represented by paths with gradients attached to them, along with an enclosing group that says that the colors should be diffused within that group. For example (don't mind the exact attributes):

<g diffuse="true">
  <path d="M 0,0 L 190,190"
        leftBoundary="#F00 #00F" rightBoundary="#00F #F00" boundaryBlur="5" />


<g diffuse="true">
  <path d="M 0,0 L 190,190"
        leftBoundary="url(#redToBlue)" rightBoundary="url(#blueToRed)" boundaryBlur="5" />

Assuming that the two gradients are made to go from #F00 to #00F and vice versa this would roughly look like this (note that this is just a rough approximation):


Note that with diffusion curves the blur itself can also vary along the path, which could be used in the above image to let the edge be sharper in some areas. This is useful for depth of field effects for example.

Normally diffusion curves will have infinite extent, but this can be controlled when needed by surrounding a set of curves with a closed path that has an outside boundary which is fully transparent.

Mathematical Definition

Diffusion curves are defined as the solution to a Laplace equation (the sum of second partial derivatives is zero) with boundary conditions (the colors on the curves). This is done for both the colors and the blur and then a spatially varying blur is applied to the diffused colors using the diffused blur values.

Alternatively diffusion curves can be seen as minimizing the integral (over the entire image) of the squared gradient magnitude, with color constraints at certain points. This is convenient when using a representation based on triangles with barycentric interpolation (as this yields a piecewise linear function the Laplacian is zero everywhere, except on the boundaries).

It might also be convenient to use an alternative method for incorporating blur, as simulating a spatially varying blur is not easy. One method might be to use an equation based on the heat equation which can be used for doing a spatially varying blur ([math]\displaystyle{ C }[/math] represents the color constraints):

[math]\displaystyle{ \begin{align} \gamma\frac{\partial}{\partial t}y&=\nabla\cdot(\beta\nabla y) \\\gamma(f-C)&=\nabla\cdot(\beta\nabla f) \\0&=\nabla\cdot(\beta\nabla f)+\gamma(C-f) \\f&=\arg\min_f \int_{\mathbb{R}^2}\frac{1}{2}\|\beta^{1/2}\nabla f\|^2+(C-\frac{1}{2}f)\gamma f\,dx \end{align} }[/math]

Or else the color constraints could be applied using the derivative of the colors over each edge in combination with the color on the edge (which would be the average of the colors on either side). When blurring an edge the derivative would get smaller (by a factor of [math]\displaystyle{ 1/blurRadius }[/math] for example).

Converting to SVG

There would be several possible avenues for converting diffusion curves to SVG:

  • Bitmap rendering.
    • + High quality at a specific resolution.
    • - Low quality on zooming in.
    • - Also large for simple images.
  • Using filters (for example, it should be possible to simulate spatially varying blur by doing multiple blurs and combining the results using weights).
    • + Very low (almost fixed) storage requirements.
    • - Diffusion difficult to implement efficiently (fast solvers either use multigrid methods or kernels of spatially varying size).
    • - Spatially varying blur is difficult to implement with good quality.
  • By solving the Laplace equations on a (Delaunay) triangulation, using barycentric interpolation between the vertices.
    • + Good quality at any resolution.
    • + Storage scales directly with the complexity of the image.
    • - Needs "add" (and "in") compositing, which is only available in filters in SVG 1.1 (it is also available in SVG Compositing).
    • Note that other interpolation/approximation schemes can give higher quality result but are also harder to use in the solver (as well as in the resulting SVG).


  • If diffusion curves are indeed represented by paths inside a group, what happens with subgroups or shapes without having gradients defined along their edges?
  • What should happen with 2D objects (filled shapes and strokes) in diffusion groups?
    • It might actually be interesting to not only set colors and blur values (heat capacity?) along the sides of edges (1D), but also for surfaces (2D). This shouldn't complicate things much. In fact, it might even be slightly easier to handle the 2D case properly (as it is easier to discretize for example).
  • It might be interesting to redefine them in some way that unifies the color diffusion and blurring. E.g. currently colors are either to be met exactly or not at all, is it possible to reformulate the problem in such a way that we can restrict colors to varying degrees?