* {
  box-sizing: border-box;
}
body {
  align-items: center;
  background: #d8d8d8;
  display: flex;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.image-container {
  background-color: #fafafa;
  height: 300px;
  width: 300px;
  background-size: cover;
  background-position: center;
}
.rsizable {
  position: relative;
  height: calc(var(--height, 300) * 1px);
  width: calc(var(--width, 300) * 1px);
}
.rsizable__ghost {
  border: 5px dashed #fff;
  height: calc(var(--height) * 1px);
  width: calc(var(--width) * 1px);
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
}
.rsizable__handle {
  border-radius: 100%;
  height: 50px;
  width: 50px;
  display: inline-block;
  cursor: var(--cursor, e);
  position: absolute;
  -webkit-transform: translate(var(--x, 0), var(--y, 0));
          transform: translate(var(--x, 0), var(--y, 0));
}
.rsizable__handle:after {
  border-radius: 100%;
  content: '';
  background-color: #00A8E3;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.rsizable__handle--n,
.rsizable__handle--s {
  left: 50%;
  margin-left: -25px;
}
.rsizable__handle--n {
  top: 0;
}
.rsizable__handle--s {
  bottom: 0;
}
.rsizable__handle--e,
.rsizable__handle--w {
  top: 50%;
  margin-top: -25px;
}
.rsizable__handle--e {
  right: 0;
}
.rsizable__handle--w {
  left: 0;
}
.rsizable__handle--ne {
  top: 0;
  right: 0;
}
.rsizable__handle--se {
  bottom: 0;
  right: 0;
}
.rsizable__handle--nw {
  top: 0;
  left: 0;
}
.rsizable__handle--sw {
  bottom: 0;
  left: 0;
}
.rsizable__handle--nw,
.rsizable__handle--n,
.rsizable__handle--ne {
  --y: -50%;
}
.rsizable__handle--nw,
.rsizable__handle--w,
.rsizable__handle--sw {
  --x: -50%;
}
.rsizable__handle--ne,
.rsizable__handle--e,
.rsizable__handle--se {
  --x: 50%;
}
.rsizable__handle--sw,
.rsizable__handle--s,
.rsizable__handle--se {
  --y: 50%;
}