Gambarkan Kelinci Paskah

14

Individu yang bahagia ini dikenal dalam cerita rakyat sebagai Kelinci Paskah.

kelinci Paskah

Warna

Itu dibuat menggunakan 4 warna:

  • Merah muda muda
  • Merah muda gelap
  • putih
  • Hitam

(Saya senang warna-warna ini dapat didekati dalam jawaban Anda. Tidak perlu warna yang tepat ini)

Bentuk

Itu dibangun dari bentuk-bentuk ini:

  • Dua elips tinggi berwarna merah muda terang (telinga luar). Mereka memiliki tinggi dan lebar yang sama.
  • Dua elips tinggi berwarna merah muda gelap (telinga bagian dalam). Mereka lebih kecil dari telinga luar dan satu digambar di atas masing-masing telinga luar. Tinggi dan lebarnya sama.
  • Satu lingkaran besar berwarna merah muda terang (kepala). Itu bersinggungan dengan sepertiga bawah dari kedua telinga luar (tetapi tidak lebih tinggi).
  • Dua lingkaran berwarna putih (mata luar). Mereka ditarik di kepala. Diameternya kurang dari lebar telinga luar. Mereka memiliki posisi horizontal yang sama dengan telinga luar.
  • Dua lingkaran hitam (mata bagian dalam). Mereka memiliki diameter lebih kecil dari mata luar. Satu ditarik pada masing-masing mata luar.
  • Satu garis vertikal hitam (mulut atas). Itu ditarik di kepala dan lebih rendah dari bagian bawah mata luar. Ini kira-kira sama dari masing-masing mata.
  • Dua busur berwarna hitam (mulut bawah). Mereka ditarik di kepala dan melengkung ke bawah dari garis horizontal. Keduanya bersinggungan dengan bagian bawah mulut atas, tetapi yang satu ke kanan dan yang lainnya ke kiri.

Aturan

  • Gunakan bahasa dan alat apa pun yang Anda suka.
  • Output dapat berupa gambar, html, svg, atau markup lainnya.
  • Ini kode golf, jadi bertujuan untuk melakukannya dalam jumlah byte terkecil.
  • Harap sertakan tangkapan layar hasilnya.
  • Jangan ragu untuk memperkirakan warna yang ditentukan.

Selamat Hari Paskah!

AJFaraday
sumber
Gambar ukuran apa yang Anda inginkan?
Neil
@Neil ukuran tidak masalah, Neil. Asalkan memenuhi persyaratan untuk bentuk dan warna.
AJFaraday
Saya punya jawaban desmos dalam karya. Apakah tidak ada mata putih di mata yang bisa diterima?
Benjamin Urquhart
@BenjaminUrquhart tidak juga. Itu sangat menyederhanakan proses. Anda bisa menjadikannya abu-abu, jika itu membantu.
AJFaraday
1
@BenjaminUrquhart bekerja untuk saya
AJFaraday

Jawaban:

18

T-SQL, 445 439 byte

DECLARE @ GEOMETRY='MULTIPOINT((3 3),(7 3))',
@l GEOMETRY='CIRCULARSTRING(3 6,3.3 9,3 12,2.7 9,3 6)',@r GEOMETRY
SET @[email protected](.6)SET @[email protected]('CIRCULARSTRING(7 6,7.3 9,7 12,6.7 9,7 6)')
SELECT*FROM(VALUES(@),(@),(@),(@r.STBuffer(.3)),(@),(@),(@),(@),(@),(@),(@),(@),(@),
(@),(@),('CIRCULARSTRING(7 0,6 -1,5 0,5 1,5 1,5 0,5 0,4 -1,3 0)'),
(GEOMETRY::Point(5,1,0).STBuffer(5).STUnion(@r.STBuffer(1.3)).STDifference(@.STBuffer(.4)))
)a(g)

Situs ini dapat menggunakan lebih banyak gambar berbasis T-SQL!

Jalankan pada SQL 2017, tetapi gunakan fitur penyimpanan geo-spasial SQL yang ditambahkan kembali dalam SQL 2008 . Jeda baris hanya untuk keterbacaan.

Keluaran:

masukkan deskripsi gambar di sini

Jadi, ini sulit dilakukan di T-SQL, karena objek spasial tidak dirancang untuk menggambar (tidak ada objek "elips", misalnya). Terlebih lagi, mendapatkan warna yang mendekati kanan membutuhkan sedikit trial and error.

