Creating Lightning Strikes

Inkscape Special FX tutorial

I had a request for an electricity effect/ lightning strike. I found a rather quick and simple way to do it in Inkscape.
2Dgameartguru inkscape toolbar

Getting Started

2dgameartguru - creating lightning strikes

Start with a dark rectangle as the background for the effect.

Draw a shaky line with the freehand tool (F6). Start by adjusting the smoothing (simplifying of the line) to ~30 to keep a the amount of nodes manageable.

Select the Stroke paint and the flat colour option and a light blue colour (e.g. RGB 0/ 225/ 250).

Adjust the stroke width to get a line of medium thick-ness.

2dgameartguru - creating lightning strikes
2dgameartguru - creating lightning strikes

Add some more nodes if needed to get an even spread of nodes. Add some shorter lines with a thinner stroke. Select the lines, convert all of them to paths.

Combine the shapes with the Path/ Union option (CTRL + +).

Edit the nodes to create some variation and form sharp ends to the lines.

2dgameartguru - creating lightning strikes
2dgameartguru - creating lightning strikes

Duplicate the lightning shape and add a blur effect to one shape (Blur/ Filters/ Fancy Blur) to create the glow. Move this shape below (Page Down) and add a gradient fill (white to white with high alpha) to the top shape.

2Dgameartguru inkscape toolbar

Details and Glow

With a some additions it turns into a nice lightning strike at night.

2dgameartguru - designing lightning strikes

As with most effects it’s a matter of playing around with them to get them right. Alter the colours, change the line width and the deformation of the nodes afterwards until you get the effect you are after.

If you want to animate these I suggest doing the lines first and altering a copy of the line shape in a new layer [see the animation tutorial for this]. Animate the shape roughly and not too similar. After creating a few variations of the lightning strike, start with the conversion to paths.

It’s a lot easier to adjust a few nodes on a line than twice that many or more in a shape.

I hope this quick tutorial is helpful to some.


Get the source art (svg file) of this tutorial for free!