Zeichne den Osterhasen

14

Diese fröhliche Person ist in der Folklore als Osterhase bekannt.

Osterhase

Farben

Es wird mit 4 Farben erstellt:

  • Hell-Pink
  • Dunkelpink
  • Weiß
  • Schwarz

(Ich bin froh, dass diese Farben in Ihrer Antwort angenähert werden. Es muss nicht genau dieser Farbton sein.)

Formen

Es besteht aus diesen Formen:

  • Zwei große Ellipsen in hellrosa (Außenohren). Sie haben die gleiche Höhe und Breite.
  • Zwei große Ellipsen in dunkelrosa (Innenohren). Sie sind kleiner als die Außenohren und auf jedes der Außenohren ist eines gezeichnet. Sie haben die gleiche Höhe und Breite.
  • Ein großer Kreis in hellrosa (Kopf). Es schneidet sich mit dem unteren Drittel der beiden äußeren Ohren (aber nicht höher).
  • Zwei weiße Kreise (äußere Augen). Sie sind auf den Kopf gezeichnet. Ihr Durchmesser ist kleiner als die Breite der Außenohren. Sie haben die gleiche horizontale Position wie die Außenohren.
  • Zwei schwarze Kreise (innere Augen). Sie haben einen kleineren Durchmesser als die äußeren Augen. Auf jedes der äußeren Augen ist eines gezeichnet.
  • Eine vertikale Linie in Schwarz (Obermaul). Es ist auf den Kopf gezeichnet und liegt tiefer als die Unterseite der äußeren Augen. Es ist ungefähr gleich weit von jedem Auge entfernt.
  • Zwei Bögen in Schwarz (unterer Mund). Sie werden auf den Kopf gezeichnet und von einer horizontalen Linie nach unten gebogen. Beide schneiden sich mit dem unteren Teil des oberen Mundes, aber einer geht nach rechts und der andere nach links.

Die Regeln

  • Verwenden Sie eine beliebige Sprache und ein beliebiges Werkzeug.
  • Die Ausgabe kann ein Bild, HTML, SVG oder ein anderes Markup sein.
  • Es ist Codegolf, also versuchen Sie es in der kleinsten Anzahl von Bytes.
  • Bitte fügen Sie einen Screenshot des Ergebnisses bei.
  • Bitte zögern Sie nicht, die definierten Farben anzunähern.

Frohe Ostern!

AJFaraday
quelle
Welche Bildgröße hätten Sie gerne?
Neil
@Neil Größe spielt keine Rolle, Neil. Solange es die Anforderungen an Form und Farbe erfüllt.
AJFaraday
Ich habe eine desmos Antwort in Arbeit. Ist es akzeptabel, kein Weiß in den Augen zu haben?
Benjamin Urquhart
@BenjaminUrquhart eigentlich nicht. Das vereinfacht den Prozess erheblich. Du könntest es grau machen, wenn das hilft.
AJFaraday
1
@ BenjaminUrquhart arbeitet für mich
AJFaraday

Antworten:

18

T-SQL, 445 439 Bytes

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)

Diese Seite könnte mehr T-SQL-basierte Zeichnungen gebrauchen!

Wird unter SQL 2017 ausgeführt, verwendet jedoch georäumliche SQL-Speicherfunktionen, die in SQL 2008 hinzugefügt wurden . Zeilenumbrüche dienen nur der Lesbarkeit.

Ausgabe:

Bildbeschreibung hier eingeben

In T-SQL war dies ein Problem, da räumliche Objekte nicht genau zum Zeichnen vorgesehen sind (z. B. kein "Ellipsen" -Objekt). Noch mehr, die Farben immer noch nah zu Recht erforderlich , um ein bisschen von Versuch und Irrtum.

Grundsätzlich konstruiere ich folgende geometrische Objekte:

  1. Die Augen ( @), bei denen es sich um Punkte handelt, werden mithilfe von Datenträgern erweitertSTBuffer(.6) (der Menge aller Punkte innerhalb von 0,6 dieser Startpunkte)
  2. Die Ohren ( @r), die als spitze Kurven erzeugt werden, aber STBufferentweder in das Innen- oder das Außenohr "herausgepustet" werden
  3. Das Gesicht, das eine Scheibe ist, plus die Ohren minus die Augen. Ich muss dies konstruieren und es als einzelnes Objekt anzeigen, oder SQL würde es in verschiedenen Farben anzeigen.
  4. Der Mund, der eine Kurve ist, die mit erstellt wurde CIRCULARSTRING

Um die Farben richtig zu machen, muss ich SELECTdiese in der richtigen Reihenfolge bringen . SSMS hat eine eingebaute in Folge von Farben für Objekte im räumlichen Ergebnisbereich angezeigt , so dass die dunkelrosa inneren Ohren kommen musste 4. , und das Licht rosa Gesicht musste kommen 16. . Dies erforderte das Einfügen einer ganzen Reihe zusätzlicher Kopien der Augen, was in Ordnung ist, da wir sie so nah wie möglich an Schwarz halten möchten (Farben sind etwas transparent, so dass sie durch Stapeln dunkler werden).

Hilfe und Inspiration aus folgenden Quellen:

BEARBEITEN : Der Hase wurde um 4 Einheiten nach unten verschoben, wodurch einige Koordinaten in eine einzelne Ziffer geändert wurden, wodurch 6 Bytes gespart wurden. Keine Änderung der angezeigten Ausgabe.

BradC
quelle
1
Mit geometrischen Objekten ein Kaninchen bauen, genial! xD
Kevin Cruijssen
9

