Blog post - https://www.jitendrazaa.com/blog/salesforce/gravatar-reusable-lightning-web-component/

gravatarDemo.html

<template>
    <div class="slds-text-heading_large slds-text-align_center">Gravatar - Reusable Lightning Web Component</div>

    <div class="slds-grid">
        <div class="slds-col slds-size_2-of-8">
            <c-gravatar size={size} email={email} is-round-corner={isround}></c-gravatar>
        </div>
        <div class="slds-col slds-size_6-of-8">
            <lightning-input type="number" name="input2" label="Image size in pixel" value={size} onchange={updateSize}></lightning-input>
            <lightning-input type="email" label="Email address" value={email} onblur={updateEmail}></lightning-input> 
            <lightning-input type="checkbox" label="Rounded corner"  value={isround} onchange={updateBorder}></lightning-input> 
        </div>
    </div>
</template>

gravatarDemo.js

import { LightningElement,track } from 'lwc';
export default class GravatarDemo extends LightningElement {
    @track  size = 150;
    @track  email;
    @track isround;
    updateEmail (event){
        //Check if email is valid or not using OOB LWC support
        if(event.target.validity.valid){ 
             this.email = event.target.value;
        } 
    }
    updateBorder(event){
        this.isround = event.target.checked;  
    }
    updateSize(event){
        this.size = event.target.value; 
    } 
}

gravatarDemo.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets> 
        <target>lightningCommunity__Page</target> 
    </targets>
</LightningComponentBundle>