---
description: https://codepen.io/tmahour1/pen/mdVeEbB
---

# hexagon thư viện tạo avatar Canvas (ok)

Ví dụ tổng quát:

**Sử dụng xoay quanh với 6 vấn đề: user-avatar-border, user-avatar-content, user-avatar-progress, user-avatar-progress-border, user-avatar-badge, user-avatar-badge-content, user-avatar-badge-text**

\


```
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by Tarun Mahour</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<a class="user-short-description-avatar user-avatar medium" href="profile-timeline.html">
  <div class="user-avatar-border">
    <div class="hexagon-120-132"></div>
  </div>
  <div class="user-avatar-content">
    <div class="hexagon-image-82-90" data-src="https://cdn.fstoppers.com/styles/large-16-9/s3/lead/2014/10/dani-diamond-posing-how-to-model-photogaphy-best-top-fstoppersb.jpg"></div>
  </div>
  <div class="user-avatar-progress">
    <div class="hexagon-progress-100-110"></div>
  </div>
  <div class="user-avatar-progress-border">
    <div class="hexagon-border-100-110"></div>
  </div>
  <div class="user-avatar-badge">
    <div class="user-avatar-badge-border">
      <div class="hexagon-32-36"></div>
    </div>
    <div class="user-avatar-badge-content">
      <div class="hexagon-dark-26-28"></div>
    </div>
    <p class="user-avatar-badge-text">24</p>
  </div>
</a>
<!-- partial -->
  <script  src="./hexagon.js"></script>
</body>
</html>
```

