All <button> elements have been set with CSS styles "width: 70%; margin-bottom: 1rem; padding: 0.5rem 0". In the test, the gradient line length should update alongside button widths (for example when resizing the browser window).
This <grid> element has a CSS styling "height: 200px; background-color: rgba(200, 240, 255, 0.5)" declaration. The translucent background obscures two of the button elements' canvas displays (automated negative z-index on the canvas), except for the middle button which is displaying its canvas over its button element (automated positive z-index). The grid is resizable (bottom right corner).
This button element has CSS style "margin: 0 auto".
The button on the left has CSS styling "border-radius: 1rem; overflow: hidden", while the one on the right has "padding: 1rem" values. Both are in <div> elements with %limited CSS widths.
The <div> element below, containing <p> elements, is resizable (bottom right corner). The radius of the spotlight effect should resize in line with updates to the div's width.
Proin sed ex nibh. In hac habitasse platea dictumst. Pellentesque vitae gravida elit. Praesent interdum facilisis ligula, lobortis volutpat augue hendrerit nec. Aliquam ut fermentum dui. Etiam mollis tincidunt gravida. Nam ut ipsum at ipsum laoreet volutpat. Donec et mi facilisis, porta nisi et, malesuada nisl. Proin elit magna, tincidunt pulvinar ante quis, ultrices vehicula velit. Donec tortor nibh, maximus sit amet sagittis a, ornare ullamcorper magna. Mauris dapibus, mauris a gravida pharetra, urna libero laoreet libero, ut efficitur diam metus a purus. Aenean accumsan sollicitudin feugiat. Sed laoreet ut dui eu elementum. In et hendrerit mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In purus erat, ultrices id erat sed, placerat consequat dolor.
Vivamus ac dictum lacus. Pellentesque tristique lacus ut augue finibus pretium. Fusce sed arcu id augue placerat malesuada. Nulla viverra ultricies est, vel convallis leo hendrerit a. Cras nec tortor dolor. Sed facilisis urna dui, eu semper diam imperdiet ac. Praesent at diam et est rhoncus auctor id sed lectus. Phasellus consectetur felis tellus, quis egestas nisl suscipit vel.
Etiam vitae vehicula risus. Aliquam luctus porta egestas. Quisque vitae nulla sollicitudin, ultrices arcu sit amet, sagittis erat. Donec lacinia euismod diam ac rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce sed auctor dui, ac commodo lorem. Proin molestie ullamcorper mi sed laoreet. Aliquam vel orci eu sapien tincidunt luctus.
Suspendisse mollis erat at semper porttitor. Pellentesque blandit porttitor imperdiet. Sed nisi augue, ullamcorper nec ullamcorper sed, ullamcorper quis tortor. Quisque vehicula augue non tempor suscipit. Etiam vel mi felis. In imperdiet fermentum purus. In aliquam tellus sed ex auctor maximus. Nam sed ligula et dui tempor scelerisque. Etiam sed mollis sem. Vivamus at lorem quis risus mollis auctor. Suspendisse ac dictum ligula. Aliquam sodales ligula sit amet sem efficitur rhoncus. Nulla cursus ipsum non tortor venenatis gravida. Curabitur eleifend ornare nunc ac placerat. Nunc mauris tellus, semper at sollicitudin a, imperdiet blandit ipsum.
Integer mollis, leo eget aliquet tincidunt, nulla turpis pellentesque massa, a mollis mi neque in eros. Pellentesque dictum blandit est, a varius mi pulvinar nec. Nulla in felis ut est viverra vehicula. Vivamus rutrum placerat eros sed iaculis. Ut in suscipit ante. Integer vel sapien gravida, consequat metus at, sodales purus. Aliquam erat volutpat. Pellentesque non semper lorem, at pulvinar tellus. Ut commodo, tellus nec imperdiet tristique, eros nisl condimentum risus, sit amet fermentum velit dolor sed enim.
Note that the main file loads the minified version of the library, while the components load the source version - test to see if any conflicts from the two arise.
Scrawl-canvas components do not need to include a canvas. All components will shut down their animations when not visible to the user.