

The only solution to that would be to repaint the shape on every browser resize which is an overhead. Canvas is raster (pixel) based and hence would look blurred/pixelated when scaled beyond a certain point. I have also included a hover effect on the shape to illustrate one drawback of Canvas when compared to SVG. ("stroke-width", this.strokeWidth) ĭisclaimer I did not write the above pen, only sourced it.Īlthough this is far from complete, you may also be able to generate this shape using CSS. This.element = document.createElementNS(svg.namespace, "path")

RAINDROP SHAPE PATH CODE
****Here's where the code to create the shape begins!****/

****This sets up the user interface - we've included the script for this as an external library for the codepen****/ ****Let's initialise our SVG ready to draw our shape****/ This.element = document.getElementsByTagName("svg")
