11
\$\begingroup\$

In response to here.

Unlike the previous one, this focuses on and a new logo, no longer consisting of 6 sticks and the graying-effect as the position of the sticks go deeper.

Make the Stack Overflow logo using the following criteria:

Stack Overflow logo

The tray:

  • Make a gray tray shaped like a bracket facing upwards using the following RGB values: 188, 187, 187 (#bcbbbb)
  • The dimensions of the tray by pixels: dimensions

The sticks:

  • Make 5 orange sticks using the following RGB values: 244, 128, 36 (#f48024)
  • Each stick has a dimension of 44 by 9 pixels.
  • The gap between the tray and the bottom stick is 8 pixels: 8 pixels

The sticks' angles:

These angles are relative to the horizontal position which is zero degrees.

  • 1st stick (bottom): 0°
  • 2nd stick (second-to-bottom): 10°
  • 3rd stick (middle): 25°
  • 4th stick (second-to-top): 40°
  • 5th stick (top): 50°

The entire image:

  • The image should look like the image given.
  • The entire dimensions of the whole image is 82 by 97 pixels.

Stick positions (x, y):

These coordinates refer to the top-left points of each stick. The system used is the top-left point of the entire surface being (0, 0), and the numbers increasing as we go down and to the right. We also assume that the left part of the tray is at the leftmost possible point, i.e. at the far bottom left. Feel free to transcribe this into your system.

  • 1st stick: 17, 71
  • 2nd stick: 19, 51
  • 3rd stick: 27, 31
  • 4th stick: 40, 13
  • 5th stick: 55, 0

Rules:

  • The image should apply all descriptions from above.
  • Standard loopholes are forbidden.
  • Shortest code in bytes wins.
\$\endgroup\$
4
  • \$\begingroup\$ a test release of this sandboxed post. \$\endgroup\$ May 22, 2021 at 12:55
  • \$\begingroup\$ I am really looking forward to tikz and gnuplot answers. \$\endgroup\$
    – user7467
    May 22, 2021 at 13:46
  • 4
    \$\begingroup\$ why #BCBBBB, instead of the much more superior #BBBBBB or #BCBCBC, or even #BCBBBC \$\endgroup\$ May 24, 2021 at 11:34
  • 1
    \$\begingroup\$ @ophact For future reference, on this site you can just flag with a custom moderator flag explaining that the question is clear. It doesn't have any special support but we moderators will look at it and either reopen it or leave some comment. We have the capacity to handle a lot more flags, and reopening clear things swiftly is important to the site. \$\endgroup\$
    – Wheat Wizard
    May 27, 2021 at 6:58

8 Answers 8

5
\$\begingroup\$

HTML+CSS, 550 bytes

div {position: absolute;}
.z1 {background:#bcbbbb;top:80px;width:78px;height:34px;}
.z2 {background:#ffffff;left:9px;width:60px;height:25px;}
.s {background: #f48024;top:-15px;width:44px;height:9px;}
.a {top:8px;left:8px;}
.b {transform:rotate(10deg) translate(1px,1px);}
.c {transform:rotate(15deg) translate(2px,-1px);}
.d {transform:rotate(15deg) translate(2px,-1px);}
.e {transform:rotate(10deg) translate(1px,1px);}
<div class='z1'/>
<div class='z2'/>
<div class='s a'/>
<div class='s b'/>
<div class='s c'/>
<div class='s d'/>
<div class='s e'/>

\$\endgroup\$
12
  • 1
    \$\begingroup\$ Welcome to codegolf, Kirit! For codegolf competitions, we generally ask answerers to provide a byte-count for their solution at the top, as well as a brief explanation of the solution (although this code may not need it). Additionally, for testing validity of code, we prefer using tio.run over other sites. \$\endgroup\$ May 22, 2021 at 14:37
  • 1
    \$\begingroup\$ Welcome to Code Golf and nice first answer! When answering, try to provide a bytecount so we can rank your solution. Also, a Stack Snippet is preferred for HTML submissions. The aim of this particular challengs is to use the shortest possible code, so you can golf your code down by a few bytes by removing trailing semicolons, spaces between the selector and the curly braces, shortening your first two class names, using id instead of class, and possibly finding another suitable tag. \$\endgroup\$
    – user100690
    May 22, 2021 at 14:40
  • 2
    \$\begingroup\$ @DonThousand, TIO can't run HTML so a SE Snippet would be the best option. \$\endgroup\$
    – Shaggy
    May 22, 2021 at 14:58
  • 2
    \$\begingroup\$ z1 and z2 can be renamed to z and y or something for -2 bytes \$\endgroup\$
    – pxeger
    May 23, 2021 at 6:08
  • 1
    \$\begingroup\$ 1. space before { may be removed; 2. If multiple className have same CSS styles, try .b,.e{/* styles goes here */} \$\endgroup\$
    – tsh
    May 24, 2021 at 8:50
2
\$\begingroup\$

Python + Pygame, 319 303 273 260 252 bytes

Many bytes shaved off thanks to @ovs and p1131.

from pygame import*
e=display
s=e.set_mode((82,97))
s.fill(T:=8**8-1)
R=draw.rect
R(s,0xbcbbbb,b'\0?N"')
R(s,T,b'    ?<')
for*i,x in b'GH',b'3F',b'C',b'(\r@',b'7\0>':A=Surface(b',   ',4**8);A.fill("#f48024");s.blit(transform.rotate(A,x*5),i)
e.update()
\$\endgroup\$
9
  • \$\begingroup\$ 303 bytes \$\endgroup\$
    – ovs
    May 23, 2021 at 14:53
  • \$\begingroup\$ 301 bytes based on @ovs 's comment and your previous submission! \$\endgroup\$
    – pan
    May 23, 2021 at 15:23
  • 1
    \$\begingroup\$ And 280 bytes. (Note that there a few unprintables in the bytestrings) \$\endgroup\$
    – ovs
    May 23, 2021 at 15:39
  • 1
    \$\begingroup\$ 253 bytes using hexadecimal to define colors: Try it online! \$\endgroup\$
    – Jakque
    May 25, 2021 at 16:04
  • 1
    \$\begingroup\$ 252 bytes from reordering for-loop iterators: Try it online! \$\endgroup\$
    – pan
    May 25, 2021 at 20:43
2
\$\begingroup\$

JavaScript (Canvas API), 379 341 339 328 292 bytes

I tweaked the angles a bit to get it closer to the actual logo, but you could change them back to the original suggestions easily (via the s() function).

292 bytes == the minified JS code in the snippet at the bottom plus the HTML line (not including <script> tags which don't appear in the snippet).

Ungolfed:

<canvas>
<script>
  c = document.body.children[0].getContext`2d`;

  s = (x, y, d, p = "#f48024", w = 44, h = 9) => (
    c.translate(x, y),
    c.rotate(d),
    c.translate(-x, -y),
    (c.fillStyle = p),
    c.fillRect(x, y, w, h),
    c.setTransform()
  );

  s(0, 63, 0, "#BCBBBB", 78, 34);
  s(9, 63, 0, "#fff", 60, 25);
  s(17, 71);
  s(20, 51, 0.22);
  s(27, 32, 0.43);
  s(40, 13, 0.7);
  s(55, 0, 0.93);
</script>

Minified:

c=document.body.children[0].getContext`2d`,s=(a,b,e,d="#f48024",f=44,g=9)=>(c.translate(a,b),c.rotate(e),c.translate(-a,-b),c.fillStyle=d,c.fillRect(a,b,f,g),c.setTransform()),s(0,63,0,"#BCBBBB",78,34),s(9,63,0,"#fff",60,25),s(17,71),s(20,51,.22),s(27,32,.43),s(40,13,.7),s(55,0,.93);
<canvas>

Edits:

  • @ophact's suggestion to remove quotes from the canvas ID field saves two bytes
  • @ovs's byte-save
  • remove all unnecessary html / API characters and elements
\$\endgroup\$
3
  • \$\begingroup\$ Does id=a work? \$\endgroup\$
    – user100690
    May 27, 2021 at 9:40
  • \$\begingroup\$ Yes it does, thanks! Have edited \$\endgroup\$
    – Sarreph
    May 27, 2021 at 10:03
  • \$\begingroup\$ document.getElementById`a`.getContext`2d` saves 4 bytes \$\endgroup\$
    – ovs
    May 27, 2021 at 13:04
2
\$\begingroup\$

HTML + CSS, 21 + 232 = 243 bytes

HTML

<a><b><c><d><e><e><d>

CSS

a,a *{height:100vh;margin:auto;display:grid;transform:rotate(var(--))}b{border:9px solid#bcbbbb;border-top:0;width:60px;height:25px}b *{background:#f48024;width:44px;height:9px}d{--:10deg;margin:-15px 1px}e{--:15deg;margin:-17px 1px

Try it:

// (Remove <script>s inserted into Stack Overflow snippet)
while(document.scripts.length) document.scripts[0].remove()
a,a *{height:100vh;margin:auto;display:grid;transform:rotate(var(--))}b{border:9px solid#bcbbbb;border-top:0;width:60px;height:25px}b *{background:#f48024;width:44px;height:9px}d{--:10deg;margin:-15px 1px}e{--:15deg;margin:-17px 1px
<a><b><c><d><e><e><d>


HTML + CSS, 21 + 195 = 216 bytes

This can be simplified considerably if we space the five stack items equally at 12.5 degrees:

a,b,s{height:100vh;margin:auto;display:grid}b{border:9px solid#bcbbbb;border-top:0;width:60px;height:25px}s{background:#f48024;width:44px;height:9px}s s{transform:rotate(12.5deg);margin:-16px 1px
<a><b><s><s><s><s><s>

\$\endgroup\$
2
\$\begingroup\$

PostScript, 209 bytes

Code (compressed version):

<</c{setrgbcolor}/r{rectfill}/s{gsave translate rotate 0 0 44 -9 r grestore}>>begin .74 .73 .73 c 0 0 78 34 r 1 1 1 c 9 9 60 25 r .96 .5 .14 c 0 17 26 s -10 19 46 s -25 27 66 s -40 40 84 s -50 55 97 s showpage   

Code (uncompressed version):

% define some short-named procedures for later use
<<
  /c { setrgbcolor }
  /r { rectfill }
  /s {              % operands on stack: angle x y
      gsave
      translate
      rotate
      0 0 44 -9 r
      grestore
  }
>> begin
.74 .73 .73 c       % gray
0 0 78 34 r
1 1 1 c             % white
9 9 60 25 r
.96 .5 .14 c        % orange
  0 17 26 s
-10 19 46 s
-25 27 66 s
-40 40 84 s
-50 55 97 s
showpage

Result:

screenshot

\$\endgroup\$
1
\$\begingroup\$

C (gcc), 280 278 277 275 268 265 bytes

(Non-printables are in hex)

#define r(s...)printf(R"X(<rect x="%d" y="%d" transform="rotate(%d,%1$d,%2$d)" width="%d" height="9" fill="#%x"/>)X",s,63,90,34,c)
c=0xbcbbbb,*p=L"b4P=\n313191f1b(\r(2007";main(){r(!r(9),88,!puts("<svg>"),78,c);for(r(78);*p;)r(*p++,*p++,*p++,44,0xf48024);puts("</svg>");}

Try it online!

  • -2 bytes by using 180 degree rotation, using *p++, and reordering the LUT for GCC's reverse ordering.
  • -1 byte for blatant for loop optimization 🤦
  • -2 bytes for abusing the return value of printf and puts for 0
  • -7 bytes using C++-style raw literals thanks to p1131
  • -3 bytes abusing vararg macros thanks again to p1131

I beat Python, I feel somewhat accomplished. Edit: said words now taste salty.

With macros expanded and commented

// LUT is encoded as a raw wide string literal
// expanded 
LUT[] = 
    // Rot,  y,  x
       180, 80, 61, // first is upside down to avoid an inconvenient null byte
        10, 51, 19,
        25, 31, 27,
        40, 13, 40,
        50,  0, 55,
         0 // implicit null terminator
};

c = 0xbcbbbb, *p = L"...";
main()
{
    // Note that GCC evaluates function parameters
    // from right to left, so these are bottom line up 😖
    printf(
       // GCC supports raw string literals in C mode
       // We use this to avoid \"
       R"X(<rect x="%d" y="%d" transform="rotate(%d,%1$d,%2$d)" width="%d" height="9" fill="#%x"/>)X",
       // !printf == 0 for non-empty strings
       // x = 0
       // Called second
       !printf(
          "<rect ...>",
          9,   // x
          63,  // y
          90,  // rot
          34,  // width
           c   // color
       ),
       88, // y
       // Called first
       // rot = 0
       !puts("<svg>"),
       78, // width
        c, // Color
       // garbage arguments left in that printf doesn't use
       63, 90, 34, c
    );
    // Loop through our LUT for the 5 orange bars
    for (
        // Typical printf optimization
        printf("<rect ...>", 78, 63, 90, 34, c);
        // loop until null terminator
        *p;
    )
        // More eval order abuse
        printf(
            "<rect ...>",
            *p++, // x = p[2]
            *p++, // y = p[1]
            *p++, // rot = p[0]
            44,   // width 
            0xf48024, // color
            63, 90, 34, c // garbage
        );
    // Closing tag
    puts("</svg>");
}

Ungolfed: (different order, but clean)

#include <stdio.h>
// Note that macro compression is used to save a few bytes.

// Color constants
static const int GRAY = 0xbcbbbb;
static const int ORANGE = 0xf48024;

// encoded raw as a string in the golfed code
static const int LUT[] = {
    // x, y, rotation
    17, 71,  0,
    19, 51, 10,
    27, 31, 25,
    40, 13, 40,
    55,  0, 50,
    0 // null terminate
};

// golfed version uses a macro
static void rect(
    int x,
    int y,
    int width,
    int color,
    int rotation
)
{
    // This could definitely be golfed better if I figure out the arithmetic for positioning
    printf("<rect "
              "x=\"%d\" "
              "y=\"%d\" "
              "width=\"%d\" "
              "height=\"9\" "
              "fill=\"#%x\" "
              // rotate at top left corner
              "transform=\"rotate(%d,%1$d,%2$d)\""
           "/>", x, y, width, color, rotation);
}
int main(void)
{
    // Print SVG header
    puts("<svg>");
    // Loop through all 5 lines
    for (const int *ptr = LUT; *ptr != 0; ptr += 3) {
        rect(/*x*/ ptr[0], /*y*/ ptr[1], /*width*/ 44, /*color*/ ORANGE, /*rotation*/ ptr[2]);
    }
    // Output the box
    rect(/*x*/  9, /*y*/ 63, /*width*/ 34, /*color*/ GRAY, /*rotation*/ 90);
    rect(/*x*/  0, /*y*/ 88, /*width*/ 78, /*color*/ GRAY, /*rotation*/  0);
    rect(/*x*/ 78, /*y*/ 63, /*width*/ 34, /*color*/ GRAY, /*rotation*/ 90);
    // Output closing SVG tag
    puts("</svg>");
}

This outputs the following SVG file to standard output when run (whitespace added to make it readable):

<svg>
  <rect x="9" y="63" transform="rotate(90,9,63)" width="34" height="9" fill="#bcbbbb"/>
  <rect x="0" y="88" transform="rotate(0,0,88)" width="78" height="9" fill="#bcbbbb"/>
  <rect x="78" y="63" transform="rotate(90,78,63)" width="34" height="9" fill="#bcbbbb"/>
  <rect x="61" y="80" transform="rotate(180,61,80)" width="44" height="9" fill="#f48024"/>
  <rect x="19" y="51" transform="rotate(10,19,51)" width="44" height="9" fill="#f48024"/>
  <rect x="27" y="31" transform="rotate(25,27,31)" width="44" height="9" fill="#f48024"/>
  <rect x="40" y="13" transform="rotate(40,40,13)" width="44" height="9" fill="#f48024"/>
  <rect x="55" y="0" transform="rotate(50,55,0)" width="44" height="9" fill="#f48024"/>
</svg>

Stack snippet containing raw output:

<svg>
<rect x="9" y="63" transform="rotate(90,9,63)" width="34" height="9" fill="#bcbbbb"/><rect x="0" y="88" transform="rotate(0,0,88)" width="78" height="9" fill="#bcbbbb"/><rect x="78" y="63" transform="rotate(90,78,63)" width="34" height="9" fill="#bcbbbb"/><rect x="61" y="80" transform="rotate(180,61,80)" width="44" height="9" fill="#f48024"/><rect x="19" y="51" transform="rotate(10,19,51)" width="44" height="9" fill="#f48024"/><rect x="27" y="31" transform="rotate(25,27,31)" width="44" height="9" fill="#f48024"/><rect x="40" y="13" transform="rotate(40,40,13)" width="44" height="9" fill="#f48024"/><rect x="55" y="0" transform="rotate(50,55,0)" width="44" height="9" fill="#f48024"/></svg>


C (gcc), boring semi-cheating version, 236 231 bytes

main(){puts(R"(<svg><path fill="#bcbbbb" d="M9 63v25H0V63zM0 88h78v9H0zm78-25v25h-9V63z"/><path fill="#f48024" d="M61 80H17v-9h44zM19 51l43 8-1 9-44-8zm8-20l40 19-4 8-40-19zm13-18l34 28-6 7-34-28zM55 0l28 34-7 5L48 6z"/></svg>)");}

Try it online!

-5 bytes for using raw string literals as well.

This is literally just SVGOMG on the lowest setting, so I don't take credit for it. I can't even tell what it is doing.

It does have much lower precision, though.

<svg>
    <path fill="#bcbbbb" d="M9 63v25H0V63zM0 88h78v9H0zm78-25v25h-9V63z"/>
    <path fill="#f48024" d="M61 80H17v-9h44zM19 51l43 8-1 9-44-8zm8-20l40 19-4 8-40-19zm13-18l34 28-6 7-34-28zM55 0l28 34-7 5L48 6z"/>
</svg>

<svg><path fill="#bcbbbb" d="M9 63v25H0V63zM0 88h78v9H0zm78-25v25h-9V63z"/><path fill="#f48024" d="M61 80H17v-9h44zM19 51l43 8-1 9-44-8zm8-20l40 19-4 8-40-19zm13-18l34 28-6 7-34-28zM55 0l28 34-7 5L48 6z"/></svg>

\$\endgroup\$
4
  • 1
    \$\begingroup\$ You could use gcc's raw-strings (?) extension to save 4 bytes... Apparently that too works without any flags :P ; Try it online! \$\endgroup\$
    – pan
    May 23, 2021 at 23:50
  • 1
    \$\begingroup\$ 265 bytes using another extension... Essentially naming __VA_ARGS__ as s and using them to push out the default arguments. \$\endgroup\$
    – pan
    May 24, 2021 at 16:01
  • \$\begingroup\$ How'd you get null in TIO? \$\endgroup\$
    – Makonede
    May 25, 2021 at 3:10
  • \$\begingroup\$ You can copy paste null bytes on Linux and Android. \$\endgroup\$
    – EasyasPi
    May 25, 2021 at 3:15
1
\$\begingroup\$

HTML + JavaScript, 13 + 226 bytes = 239 bytes

with(c.getContext`2d`)(F=(x,y,r,f='#f48024',w=44,h=9)=>setTransform(translate(x,y),rotate(r),fillStyle=f,fillRect(0,0,w,h))||F)(0,63,0,'#bcbbbb',78,34)(9,63,0,'#fff',60,25)(17,71)(19,51,.175)(27,31,.436)(40,13,.698)(55,0,.873)
<canvas id=c>

\$\endgroup\$
0
\$\begingroup\$

SVG, 240 238 bytes

Path data from the official spritesheet, with some minor edits for golfing.

<svg><path fill=#BCBBBB d=M26,41v-9h4v13H0V32h4v9h22z /><path fill=#F48024 d=M23,34l.8-3-16.1-3.3L7,31l16,3zM9.2,23.2l15,7,1.4-3-15-7-1.4,3zm4.2-7.4L26,26.4l2.1-2.5-12.7-10.6-2.1,2.5zM21.5,8l-2.7,2,9.9,13.3,2.7-2L21.5,8zM7,38h16v-3H7v3z >

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.