Awesome
<stippled-image>
<stippled-image> is a custom element to show the stippled version of an image. A stippled image gives a Wall Street Journal's headcut like look. This effect is achieved by using Weighted Voronoi Stippling as shown in this Observable notebook.
Using
This element is available on npm
<script type="module" src="https://unpkg.com/stippled-image?module"></script>
<stippled-image src="./obama.png"></stippled-image>
Properties and Attributes
You can configure the image using following properties/attributes.
src
The URL of the image
width & height
Configure the size of the image
<stippled-image src="./obama.png" width="517" height="646"></stippled-image>
sampling
This lets you configure the number of dots to show. The number of dots is area of the image divided by the sampling value.
points
You can be explicit about how many points you want rather than sample it.
<stippled-image src="./obama.png" points="10000"></stippled-image>
radius
Radius of each dot in pixels
color
Color of the dot