Pada dasarnya saya membangun objek geometris berikut:

  1. Mata ( @), yang merupakan titik yang diperluas ke disk menggunakan STBuffer(.6)(himpunan semua titik dalam 0,6 dari titik awal tersebut)
  2. Telinga ( @r), yang dihasilkan sebagai kurva runcing, tetapi "dibusungkan" menggunakan STBufferke telinga bagian dalam atau luar
  3. Wajah, yang merupakan cakram plus telinga minus mata. Saya harus membangun ini dan menampilkannya sebagai objek tunggal, atau SQL akan menampilkannya dalam berbagai warna.
  4. Mulut, yang merupakan kurva dibuat menggunakan CIRCULARSTRING

Untuk mendapatkan warna yang benar, saya harus melakukan SELECTini dengan urutan yang benar . SSMS memiliki urutan warna untuk objek yang ditampilkan di panel hasil spasial , jadi telinga bagian dalam berwarna merah muda gelap harus berada di urutan ke- 4 , dan wajah merah muda harus berada di urutan ke- 16 . Ini membutuhkan penempatan sejumlah besar salinan mata, yang tidak apa-apa karena kami menginginkannya sedekat mungkin dengan hitam (warna agak transparan, sehingga menumpuknya membuat mereka lebih gelap).

Bantuan dan inspirasi dari sumber-sumber berikut:

EDIT : Memindahkan kelinci menjadi 4 unit, yang mengubah beberapa koordinat menjadi satu digit, menghemat 6 byte. Tidak ada perubahan dalam output yang ditampilkan.

BradC
sumber
1
Membangun kelinci dengan benda-benda geometri, brilian! xD
Kevin Cruijssen
9

Merah , 375 340 329 byte

Red[needs 'View]f: 'fill-pen p: 'pen e: 'ellipse c: 'circle
t:[5x5 0 180]view[base 200x200 #FFF draw
compose[(p)pink(f)pink(c)100x100 30(e)75x25
20x60(e)105x25 20x60(p)#E28(f)#E28(e)79x35 12x35(e)109x35
12x35(p)#FFF(f)#FFF(c)88x92 8(c)112x92 8(p)#000(f)#000(c)88x92
5(c)112x92 5 line 100x108 100x115 arc 95x115(t)arc 105x115(t)]]

masukkan deskripsi gambar di sini

Galen Ivanov
sumber
7

Desmos, 262 karakter / byte

Maksud saya, ini lebih pendek dari Java: ^)

+2 byte untuk mengisi telinga

// Face
x^2+y^2<=4 

// Ears (outer)
(x+1)^2+((y-3)^2)/4<=.5
(x-1)^2+((y-3)^2)/4<=.5

// Ears (inner)
(x+1)^2+((y-3)^2)/4<=.25
(x-1)^2+((y-3)^2)/4<=.25

// Pupils
(x+.7)^2+(y-.7)^2<=.1
(x-.7)^2+(y-.7)^2<=.1

// "Whites"
(x-.7)^2+(y-.7)^2<=.3
(x+.7)^2+(y-.7)^2<=.3

// Mouth
y+1=-{y<1:sqrt(.1-(x+.316)^2)}
y+1=-{y<1:sqrt(.1-(x-.316)^2)}
x={-1<y<-.5:0}

Tautan Dengan garis grafik dinonaktifkan (Saya baru tahu Anda bisa melakukan ini):

Bunneh

Bunneh

Benjamin Urquhart
sumber
Saya suka jawaban ini! Meskipun, jika saya mungkin bertingkah aneh. Telinga bagian luar harus berwarna sama dengan wajah. Batin harus lebih gelap. Juga, apakah komentar termasuk dalam jumlah char Anda? Anda bisa bercukur sedikit di sana.
AJFaraday
1
Komentar tidak termasuk @AJFaraday. Desmos tidak memiliki cara untuk membuat hal-hal "lebih gelap" atau "lebih ringan" selain menumpuk lebih banyak persamaan di lokasi yang sama (telinga luar berwarna sama dengan wajah btw).
Benjamin Urquhart
Benarkah tidak ada byte yang digunakan saat memilih warna? Terasa agak tidak adil ...?
Stewie Griffin
@StewieGriffin Saya tidak yakin bagaimana cara menghitung warna. Mungkin saya akan membuka / menemukan posting meta di atasnya.
Benjamin Urquhart
Meta post
Benjamin Urquhart
6

Ruby with Shoes , 240 karakter

