Animated preview here
HypeSquiggleEnabler is based on SVG-filter and uses some classes to apply the effect to specific elements. It comes in handy if you want to create that hand drawn animation look. You can add the effect to any element through applying the class
hypeSquiggle and modify it’s speed with
squiggleSlow (Default is
squiggleFast). If you got two squiggles with the same speed and it seems too synchronized you can offset one squiggle animation by adding
squiggleOffset (applies negative animation delay). This effect could also be described as a jitter or wobble (for searches).
- Add the enabler to your project
- To apply a squiggle use a ‘Class Name’ in the form of
- Select the ‘Identity’ tab on the 'Inspector’panel.
- Enter class and options in the field ‘Class Name’ (for example
Most browser fully support SVG-filter (Info: https://caniuse.com/#search=svg%20filter), Hype 4 Example requires Beta-Access but is the same code. But the only difference is that it demos the Vector Pen Tool.
Hype 4 with Vector Pen Tool (currently requires Beta-Access) :
1.0 Initial release as symbol and under MIT-license
1.1 Symbol now make sure it is hidden after enabling the effect