The ripple effect is a fading filled circle of lighter color than the background which expands from the point of the click to cross the entire element. The effect will run behind the text and any border set on the element.
This is a standard, no nonsense <p> element with some simple CSS styling for its background (we hope you like beige).
This <p> element is exactly the same as the one above it, except it has an additional class - "ripple" - which we use to add the ripple effect snippet to it. When the user clicks anywhere on this element, we should be able to see the ripple effect animation.
The ripple effect should trigger whenever the user clicks inside the <div> element, or on its border, or on its text, but not just outside the border. Note that the snippet we are using in this Demo will pick up the DOM element's background color for its own canvas background color, and set the element's background color to 'transparent'.
Note: the failures in this part of the Demo are the reason why Scrawl-canvas snippets remain an experimental (and unstable) feature! If somethinhg in the environment - third party CSS or Javascript code, for instance - for any reason applies a CSS transform to the DOM element, then the element and the canvas it contains can fall out of sync with each other. Scaling and 3d transforms will lead to mismatched dimensions and positions. In the worst case scenario, the canvas may decide to animate itself off the web page, breaking it.
To pass this part of the test the canvas elements created by the snippet functionality should match exactly the position and rotation of their parent element. For the current codebase this only holds true for elements positioned absolutely by their top/left CSS attributes, with no additional transforms applied to them.
To apply a Scrawl-canvas snippet to a 3D-transformed DOM element, use Scrawl-canvas stacks - see Demo Snippets 002 for an example.
[Test elements/snippets removed - they break the page]