Vẽ chú thỏ Phục Sinh


14

Cá nhân hạnh phúc này được biết đến trong văn hóa dân gian là Bunny Phục sinh.

thỏ Phục Sinh

Màu sắc

Nó được tạo bằng 4 màu:

  • Màu hồng nhạt
  • Màu hồng đậm
  • trắng
  • Đen

(Tôi rất vui khi những màu này được xấp xỉ trong câu trả lời của bạn. Nó không cần phải là sắc thái chính xác này)

Hình dạng

Nó được xây dựng từ những hình dạng này:

  • Hai hình elip cao màu hồng nhạt (tai ngoài). Chúng có cùng chiều cao và chiều rộng.
  • Hai hình elip cao màu hồng đậm (tai trong). Chúng nhỏ hơn tai ngoài và một cái được vẽ trên đỉnh của mỗi tai ngoài. Chúng có cùng chiều cao và chiều rộng.
  • Một vòng tròn lớn màu hồng nhạt (đầu). Nó giao với phần ba dưới cùng của cả hai tai ngoài (nhưng không cao hơn).
  • Hai vòng tròn màu trắng (mắt ngoài). Chúng được vẽ trên đầu. Đường kính của chúng nhỏ hơn chiều rộng của tai ngoài. Chúng có vị trí ngang giống như tai ngoài.
  • Hai vòng tròn màu đen (mắt trong). Chúng có đường kính nhỏ hơn mắt ngoài. Một được vẽ trên mỗi mắt bên ngoài.
  • Một đường thẳng đứng màu đen (miệng trên). Nó được vẽ trên đầu và thấp hơn đáy mắt ngoài. Nó là khoảng cách tương đương từ mỗi mắt.
  • Hai vòng cung màu đen (miệng dưới). Chúng được vẽ trên đầu và vòng cung hướng xuống từ một đường ngang. Cả hai giao nhau với đáy miệng trên, nhưng một bên phải và bên kia đi bên trái.

Những quy định

  • Sử dụng bất kỳ ngôn ngữ và công cụ bạn thích.
  • Đầu ra có thể là một hình ảnh, html, svg hoặc đánh dấu khác.
  • Đó là mã golf, vì vậy hãy nhắm đến việc thực hiện nó với số lượng byte nhỏ nhất.
  • Vui lòng bao gồm một ảnh chụp màn hình của kết quả.
  • Xin vui lòng để gần đúng các màu được xác định.

Chúc mừng lễ Phục sinh!


Kích thước hình ảnh bạn muốn?
Neil

@ Kích thước không quan trọng, Neil. Miễn là nó đáp ứng các yêu cầu về hình dạng và màu sắc.
AJFaraday

Tôi đã có một câu trả lời desmos trong công việc. Là không có màu trắng trong mắt chấp nhận được?
Benjamin Urquhart

@BenjaminUrquhart không thực sự. Điều đó đơn giản hóa đáng kể quá trình. Bạn có thể làm cho nó một màu xám, nếu điều đó giúp.
AJFaraday

1
@BenjaminUrquhart làm việc cho tôi
AJFaraday

Câu trả lời:


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 @=@.STBuffer(.6)SET @r=@l.STUnion('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)

Trang web này có thể sử dụng nhiều bản vẽ dựa trên T-SQL hơn!

Chạy trên SQL 2017, nhưng sử dụng các tính năng lưu trữ không gian địa lý SQL được thêm lại trong SQL 2008 . Ngắt dòng chỉ dành cho khả năng đọc.

Đầu ra:

nhập mô tả hình ảnh ở đây

Vì vậy, đây là một điều khó khăn trong T-SQL, vì các đối tượng không gian không được thiết kế chính xác để vẽ (ví dụ không có đối tượng "hình elip"). Thậm chí, để có được màu sắc gần đúng đòi hỏi một chút thử và sai.

Về cơ bản tôi đang xây dựng các đối tượng hình học sau:

  1. Mắt ( @), là các điểm được mở rộng thành các đĩa bằng cách sử dụng STBuffer(.6)(tập hợp tất cả các điểm trong vòng 0,6 của các điểm bắt đầu đó)
  2. Tai ( @r), được tạo ra như những đường cong nhọn, nhưng được "phồng ra" bằng cách sử dụng STBuffervào tai trong hoặc ngoài
  3. Khuôn mặt, đó là một cái đĩa cộng với đôi tai trừ đi đôi mắt. Tôi phải xây dựng nó và hiển thị nó dưới dạng một đối tượng hoặc SQL sẽ hiển thị nó theo các màu khác nhau.
  4. Miệng, là một đường cong được tạo ra bằng cách sử dụng CIRCULARSTRING

Để có được màu sắc phù hợp, tôi phải SELECTnhững theo thứ tự đúng . SSMS có một chuỗi màu tích hợp cho các đối tượng được hiển thị trong khung kết quả không gian , do đó, tai trong màu hồng đậm phải đứng thứ 4 và mặt màu hồng nhạt phải đến thứ 16 . Điều này đòi hỏi phải đặt vào một loạt các bản sao bổ sung của mắt, điều này cũng ổn vì chúng ta muốn chúng càng gần màu đen càng tốt (màu sắc có phần trong suốt, do đó, việc xếp chúng làm cho chúng tối hơn).

Trợ giúp và cảm hứng từ các tài nguyên sau:

EDIT : Di chuyển chú thỏ xuống 4 đơn vị, thay đổi một số tọa độ thành một chữ số, tiết kiệm 6 byte. Không có thay đổi trong đầu ra được hiển thị.


1
Xây dựng một con thỏ với các đối tượng hình học, rực rỡ! xD
Kevin Cruijssen

9

Màu đỏ , 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)]]

