Narysuj Zajączek

14

Ta szczęśliwa osoba znana jest w folklorze jako Zajączek Wielkanocny.

Zajączek wielkanocny

Zabarwienie

Jest tworzony przy użyciu 4 kolorów:

  • Jasnoróżowy
  • Ciemno różowy
  • Biały
  • czarny

(Cieszę się, że te kolory są przybliżone w Twojej odpowiedzi. Nie musi to być ten precyzyjny odcień)

Kształty

Jest zbudowany z następujących kształtów:

  • Dwie wysokie elipsy w kolorze jasnoróżowym (uszy zewnętrzne). Mają tę samą wysokość i szerokość.
  • Dwie wysokie elipsy w kolorze ciemnoróżowym (uszy wewnętrzne). Są mniejsze niż zewnętrzne uszy, a jeden jest narysowany na każdym z zewnętrznych uszu. Są tej samej wysokości i szerokości.
  • Jedno duże koło w jasnoróżowym kolorze (głowa). Przecina się z dolną jedną trzecią obu zewnętrznych uszu (ale nie wyżej).
  • Dwa kółka w kolorze białym (zewnętrzne oczy). Są narysowane na głowie. Ich średnica jest mniejsza niż szerokość zewnętrznych uszu. Mają taką samą pozycję poziomą jak uszy zewnętrzne.
  • Dwa kółka w kolorze czarnym (wewnętrzne oczy). Mają mniejszą średnicę niż oczy zewnętrzne. Jeden jest narysowany na każdym z zewnętrznych oczu.
  • Jedna pionowa linia w kolorze czarnym (górne usta). Jest narysowany na głowie i jest niższy niż dolna część zewnętrznych oczu. Jest mniej więcej w równej odległości od każdego oka.
  • Dwa łuki w kolorze czarnym (dolne usta). Są one rysowane na głowie i wyginają się w dół od linii poziomej. Oba przecinają się z dolną częścią górnej części jamy ustnej, ale jedna idzie w prawo, a druga w lewo.

Zasady

  • Używaj dowolnego języka i narzędzi, które lubisz.
  • Dane wyjściowe mogą być obrazem, HTML, SVG lub innym znacznikiem.
  • To jest golf golfowy, więc staraj się to robić w jak najmniejszej liczbie bajtów.
  • Dołącz zrzut ekranu wyniku.
  • Zachęcamy do przybliżenia zdefiniowanych kolorów.

Wesołego Alleluja!

AJFaraday
źródło
Jaki rozmiar obrazu chciałbyś?
Neil
@Neil rozmiar nie ma znaczenia, Neil. O ile spełnia wymagania dotyczące kształtu i koloru.
AJFaraday
Mam odpowiedź desmos w pracach. Czy brak bieli w oczach jest do przyjęcia?
Benjamin Urquhart
@BenjaminUrquhart nie bardzo. To znacznie upraszcza proces. Możesz to zmienić na szary, jeśli to pomoże.
AJFaraday
1
@BenjaminUrquhart działa dla mnie
AJFaraday

Odpowiedzi:

18

T-SQL, 445 439 bajtów

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)

Ta strona mogłaby użyć więcej rysunków opartych na T-SQL!

Uruchamiane na SQL 2017, ale używa SQL geoprzestrzenną przechowywania funkcje dodane z powrotem w SQL 2008 . Podziały linii służą wyłącznie do odczytu.

Wynik:

enter image description here

Było to więc trudne w T-SQL, ponieważ obiekty przestrzenne nie są dokładnie zaprojektowane do rysowania (na przykład brak obiektu „elipsy”). Co więcej, zbliżenie kolorów do prawej wymagało trochę prób i błędów.

Zasadniczo buduję następujące obiekty geometryczne:

  1. Oczy ( @), które są punktami rozszerzonymi na dyski za pomocą STBuffer(.6)(zbiór wszystkich punktów w granicach 0,6 tych punktów początkowych)
  2. Uszy ( @r), które są generowane jako spiczaste krzywe, ale są „wydmuchiwane” za pomocą STBufferucha wewnętrznego lub zewnętrznego
  3. Twarz, która jest dyskiem plus uszy minus oczy. Muszę to skonstruować i wyświetlić jako pojedynczy obiekt, inaczej SQL wyświetliby go w różnych kolorach.
  4. Usta, które są krzywą utworzoną za pomocą CIRCULARSTRING

Aby uzyskać prawidłowe kolory, muszę SELECTje w odpowiedniej kolejności . SSMS ma wbudowaną sekwencję kolorów dla obiektów wyświetlanych w okienku wyników przestrzennych , więc ciemnoróżowe uszy wewnętrzne musiały zająć czwarte miejsce , a jasnoróżowa twarz - szesnaste . Wymagało to włożenia całej gamy dodatkowych kopii oczu, co jest w porządku, ponieważ chcemy, aby były jak najbardziej zbliżone do czerni (kolory są nieco przezroczyste, więc układanie ich sprawia, że ​​są ciemniejsze).

Pomoc i inspiracja z następujących zasobów:

EDYCJA : Przeniosłem króliczka o 4 jednostki, co zmienia niektóre współrzędne na jedną cyfrę, oszczędzając 6 bajtów. Brak zmian w wyświetlanej mocy wyjściowej.

BradC
źródło
1
Budowanie królika z obiektami geometrycznymi, genialne! xD
Kevin Cruijssen
9