```
const app = {
  existsInDOM: function (selector) {
    return document.querySelectorAll(selector).length;
  },
  plugins: {
    createHexagon: function (options) {
      if (app.existsInDOM(options.container) || typeof options.containerElement !== 'undefined') {
        return new XM_Hexagon(options);
      }
    }
  }
};
"use strict";function _typeof(t){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function XM_Hexagon(t){var p={width:100,height:110,lineWidth:6,lineColor:"#fff",lineCap:"square",buttEnd:!1,fill:!1,clip:!1,roundedCorners:!1,roundedCornerRadius:4,animation:{easing:!0},animateOnScroll:!1,controlAnimation:!1,speed:50,scale:{start:0,end:1,stop:1},invertedProgress:!1,reverse:!1,linkText:!1,innerLink:!0,linkToContainer:".bar-progress-wrap",linkTo:".bar-progress-text",extraLinkTo:[],linkUnits:"%",linkUnitsSelector:".bar-progress-unit",innerTextFollowsProgress:!1,decimalPoints:0,barTextStyle:{primaryColor:"#fff",secondaryColor:"#363636",font:"bold 10px Exo, sans-serif"}},h=[],v={},i=function(){var t=document.querySelectorAll(p.container);if(!t.length)throw Error('Unable to find "'.concat(p.container,'" on the DOM'));var i=!0,e=!1,n=void 0;try{for(var r,o=t[Symbol.iterator]();!(i=(r=o.next()).done);i=!0){var a=r.value,d={};d.container=a,d.imageSrc=a.getAttribute("data-src"),d.canvas=document.createElement("canvas"),d.ctx=d.canvas.getContext("2d"),d.finishedDrawing=!1,d.canvas.width=p.width,d.canvas.height=p.height,d.canvas.style.position="absolute",d.canvas.style.top=0,d.canvas.style.left=0,d.container.style.width="".concat(p.width,"px"),d.container.style.height="".concat(p.height,"px"),d.container.style.position="relative",d.container.append(d.canvas),h.push(d)}}catch(t){e=!0,n=t}finally{try{i||null==o.return||o.return()}finally{if(e)throw n}}},e=function(){t.scale&&(p.scale.stop=p.scale.stop>p.scale.end?p.scale.end:p.scale.stop,p.scale.stop=p.scale.stop<p.scale.start?p.scale.start:p.scale.stop,p.scale.stop=void 0!==t.scale.stop?p.scale.stop:p.scale.end),v.sideWidth=o(p.width,p.height),v.perimeter=6*v.sideWidth,v.lineLength=p.scale.stop/p.scale.end*v.perimeter,v.sideCount=Math.floor(v.lineLength/v.sideWidth),p.stopPoint=p.scale.stop},n=function(){var t=!0,i=!1,e=void 0;try{for(var n,r=h[Symbol.iterator]();!(t=(n=r.next()).done);t=!0){var o=n.value;if(p.gradient){var a=o.ctx.createLinearGradient(0,p.height,p.width,0);a.addColorStop(0,p.gradient.colors[0]),a.addColorStop(1,p.gradient.colors[1]),o.ctx.strokeStyle=a,o.ctx.fillStyle=a}else o.ctx.strokeStyle=p.lineColor,o.ctx.fillStyle=p.lineColor;o.ctx.lineCap=p.lineCap,o.ctx.lineWidth=p.lineWidth}}catch(t){i=!0,e=t}finally{try{t||null==r.return||r.return()}finally{if(i)throw e}}},r=function(){var t=!0,i=!1,e=void 0;try{for(var n,r=h[Symbol.iterator]();!(t=(n=r.next()).done);t=!0){var o=n.value;p.speed=100<p.speed?100:p.speed,p.speed=p.speed<1?1:p.speed,o.animation={},o.animation.easing=p.animation.easing,o.animation.speed=p.speed,o.animation.step=o.animation.speed*p.width/2e3,o.animation.currentProgress=0}}catch(t){i=!0,e=t}finally{try{t||null==r.return||r.return()}finally{if(i)throw e}}};function a(t){for(var i=(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop)+window.innerHeight,e=t.canvas,n=e.offsetTop;e=e.offsetParent;)n+=e.offsetTop;return n<=i}function d(t){t.animation.currentProgress<p.stopPoint&&(t.animation.easing?(t.animation.currentProgress+=.06*(p.stopPoint-t.animation.currentProgress),t.animation.currentProgress>=p.stopPoint-1&&(t.animation.currentProgress=p.stopPoint,t.finishedDrawing=!0)):(t.animation.currentProgress+=t.animation.step,t.animation.currentProgress>=p.stopPoint&&(t.animation.currentProgress=p.stopPoint,t.finishedDrawing=!0))),s(t,t.animation.currentProgress),t.finishedDrawing||window.requestAnimationFrame(d)}function m(t,i){return Math.sqrt(Math.pow(i.x-t.x,2)+Math.pow(i.y-t.y,2))}function T(t,i,e){var n=m(t,i),r=Math.min(e,n),o=function(t,i,e){var n=i.x-t.x,r=i.y-t.y,o=m(t,i),a=n/o,d=r/o;return{x:t.x+e*a,y:t.y+e*d}}(t,i,r);return{x:o.x,y:o.y,distance:r}}var o=function(t,i){return(-i/2+Math.sqrt(Math.pow(i,2)+.75*Math.pow(t,2)))/1.5},s=function(n,t){var i=1<arguments.length&&void 0!==t?t:p.stopPoint;if(n.ctx.clearRect(0,0,p.width,p.height),0!==i){if(n.ctx.beginPath(),p.roundedCorners){var e=p.fill||p.clip?0:p.lineWidth/2,r=function(t){var i=(p.height-v.sideWidth)/p.width;return(t-(v.sideWidth-p.height)/2)/i}(p.roundedCornerRadius)-p.width/2,o=function(t){return(p.height-v.sideWidth)/p.width*t+(v.sideWidth-p.height)/2}(p.width-r);if(p.clip||p.fill)n.ctx.moveTo(p.width/2-r,p.roundedCornerRadius+e),n.ctx.quadraticCurveTo(p.width/2,0+e,p.width/2+r,p.roundedCornerRadius+e),n.ctx.lineTo(p.width-e-r,o),n.ctx.quadraticCurveTo(p.width-e,(p.height-v.sideWidth)/2,p.width-e,(p.height-v.sideWidth)/2+r),n.ctx.lineTo(p.width-e,p.height-(p.height-v.sideWidth)/2-r),n.ctx.quadraticCurveTo(p.width-e,p.height-(p.height-v.sideWidth)/2,p.width-e-r,p.height-o),n.ctx.lineTo(p.width/2+r,p.height-e-p.roundedCornerRadius),n.ctx.quadraticCurveTo(p.width/2,p.height-e,p.width/2-r,p.height-e-p.roundedCornerRadius),n.ctx.lineTo(0+e+r,p.height-o),n.ctx.quadraticCurveTo(0+e,p.height-(p.height-v.sideWidth)/2,0+e,p.height-(p.height-v.sideWidth)/2-r),n.ctx.lineTo(0+e,(p.height-v.sideWidth)/2+r),n.ctx.quadraticCurveTo(0+e,(p.height-v.sideWidth)/2,0+e+r,o),n.ctx.lineTo(p.width/2-r,p.roundedCornerRadius+e);else for(;;){var a={x:p.width/2-r,y:p.roundedCornerRadius+e},d={x:p.width/2,y:0+e},h={x:p.width/2+r,y:p.roundedCornerRadius+e},s=m(a,d)+m(d,h),c={x:p.width/2,y:0+e},l={x:p.width/2+r,y:p.roundedCornerRadius+e},u=m(c,l),g=v.lineLength-u-s,f=void 0,x=void 0,w=void 0;if(f={x:p.width/2+r,y:p.roundedCornerRadius+e},x={x:p.width-e-r,y:o},w=T(f,x,g),n.ctx.moveTo(p.width/2+r,p.roundedCornerRadius+e),n.ctx.lineTo(w.x,w.y),(g-=w.distance)<=0)break;if(i<=1/6)break;if(n.ctx.quadraticCurveTo(p.width-e,(p.height-v.sideWidth)/2,p.width-e,(p.height-v.sideWidth)/2+r),(g-=s)<=0)break;if(f={x:p.width-e,y:(p.height-v.sideWidth)/2+r},x={x:p.width-e,y:p.height-(p.height-v.sideWidth)/2-r},w=T(f,x,g),n.ctx.lineTo(w.x,w.y),(g-=w.distance)<=0)break;if(i<=2/6)break;if(n.ctx.quadraticCurveTo(p.width-e,p.height-(p.height-v.sideWidth)/2,p.width-e-r,p.height-o),(g-=s)<=0)break;if(f={x:p.width-e-r,y:p.height-o},x={x:p.width/2+r,y:p.height-e-p.roundedCornerRadius},w=T(f,x,g),n.ctx.lineTo(w.x,w.y),(g-=w.distance)<=0)break;if(i<=.5)break;if(n.ctx.quadraticCurveTo(p.width/2,p.height-e,p.width/2-r,p.height-e-p.roundedCornerRadius),(g-=s)<=0)break;if(f={x:p.width/2-r,y:p.height-e-p.roundedCornerRadius},x={x:0+e+r,y:p.height-o},w=T(f,x,g),n.ctx.lineTo(w.x,w.y),(g-=w.distance)<=0)break;if(i<=4/6)break;if(n.ctx.quadraticCurveTo(0+e,p.height-(p.height-v.sideWidth)/2,0+e,p.height-(p.height-v.sideWidth)/2-r),(g-=s)<=0)break;if(f={x:0+e,y:p.height-(p.height-v.sideWidth)/2-r},x={x:0+e,y:(p.height-v.sideWidth)/2+r},w=T(f,x,g),n.ctx.lineTo(w.x,w.y),(g-=w.distance)<=0)break;if(i<=5/6)break;if(n.ctx.quadraticCurveTo(0+e,(p.height-v.sideWidth)/2,0+e+r,o),(g-=s)<=0)break;if(f={x:0+e+r,y:o},x={x:p.width/2-r,y:p.roundedCornerRadius+e},w=T(f,x,g),n.ctx.lineTo(w.x,w.y),(g-=w.distance)<=0)break;if(i<1)break;n.ctx.quadraticCurveTo(p.width/2,0+e,p.width/2+r,p.roundedCornerRadius+e);break}}else p.clip||p.fill?(n.ctx.moveTo(p.width/2,0),n.ctx.lineTo(p.width,(p.height-v.sideWidth)/2),n.ctx.lineTo(p.width,p.height-(p.height-v.sideWidth)/2),n.ctx.lineTo(p.width/2,p.height),n.ctx.lineTo(0,p.height-(p.height-v.sideWidth)/2),n.ctx.lineTo(0,(p.height-v.sideWidth)/2),n.ctx.lineTo(p.width/2,0)):(n.ctx.moveTo(p.width/2,0+p.lineWidth/2),n.ctx.lineTo(p.width-p.lineWidth/2,(p.height-v.sideWidth)/2),n.ctx.lineTo(p.width-p.lineWidth/2,p.height-(p.height-v.sideWidth)/2),n.ctx.lineTo(p.width/2,p.height-p.lineWidth/2),n.ctx.lineTo(0+p.lineWidth/2,p.height-(p.height-v.sideWidth)/2),n.ctx.lineTo(0+p.lineWidth/2,(p.height-v.sideWidth)/2),n.ctx.lineTo(p.width/2,0+p.lineWidth/2));if(p.clip){if(n.ctx.clip(),n.imageSrc){var y=new Image;y.src=n.imageSrc,y.addEventListener("load",function(){var t=Math.max(p.width,p.height),i=(Math.abs(p.width-p.height),p.width<p.height?(p.width-p.height)/2:0),e=p.height<p.width?(p.height-p.width)/2:0;n.ctx.drawImage(y,i,e,t,t)})}}else p.fill?n.ctx.fill():n.ctx.stroke()}else n.finishedDrawing=!0};this.render=function(t){t=(t=(t=t>p.scale.end?p.scale.end:t)<p.scale.start?p.scale.start:t)/p.scale.end*p.width,s(t)},function t(i,e){var n;for(var r in e)"object"!==_typeof(e[r])||e[r]instanceof Date?e[r]instanceof Date?i[r]=new Date(e[r].getTime()):i[r]=e[r]:(n=e[r]instanceof Array?[]:{},void 0===i[r]&&(i[r]=n),t(i[r],e[r]))}(p,t),i(),e(),n(),r(),function(){var t=!0,i=!1,e=void 0;try{for(var n,r=function(){var i=n.value;p.animateOnScroll?a(i)?window.requestAnimationFrame(function(){d(i)}):window.addEventListener("scroll",function t(){a(i)&&(window.requestAnimationFrame(function(){d(i)}),window.removeEventListener("scroll",t))}):p.controlAnimation||s(i)},o=h[Symbol.iterator]();!(t=(n=o.next()).done);t=!0)r()}catch(t){i=!0,e=t}finally{try{t||null==o.return||o.return()}finally{if(i)throw e}}}()}
/*---------------------------
    USER AVATAR HEXAGONS
---------------------------*/
app.plugins.createHexagon({
  container: '.hexagon-148-164',
  width: 148,
  height: 164,
  roundedCorners: true,
  fill: true
});
app.plugins.createHexagon({
  container: '.hexagon-progress-124-136',
  width: 124,
  height: 136,
  lineWidth: 8,
  roundedCorners: true,
  gradient: {
    colors: ['#41efff', '#615dfa']
  },
  scale: {
    start: 0,
    end: 1,
    stop: .74
  }
});
app.plugins.createHexagon({
  container: '.hexagon-border-124-136',
  width: 124,
  height: 136,
  lineWidth: 8,
  roundedCorners: true,
  lineColor: '#e7e8ee'
});
app.plugins.createHexagon({
  container: '.hexagon-image-100-110',
  width: 100,
  height: 110,
  roundedCorners: true,
  clip: true
});
app.plugins.createHexagon({
  container: '.hexagon-120-132',
  width: 120,
  height: 132,
  roundedCorners: true,
  fill: true
});
app.plugins.createHexagon({
  container: '.hexagon-progress-100-110',
  width: 100,
  height: 110,
  lineWidth: 6,
  roundedCorners: true,
  gradient: {
    colors: ['#41efff', '#615dfa']
  },
  scale: {
    start: 0,
    end: 1,
    stop: .8
  }
});
app.plugins.createHexagon({
  container: '.hexagon-border-100-110',
  width: 100,
  height: 110,
  lineWidth: 6,
  roundedCorners: true,
  lineColor: '#e7e8ee'
});
app.plugins.createHexagon({
  container: '.hexagon-image-82-90',
  width: 82,
  height: 90,
  roundedCorners: true,
  roundedCornerRadius: 3,
  clip: true
});
app.plugins.createHexagon({
  container: '.hexagon-100-110',
  width: 100,
  height: 110,
  roundedCorners: true,
  fill: true
});
app.plugins.createHexagon({
  container: '.hexagon-progress-84-92',
  width: 84,
  height: 92,
  lineWidth: 5,
  roundedCorners: true,
  roundedCornerRadius: 3,
  gradient: {
    colors: ['#41efff', '#615dfa']
  },
  scale: {
    start: 0,
    end: 1,
    stop: .8
  }
});
app.plugins.createHexagon({
  container: '.hexagon-border-84-92',
  width: 84,
  height: 92,
  lineWidth: 5,
  roundedCorners: true,
  roundedCornerRadius: 3,
  lineColor: '#e7e8ee'
});
app.plugins.createHexagon({
  container: '.hexagon-image-68-74',
  width: 68,
  height: 74,
  roundedCorners: true,
  roundedCornerRadius: 3,
  clip: true
});
app.plugins.createHexagon({
  container: '.hexagon-50-56',
  width: 50,
  height: 56,
  roundedCorners: true,
  roundedCornerRadius: 2,
  fill: true
});
app.plugins.createHexagon({
  container: '.hexagon-progress-40-44',
  width: 40,
  height: 44,
  lineWidth: 3,
  roundedCorners: true,
  roundedCornerRadius: 1,
  gradient: {
    colors: ['#41efff', '#615dfa']
  },
  scale: {
    start: 0,
    end: 1,
    stop: .8
  }
});
app.plugins.createHexagon({
  container: '.hexagon-border-40-44',
  width: 40,
  height: 44,
  lineWidth: 3,
  roundedCorners: true,
  roundedCornerRadius: 1,
  lineColor: '#e7e8ee'
});
app.plugins.createHexagon({
  container: '.hexagon-image-30-32',
  width: 30,
  height: 32,
  roundedCorners: true,
  roundedCornerRadius: 1,
  clip: true
});
app.plugins.createHexagon({
  container: '.hexagon-40-44',
  width: 40,
  height: 44,
  roundedCorners: true,
  roundedCornerRadius: 1,
  fill: true
});
app.plugins.createHexagon({
  container: '.hexagon-dark-32-34',
  width: 32,
  height: 34,
  roundedCorners: true,
  roundedCornerRadius: 1,
  lineColor: '#45437f',
  fill: true
});
app.plugins.createHexagon({
  container: '.hexagon-32-36',
  width: 32,
  height: 36,
  roundedCorners: true,
  roundedCornerRadius: 1,
  lineColor: '#fff',
  fill: true
});
app.plugins.createHexagon({
  container: '.hexagon-dark-26-28',
  width: 26,
  height: 28,
  roundedCorners: true,
  roundedCornerRadius: 1,
  lineColor: '#45437f',
  fill: true
});
app.plugins.createHexagon({
  container: '.hexagon-28-32',
  width: 28,
  height: 32,
  roundedCorners: true,
  roundedCornerRadius: 1,
  lineColor: '#fff',
  fill: true
});
app.plugins.createHexagon({
  container: '.hexagon-dark-22-24',
  width: 22,
  height: 24,
  roundedCorners: true,
  roundedCornerRadius: 1,
  lineColor: '#45437f',
  fill: true
});
app.plugins.createHexagon({
  container: '.hexagon-22-24',
  width: 22,
  height: 24,
  roundedCorners: true,
  roundedCornerRadius: 1,
  lineColor: '#fff',
  fill: true
});
app.plugins.createHexagon({
  container: '.hexagon-dark-16-18',
  width: 16,
  height: 18,
  roundedCorners: true,
  roundedCornerRadius: 1,
  lineColor: '#45437f',
  fill: true
});
app.plugins.createHexagon({
  container: '.hexagon-120-130',
  width: 120,
  height: 130,
  roundedCorners: true,
  fill: true
});
app.plugins.createHexagon({
  container: '.hexagon-100-108',
  width: 100,
  height: 108,
  roundedCorners: true,
  fill: true
});
app.plugins.createHexagon({
  container: '.hexagon-image-124-136',
  width: 124,
  height: 136,
  roundedCorners: true,
  clip: true
});
app.plugins.createHexagon({
  container: '.hexagon-image-84-92',
  width: 84,
  height: 92,
  roundedCorners: true,
  clip: true
});
app.plugins.createHexagon({
  container: '.hexagon-34-36',
  width: 34,
  height: 36,
  roundedCorners: true,
  roundedCornerRadius: 1,
  fill: true
});
app.plugins.createHexagon({
  container: '.hexagon-image-40-44',
  width: 40,
  height: 44,
  roundedCorners: true,
  roundedCornerRadius: 1,
  clip: true
});
app.plugins.createHexagon({
  container: '.hexagon-image-24-26',
  width: 24,
  height: 26,
  roundedCorners: true,
  roundedCornerRadius: 1,
  clip: true
});
app.plugins.createHexagon({
  container: '.hexagon-image-18-20',
  width: 18,
  height: 20,
  roundedCorners: true,
  roundedCornerRadius: 1,
  clip: true
});
app.plugins.createHexagon({
  container: '.hexagon-overlay-30-32',
  width: 30,
  height: 32,
  roundedCorners: true,
  roundedCornerRadius: 1,
  lineColor: 'rgba(97, 93, 250, .9)',
  fill: true
});
```