nhập mô tả hình ảnh ở đây


7

Desmos, 262 ký tự / byte

Ý tôi là, nó ngắn hơn Java: ^)

+2 byte để điền vào tai

// 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}

Liên kết Với các dòng biểu đồ bị vô hiệu hóa (Tôi chỉ cần tìm ra bạn có thể làm điều này):

Bunneh

Bunneh


Tôi thích câu trả lời này! Mặc dù, nếu tôi có thể là pedantic. Tai ngoài phải cùng màu với khuôn mặt. Bên trong nên tối hơn. Ngoài ra, các ý kiến ​​có trong số char của bạn? Bạn có thể cạo một chút ra khỏi đó.
AJFaraday

1
Các ý kiến ​​không được bao gồm @AJFaraday. Desmos không có cách nào để làm cho mọi thứ "tối hơn" hoặc "nhẹ hơn" ngoài việc sắp xếp nhiều phương trình hơn trong cùng một vị trí (tai ngoài có cùng màu với khuôn mặt btw).
Benjamin Urquhart

Có đúng không khi sử dụng byte khi chọn màu? Cảm thấy hơi bất công ...?
Stewie Griffin

@StewieGriffin Tôi không biết cách đếm màu. Có lẽ tôi sẽ mở / tìm một bài viết meta trên đó.
Benjamin Urquhart


6

Ruby với Giày , 240 ký tự

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}

Đầu ra mẫu:

Ảnh chụp màn hình cửa sổ giày với chú thỏ Phục sinh


6

Python, 368 byte

Sử dụng 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()

Kết quả: nhập mô tả hình ảnh ở đây

Ung dung:

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()

5

Javascript, 381 326 byte

Cảm ơn Arnold và 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']())



1
Gần đây đã gửi một bản chỉnh sửa cho -6.
Sử thi

Nếu bạn sẵn sàng thay đổi câu trả lời của mình, HTML+JavaScriptbạn có thể tạo phần HTML <canvas id=A>và phần đầu tiên của JS b=A.getContext...- Tôi đã sử dụng phần này trong Quốc kỳ Iceland của tôi một thời gian trước đây. Bài đăng này vừa lưu mà trả lời 2 byte :) codegolf.stackexchange.com/a/176852/8340
dana

Là một phần thưởng, bạn có thể nhúng "đoạn trích ngăn xếp" :) stackoverflow.blog/2014/09/16/iêu
dana

1
Bạn có thể lưu thêm 3 byte với (D=document).body.appendChild(a=D.createElement`canvas`).
Arnauld

4

JavaScript + P5.js , 291 276 273 byte

Rất nhiều thay đổi nhỏ trong khoảng thời gian này .. hoàn toàn không thay đổi kích thước byte.

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)}

Hãy thử trực tuyến!

Giải trình:

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.
}

Bạn có thể sử dụng #fcc#f77cho màu sắc.
trứng

Chà ... tôi đã không tìm thấy bất kỳ byte mới nào kể từ đó. Có an toàn để nói rằng tôi đã tối ưu hóa điều này quá nhiều?
Sử thi

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

Hãy thử trực tuyến!

nhập mô tả hình ảnh ở đây


4

Đang xử lý, 388 343 319 ký tự / byte

Không thanh lịch lắm, nhưng đây rồi. Lưu byte bằng cách làm cho hình ảnh nhỏ hơn.

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);

nhập mô tả hình ảnh ở đây


Tôi đã lưu một vài byte ở đây và ở đó: 332 byte
Zylviij



@Zylviij Đã sử dụng một số ý tưởng bạn có và đưa nó xuống còn 343 ký tự. Tôi không nghĩ bạn có thể gán các hàm cho các biến trong Xử lý.
Robert S.

Tôi chưa từng sử dụng hoặc tải xuống xử lý cá nhân, nhưng tôi đã kiểm tra các tập lệnh của mình ở đây và chúng đã hoạt động mà không tạo ra lỗi trong hình ảnh hoặc bảng điều khiển
Zylviij

4

PostScript , 688 484 468 439 byte

Phiên bản chơi gôn:

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

Phiên bản bị đánh cắp:

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

Kết quả:

con thỏ


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

Giữ chiều cao dưới 100 để giúp lưu các byte quý giá, nhưng vẫn dài nhất ...


3

Java, 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();}}

Đây là con thỏ kết quả:
nhập mô tả hình ảnh ở đây

Giải trình:

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

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

Đây là một ảnh chụp màn hình:

nhập mô tả hình ảnh ở đây

Trích dẫn


0

HTML + CSS

nhập mô tả hình ảnh ở đây


.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>

2
Chào mừng đến với PPCG! Vì đây được gắn thẻ golf-code, điều đó có nghĩa là việc khai thác nhằm mục đích giảm thiểu số byte của họ, chúng tôi yêu cầu đệ trình mã golf để thực hiện một nỗ lực nghiêm túc trong việc giảm số byte của họ, như giảm khoảng trắng, rút ​​ngắn tên biến, v.v. Chỗ ở của bạn!
Hiện thân của sự thiếu hiểu biết

1
Bạn cũng nên bao gồm số tiền thưởng của mình trong tiêu đề
Jo King
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.