Shoes.app{['fcc',[0,40,60],[5,0,20,50],[35,0,20,50],'f99',[t=10,t,t,h=30],[40,t,t,h],'fff',[t,55,15],[35,55,15],'000',[14,58,7],[38,58,7]].map{|v|stroke fill v rescue oval *v}
nofill
line h,75,h,80
arc 25,80,t,t,0,3.14
arc 35,80,t,t,0,3.14}

Output sampel:

Screenshot sepatu Shoes dengan kelinci paskah

manatwork
sumber
6

Python, 368 byte

Menggunakan matplotlib.

from matplotlib import pyplot as l,patches as p,transforms as t;z=0,;[l.gca().add_patch(p.Wedge(z*2,R,s,360,width=w,color=(r,o,o),transform=t.Affine2D.from_values(X,0,0,9,350+x*n,y*9)))for R,s,w,r,o,X,x,y in zip([11,7,15,4,2,2,99],z*5+(180,359),[None]*5+[.2,.4],(1,)*4+z*3,(.8,.6,.8,1)+z*3,[4,4]+[9]*5,[7,7,0,6,6,2,98.8],[51,51,30,35,35,24,26])for n in[-9,9]];l.show()

Hasil: masukkan deskripsi gambar di sini

Tidak Disatukan:

from matplotlib import pyplot, patches, transforms
z = 0, # store zero as a tuple for later repetition
for radius, startAngle, width, red, other, xStretch, x, y in \
    zip([11 ,7  ,15 ,4  ,2  ,2  ,99   ],  # radius
        z * 5 +             (180,359  ),  # start angle
        [None] * 5 +        [.2 ,.4   ],  # wedge width (None = full)
        (1,) * 4        +z * 3         ,  # red channel
        (.8 ,.6 ,.8 ,1) +z * 3         ,  # other color channels
        [4]*2 + [9]*5                  ,  # x stretch factor
        [ 7 ,7  ,0  ,6  ,6  ,2  ,98.8 ],  # x
        [51 ,51 ,30 ,35 ,35 ,24 ,26   ]): # y
#        |   |   |   |   |   |   |
#        |   |   |   |   |   |   "straight" line for upper mouth
#        |   |   |   |   |   |   approximated by large radius arc
#        |   |   |   |   |   |
#        |   |   |   |   |   Arc for lower mouth
#        |   |   |   |   |
#        |   |   |   |   Inner eye circle
#        |   |   |   |
#        |   |   |   Outer eye circle
#        |   |   |
#        |   |   Circle for head
#        |   |
#        |   Inner ear ellipse
#        |
#        Outer ear ellipse

    for n in [-9, 9]:        # draw left and right side mirrored
        pyplot.gca().add_patch( patches.Wedge(
            z*2,       # center = (0, 0), actual location set by the transform below
            radius,
            startAngle,
            360,       # end angle
            width = width,
            color = (red, other, other), # only red channel varies from the others
            transform = transforms.Affine2D.from_values( # affine transform matrix
                xStretch,    # x stretch factor
                0, 0,        # unused cross-axis coefficients for skew/rotation
                9,           # y stretch factor
                x * n + 350, # x value reflected by n, centered at 350
                y * 9 )))    # y value

pyplot.show()
EGraw
sumber
5

Javascript, 381 326 byte

Terima kasih Arnold dan Epicness.

(d=document).body.appendChild(a=d.createElement`canvas`);b=a.getContext`2d`;'A707|A7,/|Z707|Z7,/|MZAA|CR--|UR--|CR**|UR**|Id**|Nd**|La(+'.split`|`.map(x=>x.split``.map(c=>c.charCodeAt()-40)).map((x,i)=>b[b.beginPath(b.fillStyle='#'+'fccf77fff000'.substr('030306699'[i],3)),b.ellipse(...x,0,0,3*-~(i<9)),i>8?'stroke':'fill']())

Johan du Toit
sumber
1
389 byte
Arnauld
1
Baru-baru ini mengirimkan hasil edit untuk -6.
Epicness
Jika Anda ingin mengubah jawaban HTML+JavaScriptAnda, Anda dapat membuat bagian HTML <canvas id=A>dan bagian pertama JS b=A.getContext...- Saya menggunakan ini di Bendera Islandia saya beberapa waktu lalu. Posting ini baru saja menyelamatkan jawaban itu 2 byte :) codegolf.stackexchange.com/a/176852/8340
dana
Sebagai bonus Anda dapat menyematkan "stack snippet" :) stackoverflow.blog/2014/09/16/…
dana
1
Anda dapat menyimpan 3 byte lebih banyak dengan (D=document).body.appendChild(a=D.createElement`canvas`).
Arnauld
4