Czerwony , 375 340 329 bajtów

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

enter image description here

Galen Iwanow
źródło
7

Desmos, 262 znaków / bajtów

To znaczy, jest krótszy niż Java: ^)

+2 bajty do wypełnienia uszu

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

Link Przy wyłączonych liniach wykresu (właśnie zorientowałem się, że możesz to zrobić):

Bunneh

Bunneh

Benjamin Urquhart
źródło
Uwielbiam tę odpowiedź! Chociaż, jeśli mogę być pedantyczny. Ucho zewnętrzne powinno być tego samego koloru co twarz. Wnętrze powinno być ciemniejsze. Czy komentarze są również uwzględnione w liczbie znaków? Możesz się trochę ogolić.
AJFaraday
1
Komentarze nie są uwzględnione @AJFaraday. Desmos nie ma sposobu na uczynienie rzeczy „ciemniejszymi” lub „jaśniejszymi” innymi niż układanie większej liczby równań w tym samym miejscu (ucho zewnętrzne ma ten sam kolor co twarz).
Benjamin Urquhart
Czy to prawda, że ​​przy wyborze kolorów nie są używane bajty? Czuje się trochę niesprawiedliwy ...?
Stewie Griffin,
@StewieGriffin Nie jestem pewien, jak policzyć kolory. Może otworzę / znajdę na nim meta post.
Benjamin Urquhart
Meta post
Benjamin Urquhart
6

Rubin z butami , 240 znaków

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}

Przykładowe dane wyjściowe:

Shoes window screenshot with easter bunny

człowiek w pracy
źródło
6

Python, 368 bajtów

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

Wynik: wprowadź opis zdjęcia tutaj

Nie golfowany:

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
źródło
5

JavaScript, 381 326 bajtów

Dzięki Arnold i 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
źródło
1
389 bajtów
Arnauld
1
Ostatnio przesłano edycję dla -6.
Epicness
Jeśli chcesz zmienić swoją odpowiedź HTML+JavaScript, możesz zrobić część HTML <canvas id=A>i pierwszą część JS b=A.getContext...- użyłem tego w mojej fladze Islandii jakiś czas temu. Ten post właśnie zapisał tę odpowiedź 2 bajty :) codegolf.stackexchange.com/a/176852/8340
dana
Jako bonus możesz osadzić „fragment kodu” :) stackoverflow.blog/2014/09/16/…
dana
1
Możesz zapisać jeszcze 3 bajty (D=document).body.appendChild(a=D.createElement`canvas`).
Arnauld,
4

JavaScript + P5.js , 291 276 273 bajtów

Tym razem wiele małych zmian, które w ogóle nie zmieniają rozmiaru bajtu.

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

Wypróbuj online!

Wyjaśnienie:

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
źródło
Możesz użyć #fcci #f77dla kolorów.
ovs
Cóż ... Od tego czasu nie znalazłem żadnych nowych bajtów. Czy można powiedzieć, że za bardzo to zoptymalizowałem?
Epicness
4

Lua + LÖVE / Love2D , 328 bajtów

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

Wypróbuj online!

wprowadź opis zdjęcia tutaj

Sheepolution
źródło
4

Przetwarzanie, 388 343 319 znaków / bajtów

Niezbyt elegancki, ale oto jest. Zapisane bajty poprzez zmniejszenie obrazu.

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

wprowadź opis zdjęcia tutaj

Robert S.
źródło
Zapisałem
279 bajtów
Zylviij
Jeśli uderzeńdozwolone , 258 bajty
Zylviij
@Zylviij Wykorzystałeś niektóre z twoich pomysłów i sprowadziłeś je do 343 znaków. Nie sądzę, że można przypisywać funkcje do zmiennych w Przetwarzaniu.
Robert S.
Nigdy osobiście nie korzystałem ani nie pobierałem danych, ale przetestowałem tutaj swoje skrypty i działały one bez powodowania błędów na obrazie lub konsoli
Zylviij
4

PostScript , 688 484 468 439 bajtów

Wersja golfowa:

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

Wersja bez golfa:

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

Wynik:

królik

Thomas Fritsch
źródło
3

SVG (HTML5), 415 bajtów

<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

Utrzymywanie wysokości poniżej 100, aby zaoszczędzić cenne bajty, ale wciąż najdłuższe ...

Neil
źródło
3

Java, 508 472 bajtów

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

Oto wynikowy króliczek:
wprowadź opis zdjęcia tutaj

Wyjaśnienie:

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
źródło
3

HTML , 280 278 bajtów

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

Oto zrzut ekranu:

wprowadź opis zdjęcia tutaj

Cytowania

Neil
źródło
0

HTML + CSS

wprowadź opis zdjęcia tutaj


.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
źródło
2
Witamy w PPCG! Ponieważ jest to oznaczone kodem golfowym, co oznacza, że ​​misje powinny mieć na celu zminimalizowanie liczby bajtów, wymagamy przesłania kodu golfowego, aby podjąć poważną próbę zmniejszenia ich liczby bajtów, takich jak zmniejszenie białych znaków, skrócenie nazw zmiennych itp. Mam nadzieję, że Ci się spodoba Twój pobyt!
Wcielenie nieznajomości
1
Powinieneś także zamieścić swój bytecount w nagłówku
Jo King