Gambar ala lukisan Picasso (CSS)

'Cartoon of Picasso in cubist mode'

Demo

HTML view ▼

<div class="labu">
<div class="labi"></div>
</div>
<style>
  .labu {
    width: 100%;
    aspect-ratio: 1;
    position: relative;
  }
  .labi {
  --c1: #026684;
    --c2: #a6e2e9;
  font-size: 1vmin;
  width: 100%;
  aspect-ratio: 1;
  position: absolute;
  bottom: 0;
  left: 55%;
  transform: translate(-50%, 0);
  background:
    radial-gradient(circle at 70% 60%, #50d6ff 5%, #0000 0),
    radial-gradient(farthest-side at 160% 50%,#0000 80%, var(--c1) 0 99%, #0000) 25% 75% / 10% 23%,
    radial-gradient(farthest-side at 50% -50%,#0000 80%, var(--c1) 0 99%, #0000)60% 68% / 26% 10%,
    radial-gradient(circle at 30% 81%, #50d6ff 4%, #0000 0),
    #f000;
  background-repeat: no-repeat;  
  &::before {   
    content:"";
    width: 40%;
    height: 50%; 
    bottom: 0;
    left: 40%;
    transform: translate(-50%, 0);
    position: absolute;
    clip-path: polygon(33% 0, 60% 0, 100% 100%, 20% 100%);
    background: 
      conic-gradient(at 58% 14%, var(--c1) 80deg, #0000 0 280deg, var(--c1) 0),
      conic-gradient(at 51% 23%, var(--c2) 80deg, #0000 0 280deg, var(--c2) 0),
      conic-gradient(at 55% 30%, var(--c1) 80deg, #0000 0 280deg, var(--c1) 0),
      conic-gradient(at 50% 38%, var(--c2) 80deg, #0000 0 280deg, var(--c2) 0),
      conic-gradient(at 58% 46%, var(--c1) 80deg, #0000 0 280deg, var(--c1) 0),
      conic-gradient(at 45% 54%, var(--c2) 80deg, #0000 0 280deg, var(--c2) 0),
      conic-gradient(at 55% 62%, var(--c1) 80deg, #0000 0 280deg, var(--c1) 0),
      conic-gradient(at 50% 70%, var(--c2) 80deg, #0000 0 280deg, var(--c2) 0),
      conic-gradient(at 40% 160%, var(--c1) 10deg, #0000 0 354deg, var(--c1) 0) 40% 90% / 40% 50%,
      conic-gradient(at 40% 160%, var(--c1) 13deg, #0000 0 359deg, var(--c1) 0) 77% 90% / 40% 50%,
      conic-gradient(#0000 120deg, #000 0 185deg, #0000 0)31% 100% / 34% 17%,
      conic-gradient(#0000 120deg, #000 0 185deg, #0000 0)69% 100% / 34% 17%,
      #f000;
    background-repeat: no-repeat;
  }  
  &::after {
    content: "";
    rotate:-3deg;
    width: 60%;
    height: 60%;
    border-radius: 100% 100% 100% 140%/ 80% 50% 0 100%;
    position: absolute;
    left: 40%;
    top:-3%;
    transform: translate(-50%, 0);
    clip-path: polygon(0 0, 80% 0, 100% 63%, 80% 65%, 82% 75%, 81% 78%, 79% 81%, 82% 98%, 84% 100%, 0 100%);
    -webkit-mask: 
      radial-gradient(15% 20% at 15% 58%, #000 99%, #0000),
      radial-gradient(33% 30% at 35% 38%, #000 99%, #0000),
      radial-gradient(50% 60% at 55% 45%, #000 99%, #0000)
      ;
    background: 
      radial-gradient(5% 0.5% at 55% 22%, #026684 99%, #0000),
      radial-gradient(farthest-side at 55% 0%, #026684 99%, #0000) 55% 25% / 20% 2%,
      linear-gradient(to top right, #0000 49%, #000 0 53%, #0000 0) 24% 83% / 20% 22%,
      linear-gradient(80deg, #0000 46%, #000 0 58%, #0000 0) 80% 72% / 4% 10%,
      linear-gradient(#000 0 0) 100% 77.6% / 30% 1%,
      radial-gradient(circle at 36% 58%, #fff 3%, #0000 0),
      radial-gradient(circle at 40% 54.5%, #000 11%, #0000 0),
      radial-gradient(farthest-side at 50% 120%,  #fff 99%, #0000) 40% 50% / 35% 10%,
      radial-gradient(farthest-side at 50% -120%,  #fff 99%, #0000) 38.7% 61% / 41.6% 11%,
      radial-gradient(farthest-side at 50% 120%,  #000 99%, #0000) 40% 49% / 37% 12%,
      radial-gradient(farthest-side at 50% -120%,  #000 99%, #0000) 39% 62% / 44% 12.5%,
      radial-gradient(55% 140% at 50% 140%, #0000 90%, #000 0 95%,#0000 0) 40% 43% / 40% 10%,
      radial-gradient(70% 140% at 55% 140%, #0000 80%, #ddd 0 99%,#0000 0) 40% 34% / 33% 10%,
      radial-gradient(circle at 70% 45%, #fff 2%, #0000 0),
      radial-gradient(circle at 74% 41.5%, #000 8%, #0000 0),
      radial-gradient(farthest-side at 0% 120%,  #fff 99%, #0000) 92% 38% / 21% 8%,
      radial-gradient(farthest-side at 0% -120%,  #fff 99%, #0000) 96.5% 45.6% / 23% 6.5%,
      radial-gradient(farthest-side at 10% 120%,  #000 99%, #0000) 92% 36.5% / 22% 9%,
      radial-gradient(farthest-side at 20% -120%,  #000 99%, #0000) 96% 46% / 23% 7.5%,
      conic-gradient(at -0% 150%, #0000 20deg, #000 0 22deg, #0000 0 30deg, #000 0 32deg, #0000 0 40deg, #000 0 42deg, #0000 0) 85% 35% / 20% 15%,
      radial-gradient(70% 140% at 45% 140%, #0000 80%, #ddd 0 99%,#0000 0) 102% 22% / 33% 10%,
      radial-gradient(circle at 84% 62%, #000 1.6%, #0000 0),
       radial-gradient(circle at 94% 63%, #000 1.6%, #0000 0),
      conic-gradient(at 73% 60%, #0000 95deg, #0095b7 0 130deg, #0000 0),
      conic-gradient(at 67% 77%, #0000 75deg, #a6f2f9 0 90deg, #0095b7 0 112deg, #0000 0),
      linear-gradient(to bottom right, #0000 50%, #cff 0) 81% 100% / 5% 20%,
      linear-gradient(to bottom right, #0000 50%, #a6f2f9 0) 79% 100% / 14% 35%,
      linear-gradient(30deg, #0000 85%, #ddd 0),
      conic-gradient(from 30deg at 75% 40%, #a6f2f9 28%, #0000 0),
      radial-gradient(10% 18% at 10% 59.35%, #026684 99%, #0000),
      radial-gradient(12% 18% at 10% 35.35%, #ccc 99%, #0000),
      conic-gradient(at 20% 55%, #026684 10deg, #0000 0 148deg, #026684 0),
      radial-gradient(45% 100% at 0 35%, #0095b8 99%, #0000),
      radial-gradient(25% 20% at 40% 100%, #0095b8 99%, #0000),
      #50d6ff;
    background-repeat: no-repeat;
  }
}
</style>

Tutup

Rujukan CSS di codepen.io/alvaromontoro/pen/jOXeWNv