JavaScript + P5.js , 291 276 273 byte

Banyak perubahan kecil kali ini .. yang tidak mengubah ukuran byte sama sekali.

setup=_=>{createCanvas(u=400,u);(e=ellipse,f=fill)`#fcc`;e(u/=2,u,x=150,x);e(x+=10,z=99,50,z);e(w=240,z,50,z);f`#f77`;e(x,z,y=30,80);e(w,z,y,80);f``;e(w,v=180,y,y);e(x,v,y,y);f(0);e(w,v,y=9,y);e(x,v,y,y);noFill(line(u,225,u,250));arc(195,...a=[245,y,y,0,PI]);arc(205,...a)}

Cobalah online!

Penjelasan:

setup = _ => { 
    createCanvas(u=400, u);                 // Create basic canvas.
    (e = ellipse, f = fill)`#fcc`;          // Light pink
    e(u /= 2, u, 150, 150);                 // These first few lines end up defining short-hand names for functions.
    e(x += 10, z = 99, 50, z);              // Throughout the code, you will see
    e(w = 240, z, 50, z);                   // lots of variable definitions.
    f`#f77`;                                // Dark pink
    e(x, z, y = 30, 80);                    // Another variable declaration
    e(w, z, y, 80);
    f``;                                    // Empty fill argument = white, apparently? (Eyes start here)
    e(w, v = 180, y, y);                    // I'll just stop commenting on declarations now
    e(x, v, y, y);
    f(0);                                   // fill(x) = fill(x, x, x)
    e(w, v, y = 9, y);
    e(x, v, y, y);
    noFill(line(u, 225, u, 250));           // Last part of bunny starts here.
                                            // Get rid of fill so the bunny doesn't look bad
    arc(195, ...a= [245, y, y, 0, PI]);
    arc(205, ...a)                          // arc() creates something similar to a semi-circle.
}
Epicness
sumber
Anda dapat menggunakan #fccdan #f77untuk warna.
Ovs
Yah ... Saya belum menemukan byte baru sejak itu. Aman untuk mengatakan saya sudah mengoptimalkan ini terlalu banyak?
Epicness
4

Lua + LÖVE / Love2D , 328 byte

l=love g=l.graphics c=g.setColor e=g.ellipse a=g.arc f="fill" k="line" o="open"function l.draw()c(1,.7,.7)e(f,50,82,40,40)e(f,30,28,10,25)e(f,70,28,10,25)c(1,.4,.4)e(f,30,28,5,18)e(f,70,28,5,18)c(1,1,1)e(f,35,73,8,8)e(f,65,73,8,8)c(0,0,0)g[k](49,90,49,99)a(k,o,45,96,5,.5,2.7)a(k,o,53,96,5,.5,2.7)e(f,35,73,4,4)e(f,65,73,4,4)end

Cobalah online!

masukkan deskripsi gambar di sini

Sheepolution
sumber
4

Memproses, 388 343 319 karakter / byte

Tidak terlalu elegan, tapi ini dia. Byte yang disimpan dengan membuat gambar lebih kecil.

