JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<div class="variable-size">
  <textarea class="content" rows="1" placeholder="TYPE TEXT OR RESIZE ME &#8600;"></textarea>
  <div class="circle"></div>
</div>

<div class="w">

</div>

CSS

/* variable size container to be circumscribed by circle */
/* none of these styles are required, this just to center the variable size container on page for demo purposes */
.variable-size {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* resizable text area for demo */
.variable-size .content {
  padding: 15px;
  background: #fff;
  resize: both;
  overflow: auto;
  color: #000;
  border: none;
  width: 200px;
  font-weight: bold;
}

.variable-size .content:focus {
  outline: 0;
}

/* circle div css */
.variable-size .circle {
  position: absolute;
  background-image: url('https://i.imgur.com/2dxaFs9_d.webp?maxwidth=640&shape=thumb&fidelity=medium');
  background-position: center center;
  z-index: -1;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
  width: 0;
}

/* fast way to make circle height the same as current width */
.variable-size .circle:before {
  display: block;
  content: '';
  width: 100%;
  padding-top: 100%;
}

/* demo window css */
HTML,
BODY {
  height: 100%;
  min-height: 100%;
  background: black;
  position: relative;
  overflow: hidden;
  font-family: "Lucida Console", Courier, monospace;
}

JavaScript

// circle sizer for variable size divs
function circle_sizer() {

  // for each variable size div on page
  $(".variable-size").each(function() {

    // get the variable size div content width and height
    let width = $(this).outerWidth();
    let height = $(this).outerHeight();

    // get the diameter for our pefect circle based on content size
    let diameter = Math.sqrt(width ** 2 + height ** 2);

    // 15 pixel circle edge around variable size div
    let edge = 15;
    
    // add current circle size width css
    $('.circle', this).css({
      'width': (diameter + (edge * 2)) + 'px'
    })

  });

}

// run the size on page load
circle_sizer();

// if the window is resized responsively
$(window).resize(function() {
  circle_sizer();
});

// for demo purpose to fire circlesizer when resizing content textarea, not needed for real thing
$('.content').on('input', function() {
  this.style.height = "";
  this.style.height = ( this.scrollHeight - 30 ) + "px";
  circle_sizer();
}).on('mouseup', function() {
  circle_sizer();
});