calculate cropping boxes for the image

static/profile_page.css

@@ -156,6 +156,7 @@
 
 #image_container {
     position: absolute;
+    display: inline-block;
 }
 
 #darken_part {
@@ -252,3 +253,42 @@
     width: 360px;
     height: 360px;
 }
+
+#circle-display {
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(
+        circle closest-side,
+        transparent 99%,
+        rgba(0, 0, 0, 0.5) 100%
+    );
+    display: none;
+}
+
+#image_dark_overlay {
+    background-color: rgba(0, 0, 0, 0.5);
+    pointer-events: none;
+
+    z-index: 2;
+
+    transform: translateX(calc(-50% + var(--x-offset) + 5px))
+        translateY(calc(-50% + var(--y-offset) + 5px));
+    position: absolute;
+    left: calc(350px / 2);
+    top: calc(350px / 2);
+    width: var(--x-size);
+    height: var(--y-size);
+
+    clip-path: polygon(
+        0% 0%,
+        0% 100%,
+        var(--left-edge) 100%,
+        var(--left-edge) var(--top-edge),
+        var(--right-edge) var(--top-edge),
+        var(--right-edge) var(--bottom-edge),
+        var(--left-edge) var(--bottom-edge),
+        var(--left-edge) 100%,
+        100% 100%,
+        100% 0%
+    );
+}