Recreate the Stack Overflow logo

Question

In response to here.

Unlike the previous one, this focuses on code-golf 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.

• Derrick Williams: a test release of this sandboxed post.
• user7467: I am really looking forward to tikz and gnuplot answers.
• user100887: why #BCBBBB, instead of the much more superior #BBBBBB or #BCBCBC, or even #BCBBBC
• Wheat Wizard: @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.

Answer 1

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

• Rushabh Mehta: 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.
• user100690: 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.
• Shaggy: @DonThousand, TIO can't run HTML so a SE Snippet would be the best option.
• pxeger: z1 and z2 can be renamed to z and y or something for -2 bytes
• tsh: 1. space before { may be removed; 2. If multiple className have same CSS styles, try .b,.e{/* styles goes here */}

Answer 2

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'70円>':A=Surface(b', ',4**8);A.fill("#f48024");s.blit(transform.rotate(A,x*5),i)
e.update()

• ovs: 303 bytes
• pan: 301 bytes based on @ovs 's comment and your previous submission!
• ovs: And 280 bytes. (Note that there a few unprintables in the bytestrings)
• Jakque: 253 bytes using hexadecimal to define colors: Try it online!
• pan: 252 bytes from reordering for-loop iterators: Try it online!

Answer 3

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

• user100690: Does id=a work?
• Sarreph: Yes it does, thanks! Have edited
• ovs: document.getElementById`a`.getContext`2d` saves 4 bytes

Answer 4

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>

Answer 5

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

Answer 6

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>

• pan: You could use gcc's raw-strings (?) extension to save 4 bytes... Apparently that too works without any flags :P ; Try it online!
• pan: 265 bytes using another extension... Essentially naming __VA_ARGS__ as s and using them to push out the default arguments.
• Makonede: How'd you get null in TIO?
• EasyasPi: You can copy paste null bytes on Linux and Android.

Answer 7

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>

Answer 8

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 >