@gogoend/svg-filter-graph-builder

A node-based SVG filter graph builder, let you can compose complex SVG filter by dragging nodes, which makes the workflow more easily and visualizing without writing unreadable SVG filter structure.

Terminology

• Node

  Node is the thing that represents a way to generate or process the content from user input or the last node output. It includes some ports, which defines a series of properties that used to generate or process the content. The input and output relation is created by the link between the ports from the one and the another nodes.

  There is some the rules about the node:

  • According the usage of the node, it can have zero, one, or more input ports, but is and only one output port on the node.
  • As the SVG Filter SPEC defines, the image input always names in,in2, the image output always names result, so does the app.

• Port

  Port represent property that the node need to input or output. You can create the relation between the two ports.

  There is some rules about the port:

  • You cannot create a link between two ports when:

    • they both come from the same node,
    • the things that the ports represent has circular dependency - which means after linking them, there will be a loop appear between two relative nodes,
    • both of them are input port or output port,
    • there is a link already existing between them - which means you cannot create a duplicated link

• Link

  Link represent the input and output relation between two nodes.

Basic Usage

This is the snapshot of the app.

• 

There are three panels placed on the main interface.

• The left one is node library panel, which place holds the definition for all types of nodes.
• The middle one is canvas panel, where you can put nodes and create links among them.
• The right one is config panel. When you select a stuff on the canvas panel, all of the available configurations about this stuff will display here.

Besides, there is a panel floating on the main interface.

• The output preview panel, which is used for previewing current filter generated by the selected node. You can select your own picture to put it here and see the result after applying the filter.

You can drag a node definition you would like to use from node library panel, then put it on the canvas panel. After two or more nodes exist on the canvas, you can drag out a link from the port, and drop its endpoint on another port which is available for link.

After laid out the nodes and links likes the above snapshot, you can click <SVG> button on the node whose effect is as your wishes, then you will get the following SVG Filter code,

<svg data-v-app="">
  <filter id="E4B91ED1-5995-48A1-8574-F352B937FE2E">
    <feOffset in="SourceGraphic"></feOffset>
    <!----><!----><!---->
    <feComponentTransfer
      in="SourceGraphic"
      result="040822F7-D416-4325-B428-8BE8433B166C"
    >
      <feFuncR type="identity"></feFuncR>
      <feFuncG type="identity"></feFuncG>
      <feFuncB
        type="gamma"
        result="6EF3BF7F-03DE-4D91-AB81-8D1B0E8F340D"
      ></feFuncB>
      <feFuncA type="identity"></feFuncA>
    </feComponentTransfer>
    <feMorphology
      in="040822F7-D416-4325-B428-8BE8433B166C"
      operator="dilate"
      radius="5.8"
      result="A432BA04-FCA6-4546-9E01-188D4125BB6B"
    ></feMorphology>
    <feColorMatrix
      in="A432BA04-FCA6-4546-9E01-188D4125BB6B"
      type="matrix"
      values="1 0 0 0 0 0 1.1 0 0 0 0 0 1 0 0 0 0 0 1 0"
      result="547A7FE0-3D96-4932-9683-0D5936C5CEF0"
    ></feColorMatrix>
    <feBlend
      in="SourceGraphic"
      in2="547A7FE0-3D96-4932-9683-0D5936C5CEF0"
      mode="hard-light"
      result="E4B91ED1-5995-48A1-8574-F352B937FE2E"
    ></feBlend>
  </filter>
</svg>

and you can use it everywhere through CSS filter property like:

.filtered-element {
  filter: url(#E4B91ED1-5995-48A1-8574-F352B937FE2E)
}

Project setup

yarn

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.