<div class="orange">
  <div class="orange__segment"></div>
  <div class="orange__segment"></div>
  <div class="orange__segment"></div>
  <div class="orange__segment"></div>
  <div class="orange__segment"></div>
  <div class="orange__segment"></div>
  <div class="orange__segment"></div>
  <div class="orange__segment"></div>
  <div class="orange__segment"></div>
  <div class="orange__segment"></div>
</div>

<div class="orange-down">
  <div class="orange-down__stem"></div>
  <div class="orange-down__leaf"></div>
</div>

.orange {
  position: relative;
  width: 256px;
  height: 256px;
  background-color: #f39132;
  background-image: radial-gradient(circle, rgba(255,196,139,1) 2%, rgba(250,217,186,1) 6%, rgba(255,247,232,1) 15%, rgba(251, 222, 194, 1) 64%, rgba(243, 145, 50,1) 68%);
  border-radius: 50%;
  flex-shrink: 0;
}

.orange .orange__segment {
  --voronoi-seed: 3221;
  --voronoi-number-of-cells: 30;
  --voronoi-line-color: transparent;
  --voronoi-cell-colors: #f49b45, #f4a14e, #f5a658, #f5ab62;
  
  position: absolute;
  inset: 15px calc(50% - 29px) auto auto;
  width: 58px;
  height: 112px;
  background-color: color-mix(in srgb, orange, white 35%);
  background-image: paint(voronoi); /** the fun bit **/
  transform-origin: bottom center;
  clip-path: path('M 3.4175 4.2175 C 3.4175 4.2175 9.8525 1 16.2875 1 C 25.2 0 34.2 0 42.0275 1 C 48.4625 1 54.8975 4.2175 54.8975 4.2175 C 59.2 7 58.115 10.6525 58.115 10.6525 C 55.775 30.25 38.81 84.655 32.375 94.3075 C 32.375 94.3075 29.1575 91.09 25.94 94.3075 C 19.505 84.655 2.15 30.25 0.2 10.6525 C 0.2 10.6525 -0.8 7 3.4175 4.2175');
  box-shadow: inset 0px 0px 12px 6px rgba(255,228,179,0.6);
  
  &:nth-of-type(2) {
    --voronoi-seed: 4151;
    transform: rotate(36deg);
  }
  
  &:nth-of-type(3) {
    --voronoi-seed: 2966;
    transform: rotate(72deg);
  }
  
  &:nth-of-type(4) {
    --voronoi-seed: 4192;
    transform: rotate(108deg);
  }
  
  &:nth-of-type(5) {
    --voronoi-seed: 8441;
    transform: rotate(144deg);
  }
  
  &:nth-of-type(6) {
    --voronoi-seed: 14463;
    transform: rotate(180deg);
  }
  
  &:nth-of-type(7) {
    --voronoi-seed: 7010;
    transform: rotate(216deg);
  }
  
  &:nth-of-type(8) {
    --voronoi-seed: 3380;
    transform: rotate(252deg);
  }
  
  &:nth-of-type(9) {
    --voronoi-seed: 4434;
    transform: rotate(288deg);
  }
  
  &:nth-of-type(10) {
    --voronoi-seed: 7666;
    transform: rotate(324deg);
  }
}

.orange-down {
  --voronoi-seed: 678459;
  --voronoi-number-of-cells: 600;
  --voronoi-line-color: transparent;
  --voronoi-cell-colors: #f28c28, #f39132, #f3963b;
  
  position: relative;
  background-color: rgb(242, 140, 40);
  background-image: paint(voronoi); /** another use of the fun bit **/
  width: 256px;
  height: 128px;
  border-radius: 128px 128px 0 0;
  transform: translateX(-35px);
  flex-shrink: 0;
}

.orange-down::after {
  content: '';
  position: absolute;
  inset: 26px 38px auto auto;
  background-image:  radial-gradient(circle, rgba(255,255,230,0.5) 0%, rgba(255,255,230,0) 60%);
  width: 86px;
  height: 86px;
}

.orange-down .orange-down__stem {
  position: absolute;
  inset: -108px 90px auto auto;
  background-image: linear-gradient(160deg, rgba(93,147,91,1) 0%, rgba(37,85,37,1) 100%);
  clip-path: path('M 12 3 C 18 -3 18 3 18 3 C 9 39 6 75 6 115 C 6 115 3 115 0 117 C 0 78 3 39 12 3');
  width: 20px;
  height: 200px;
  transform: rotate(30deg);
}

.orange-down .orange-down__leaf {
  position: absolute;
  inset: -90px 30px auto auto;
  background-image: linear-gradient(90deg, rgba(56,107,56,1) 0%, rgba(86,139,84,1) 42%, rgba(65,120,64,1) 50%, rgba(86,139,84,1) 58%, rgba(56,107,56,1) 100%);
  clip-path: path('M 18 120 C 42 88 42 32 18 0 C -6 32 -6 88 18 120');
  width: 36px;
  height: 120px;
  transform: rotate(75deg);
}

body {
  display: flex;
  align-items: flex-end;
}

if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('https://unpkg.com/css-houdini-voronoi/dist/worklet.js');
}