int b=50,c=60,g=70;
noStroke();
//Face
fill(#FFCCCC);
ellipse(b,g,c,c);
//Outer ears
ellipse(40,25,15,b);
ellipse(c,25,15,b);
//Inner ears
fill(#FF9999);
ellipse(40,25,7,30);
ellipse(c,25,7,30);
//Outer eyes
fill(-1);
ellipse(40,g,10,10);
ellipse(c,g,10,10);
//Inner eyes
fill(0);
ellipse(40,g,5,5);
ellipse(c,g,5,5);
//Mouth
stroke(0);
line(b,80,b,85);
noFill();
arc(53,85,5,5,0,PI);
arc(48,85,5,5,0,PI);

masukkan deskripsi gambar di sini

Robert S.
sumber
Saya menyimpan beberapa byte di sana-sini: 332 byte
Zylviij
279 byte
Zylviij
Jika stroke yang diperbolehkan , 258 byte
Zylviij
@Zylviij Menggunakan beberapa ide yang Anda miliki dan membawanya ke 343 karakter. Saya tidak berpikir Anda dapat menetapkan fungsi ke variabel dalam Memproses.
Robert S.
Saya belum pernah menggunakan atau mengunduh proses secara pribadi, tetapi saya menguji skrip saya di sini dan mereka bekerja tanpa menghasilkan kesalahan pada gambar atau konsol
Zylviij
4

PostScript , 688 484 468 439 byte

Versi golf:

80 60 translate 5 5 scale .2 setlinewidth 1 .7 .7 setrgbcolor 0 0 10 0 360 arc closepath fill /h {7 15 moveto 7 25 1 25 1 15 curveto 1 5 7 5 7 15 curveto closepath fill 1 .5 .5 setrgbcolor 6 15 moveto 6 22 2 22 2 15 curveto 2 8 6 8 6 15 curveto closepath fill 1 setgray 4 3 2 0 360 arc closepath fill 0 setgray 4 3 1 0 360 arc closepath fill 0 -3 moveto 0 -5 lineto stroke 1 -5 1 180 0 arc stroke}def gsave h grestore -1 1 scale h showpage

Versi tidak disatukan:

80 60 translate                                     % over-all shift
5 5 scale                                           % over-all scale
.2 setlinewidth
1 .7 .7 setrgbcolor                                 % light pink
0 0 10 0 360 arc closepath fill                     % large circle for head
/h {                                                % procedure for drawing one half
  7 15 moveto 7 25 1 25 1 15 curveto                % ellipse for outer ear
              1  5 7  5 7 15 curveto closepath fill
  1 .5 .5 setrgbcolor                               % dark pink
  6 15 moveto 6 22 2 22 2 15 curveto                % ellipse for inner ear
              2  8 6  8 6 15 curveto closepath fill
  1 setgray                                         % white
  4 3 2 0 360 arc closepath fill                    % circle for outer eye
  0 setgray                                         % black
  4 3 1 0 360 arc closepath fill                    % circle for inner eye
  0 -3 moveto 0 -5 lineto stroke                    % line for upper mouth
  1 -5 1 180 0 arc stroke                           % arc for lower mouth
} def
gsave h grestore                                    % right half
-1 1 scale h                                        % left half
showpage

Hasil:

kelinci

Thomas Fritsch
sumber
3

SVG (HTML5), 415 byte

<svg width=48 height=80><g fill=#fdd><circle cx=24 cy=52 r=24 /><ellipse cx=12 cy=16 rx=8 ry=16 /><ellipse cx=36 cy=16 rx=8 ry=16 /></g><g fill=#f99><ellipse cx=12 cy=16 rx=4 ry=12 /><ellipse cx=36 cy=16 rx=4 ry=12 /></g><g fill=#fff><circle cx=16 cy=44 r=6 /><circle cx=32 cy=44 r=6 /></g><circle cx=16 cy=44 r=3 /><circle cx=32 cy=44 r=3 /><path stroke=#000 fill=none d=M18,60a3,3,180,0,0,6,0v-6v6a3,3,180,0,0,6,0

Menjaga ketinggian di bawah 100 untuk membantu menghemat byte berharga, tetapi masih ...

Neil
sumber
3

Jawa, 508 472 byte

import java.awt.*;v->new Frame(){Graphics2D G;Color C;void d(int...d){G.fillOval(d[0],d[1],d[2],d[3]);}{add(new Panel(){public void paint(Graphics g){G=(Graphics2D)g;G.setPaint(C.PINK);d(0,65,99,99);d(22,0,24,75);d(58,0,24,75);G.setPaint(C.MAGENTA);d(27,5,14,65);d(63,5,14,65);G.setPaint(C.WHITE);d(24,85,20,20);d(60,85,20,20);G.setPaint(C.BLACK);d(30,91,8,8);d(66,91,8,8);G.drawArc(41,124,9,11,0,-180);G.drawArc(50,124,9,11,0,-180);G.drawLine(50,119,50,130);}});show();}}

Ini adalah kelinci yang dihasilkan:
masukkan deskripsi gambar di sini

Penjelasan:

import java.awt.*;              // Required imports for almost everything
v->                             // Method with empty unused parameter and no return-type
  new Frame(){                  //  Create a new Frame
    Graphics2D G;               //   Graphics2D-object on class-level
    Color C;                    //   Color variable to save bytes with static calls
    void d(int...d){            //   Create an inner method with integer-varargs as parameter
      G.fillOval(               //    Draw a circle/oval, filled with the current color:
        d[0],d[1],              //     With the first two integers as starting x,y position
        d[2],                   //     Third as width
        d[3]));}                //     And fourth as height
    {                           //   Then open an initializer-block inside the Frame-class
     add(new Panel(){           //    And add a Panel to the Frame we can draw on
       public void paint(Graphics g){
                                //     Override the Panel's paint-method
         G=(Graphics2D)g;       //      Set the Graphics2D-object with the parameter
         G.setPaint(C.PINK);    //      Set the color to pink (255,175,175)
         d(0,65,99,99);         //      Draw the head circle
         d(22,0,24,75);         //      Draw the left ear
         d(58,0,24,75);         //      Draw the right ear
         G.setPaint(C.MAGENTA); //      Change the color to magenta (255,0,255)
         d(27,5,14,65);         //      Draw the inner part of the left ear
         d(63,5,14,65);         //      Draw the inner part of the right ear
         G.setPaint(C.WHITE);   //      Change the color to white (255,255,255)
         d(24,85,20,20);        //      Draw the left eye
         d(60,85,20,20);        //      Draw the right eye
         G.setPaint(C.BLACK);   //      Change the color to black (0,0,0)
         d(30,91,8,8);          //      Draw the left pupil
         d(66,91,8,8);          //      Draw the right pupil
         G.drawArc(41,124,9,11,0,-180);
                                //      Draw the left mouth elipse
         G.drawArc(50,124,9,11,0,-180);
                                //      Draw the right mouth elipse
         G.drawLine(50,119,50,130);}});
                                //      Draw the line of the mouth
    show();}}                   //    And finally show the Frame on the screen
Kevin Cruijssen
sumber
3

HTML , 280 278 byte

a{color:#FFC8C8;}b{color:#FF7F7F;font-size:6px;margin-left:-10px;}m,n,j,d{display:block;}m{margin:-15px -3px;font-size:40px;}n{margin:-35px 5px;color:#FFF;font-size:15px;}j{margin:-14px 1px;color:#000;font-size:10px;}
<a><b></b><a><b></b><m><n>● ●<j>●‌‌ ‌‌ ‌‌ ●<d>‌‌ ‌‌ ‌‌ w

Ini screenshotnya:

masukkan deskripsi gambar di sini

Kutipan

Neil
sumber
0

HTML + CSS

masukkan deskripsi gambar di sini


.bunny {
  width: 107px;
  position: relative;
  z-index: 1;
  margin-top: 26px;
  margin-left: 37px;
}
.bunny .ears {
  display: flex;
  width: 100%;
  justify-content: center;
}
.bunny .ears .ear {
  width: 16px;
  height: 49px;
  background: #ff7f7e;
  border-radius: 100%;
  border: 7px solid #ffc8c8;
}
.bunny .ears .ear.left {
  margin-right: 8px;
}
.bunny .ears .ear.right {
  margin-left: 8px;
}
.bunny .face {
  width: 107px;
  background: #ffc8c8;
  border-radius: 100%;
  height: 107px;
  margin-top: -8px;
}
.bunny .face .eyes {
  justify-content: center;
  display: flex;
}
.bunny .face .eyes .eye {
  width: 9px;
  height: 9px;
  background: #000;
  border-radius: 100%;
  margin-top: 28px;
  border: 4px solid #fff;
}
.bunny .face .eyes .eye.left {
  margin-right: 12px;
}
.bunny .face .eyes .eye.right {
  margin-left: 12px;
}
.bunny .face .mouth-thing {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-top: 18px;
  margin-right: 2px;
}
.bunny .face .mouth-thing .v-rule {
  height: 12px;
  width: 2px;
  background: #000;
}
.bunny .face .mouth-thing .jowls {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.bunny .face .mouth-thing .jowls .jowl {
  margin-top: -5px;
  border-radius: 100%;
  border: 2px solid #000;
  height: 9px;
  width: 9px;
}
  <div class="ears">
    <div class="ear left"></div>
    <div class="ear right"></div>
  </div>
  <div class="face">
    <div class="eyes">
      <div class="eye left"></div>
      <div class="eye right"></div>
    </div>
    <div class="mouth-thing">
      <div class="v-rule"></div>
      <div class="jowls">
        <div class="jowl"></div>
        <div class="jowl"></div>
      </div>
    </div>
  </div>
</div>
Joseph Brown
sumber
2
Selamat datang di PPCG! Karena ini ditandai dengan kode-golf, yang berarti bahwa aubmissions harus bertujuan untuk meminimalkan jumlah byte mereka, kami memerlukan pengiriman kode-golf untuk melakukan upaya serius dalam mengurangi jumlah byte mereka, seperti mengurangi spasi putih, memperpendek nama variabel, dll. Semoga Anda menikmati tinggal anda!
Perwujudan Ketidaktahuan
1
Anda juga harus memasukkan bytecount Anda di header
Jo King