```
.user-avatar {
  display: block;
  width: 100px;
  height: 110px;
  position: relative;
  .user-avatar-border {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    .hexagon-content {
      background-color: #fff;
    }
  }
  .user-avatar-content {
    position: absolute;
    top: 18px;
    left: 16px;
    z-index: 3;
  }
  .user-avatar-progress {
    position: absolute;
    top: 9px;
    left: 8px;
    z-index: 2;
    z-index: 3;
  }
  .user-avatar-progress-border {
    position: absolute;
    top: 9px;
    left: 8px;
    z-index: 2;
    z-index: 2;
  }
  .user-avatar-badge {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 28px;
    height: 32px;
    position: absolute;
    top: 68px;
    right: 5px;
    z-index: 4;
    .user-avatar-badge-border {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 4;
      .hexagon-content {
        background-color: #fff;
      }
    }
    .user-avatar-badge-content {
      position: absolute;
      top: 4px;
      left: 3px;
      z-index: 5;
    }
    .user-avatar-badge-text {
      color: #fff;
      font-size: 0.75rem;
      font-weight: 700;
      pointer-events: none;
      position: relative;
      z-index: 6;
    }
  }
}
.user-avatar.online {
  &::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: -2px;
    z-index: 10;
    background-color: #1df377;
  }
}
.user-avatar.offline {
  &::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: -2px;
    z-index: 10;
    background-color: #f9515c;
  }
}
.user-avatar.away {
  &::before {
    content: '';
    width: 12px;
    height: 12px;
    border: 3px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: -2px;
    z-index: 10;
    background-color: #adafca;
  }
}
.user-avatar.big {
  width: 148px;
  height: 164px;
  .user-avatar-content {
    top: 27px;
    left: 24px;
  }
  .user-avatar-progress {
    top: 14px;
    left: 12px;
  }
  .user-avatar-progress-border {
    top: 14px;
    left: 12px;
  }
  .user-avatar-badge {
    width: 40px;
    height: 44px;
    top: 102px;
    right: 8px;
    .user-avatar-badge-content {
      top: 5px;
      left: 4px;
    }
    .user-avatar-badge-text {
      font-size: 1rem;
    }
  }
}
.user-avatar.medium {
  width: 120px;
  height: 132px;
  .user-avatar-content {
    top: 21px;
    left: 19px;
  }
  .user-avatar-progress {
    top: 11px;
    left: 10px;
  }
  .user-avatar-progress-border {
    top: 11px;
    left: 10px;
  }
  .user-avatar-badge {
    width: 32px;
    height: 36px;
    top: 82px;
    right: 7px;
    .user-avatar-badge-content {
      top: 4px;
      left: 3px;
    }
    .user-avatar-badge-text {
      font-size: 0.875rem;
    }
  }
}
.user-avatar.small {
  width: 50px;
  height: 56px;
  .user-avatar-content {
    top: 12px;
    left: 10px;
  }
  .user-avatar-progress {
    top: 6px;
    left: 5px;
  }
  .user-avatar-progress-border {
    top: 6px;
    left: 5px;
  }
  .user-avatar-badge {
    width: 22px;
    height: 24px;
    top: 27px;
    right: 2px;
    .user-avatar-badge-content {
      top: 3px;
      left: 3px;
    }
    .user-avatar-badge-text {
      font-size: 0.625rem;
    }
  }
}
.user-avatar.smaller {
  .user-avatar-overlay {
    width: 30px;
    height: 32px;
  }
  .user-avatar-overlay-content {
    .user-avatar-overlay-content-text {
      font-size: 0.6875rem;
    }
  }
}
.user-avatar.no-stats {
  width: 100px;
  height: 108px;
  .user-avatar-content {
    top: 8px;
    left: 8px;
  }
}
.user-avatar.no-stats.big {
  width: 148px;
  height: 164px;
  .user-avatar-content {
    top: 14px;
    left: 12px;
  }
}
.user-avatar.no-stats.medium {
  width: 120px;
  height: 130px;
  .user-avatar-content {
    top: 10px;
    left: 10px;
  }
}
.user-avatar.no-stats.small {
  width: 50px;
  height: 56px;
  .user-avatar-content {
    top: 6px;
    left: 5px;
  }
}
.user-avatar.no-stats.smaller {
  width: 34px;
  height: 36px;
  .user-avatar-content {
    top: 2px;
    left: 2px;
  }
}
.user-avatar.no-stats.micro {
  width: 22px;
  height: 24px;
  .user-avatar-content {
    top: 2px;
    left: 2px;
  }
}
.user-avatar.no-border {
  width: 84px;
  height: 92px;
  .user-avatar-content {
    top: 0;
    left: 0;
  }
}
.user-avatar.no-border.big {
  width: 124px;
  height: 136px;
}
.user-avatar.no-border.medium {
  width: 100px;
  height: 110px;
}
.user-avatar.no-border.small {
  width: 40px;
  height: 44px;
}
.user-avatar.no-border.tiny {
  width: 24px;
  height: 26px;
}
.user-avatar.no-border.micro {
  width: 18px;
  height: 20px;
}
.user-avatar.no-outline {
  width: 84px;
  height: 92px;
  .user-avatar-progress {
    top: 0;
    left: 0;
  }
  .user-avatar-progress-border {
    top: 0;
    left: 0;
  }
  .user-avatar-content {
    top: 9px;
    left: 8px;
  }
  .user-avatar-badge {
    top: 60px;
    right: -3px;
  }
}
.user-avatar.no-outline.small {
  width: 40px;
  height: 44px;
  .user-avatar-content {
    top: 6px;
    left: 5px;
  }
  .user-avatar-badge {
    top: 21px;
    right: -3px;
  }
}
```