Rot , 375 340 329 Bytes

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

Bildbeschreibung hier eingeben

Galen Ivanov
quelle
7

Desmos, 262 Zeichen / Byte

Ich meine, es ist kürzer als Java: ^)

+2 Bytes, um die Ohren zu füllen

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

Verknüpfung Mit deaktivierten Diagrammlinien (ich habe gerade herausgefunden, dass Sie dies tun können):

Bunneh

Bunneh

Benjamin Urquhart
quelle
Ich liebe diese Antwort! Obwohl, wenn ich pedantisch sein darf. Das Außenohr sollte die gleiche Farbe wie das Gesicht haben. Das Innere sollte dunkler sein. Sind die Kommentare auch in Ihrer Zeichenanzahl enthalten? Sie könnten sich dort ein wenig rasieren.
AJFaraday
1
Die Kommentare sind nicht @AJFaraday enthalten. Desmos hat keine andere Möglichkeit, Dinge "dunkler" oder "heller" zu machen, als mehr Gleichungen an derselben Stelle zu stapeln (das Außenohr hat die gleiche Farbe wie das Gesicht übrigens).
Benjamin Urquhart
Stimmt es, dass bei der Farbauswahl keine Bytes verwendet werden? Fühlt sich ein bisschen unfair an ...?
Stewie Griffin
@StewieGriffin Ich bin mir nicht sicher, wie ich die Farben zählen soll. Vielleicht öffne / finde ich einen Metapost darauf.
Benjamin Urquhart
Meta post
Benjamin Urquhart
6

Ruby with Shoes , 240 Zeichen

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}

Beispielausgabe:

Schuhfenster-Screenshot mit Osterhasen

Mann bei der Arbeit
quelle
6

Python, 368 Bytes

Matplotlib verwenden.

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

Ergebnis: Bildbeschreibung hier eingeben

Ungolfed:

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
quelle
5

Javascript, 381 326 Bytes

Danke Arnold und 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
quelle
1
389 Bytes
Arnauld
1
Kürzlich hat eine Bearbeitung für -6 eingereicht.
Epicness
Wenn Sie bereit sind, Ihre Antwort zu ändern, können HTML+JavaScriptSie den HTML-Teil <canvas id=A>und den ersten Teil des JS erstellen b=A.getContext...- ich habe dies vor einiger Zeit in meiner Flagge Islands verwendet. Dieser Beitrag hat gerade gespeichert, dass diese Antwort 2 Bytes hat :) codegolf.stackexchange.com/a/176852/8340
dana
Als Bonus kannst du ein "Stack Snippet" einbinden
dana
1
Mit können Sie 3 weitere Bytes einsparen (D=document).body.appendChild(a=D.createElement`canvas`).
Arnauld
4

JavaScript + P5.js , 291 276 273 Bytes

Diesmal gibt es viele kleine Änderungen, die die Bytegröße überhaupt nicht ändern.

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

Probieren Sie es online!

Erläuterung:

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.
}
Epos
quelle
Sie können #fccund #f77für die Farben verwenden.
Ovs
Nun ... ich habe seitdem keine neuen Bytes gefunden. Sicher zu sagen, dass ich das zu sehr optimiert habe?
Epicness
4

Lua + LÖVE / Love2D , 328 Bytes

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

Probieren Sie es online!

Bildbeschreibung hier eingeben

Sheepolution
quelle
4

Verarbeitung, 388 343 319 Zeichen / Byte

Nicht sehr elegant, aber hier ist es. Gespeicherte Bytes durch Verkleinern des Bildes.

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

Bildbeschreibung hier eingeben

Robert S.
quelle
Ich habe hier und da ein paar Bytes gespeichert: 332 Bytes
Zylviij
279 Bytes
Zylviij
Wenn Striche sind erlaubt , 258 Bytes
Zylviij
@Zylviij Verwendete einige der Ideen, die Sie hatten, und brachte es auf 343 Zeichen. Ich glaube nicht, dass Sie Variablen in Processing Funktionen zuweisen können.
Robert S.
Ich habe die Verarbeitung noch nie persönlich verwendet oder heruntergeladen, aber ich habe meine Skripte hier getestet und sie funktionierten ohne Fehler im Image oder in der Konsole
Zylviij,
4

PostScript , 688 484 468 439 Bytes

Golf Version:

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

Ungolfed-Version:

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

Ergebnis:

Hase

Thomas Fritsch
quelle
3

SVG (HTML5), 415 Bytes

<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

Halten Sie die Höhe unter 100, um wertvolle Bytes zu sparen, aber immer noch die längste ...

Neil
quelle
3

Java, 508 472 Bytes

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

Dies ist das resultierende Häschen:
Bildbeschreibung hier eingeben

Erläuterung:

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
quelle
3

HTML , 280 278 Bytes

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

Hier ist ein Screenshot:

Bildbeschreibung hier eingeben

Zitate

Neil
quelle
0

HTML + CSS

Bildbeschreibung hier eingeben


.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
quelle
2
Willkommen bei PPCG! Da dies mit Code-Golf gekennzeichnet ist, was bedeutet, dass eine Übermittlung darauf abzielen sollte, die Anzahl ihrer Bytes zu minimieren, müssen Code-Golf-Übermittlungen einen ernsthaften Versuch unternehmen, die Anzahl ihrer Bytes zu reduzieren, z. B. Leerzeichen zu reduzieren, Variablennamen zu verkürzen usw. dein Aufenthalt!
Verkörperung der Ignoranz
1
Sie sollten auch Ihr bytecount in den Header aufnehmen
Jo King