Recreate the Stack Overflow logo

Question 1

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.

Question 2

a test release of this sandboxed post.

Question 3

I am really looking forward to tikz and gnuplot answers.

Question 4

why #BCBBBB, instead of the much more superior #BBBBBB or #BCBCBC, or even #BCBBBC

Question 5

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

Question 6

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

Question 7

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.

Question 8

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.

Question 9

@DonThousand, TIO can't run HTML so a SE Snippet would be the best option.

Question 10

z1 and z2 can be renamed to z and y or something for -2 bytes

Question 11

1. space before { may be removed; 2. If multiple className have same CSS styles, try .b,.e{/* styles goes here */}

Question 12

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

Question 13

303 bytes

Question 14

301 bytes based on @ovs 's comment and your previous submission!

Question 15

And 280 bytes. (Note that there a few unprintables in the bytestrings)

Question 16

253 bytes using hexadecimal to define colors: Try it online!

Question 17

252 bytes from reordering for-loop iterators: Try it online!

Question 18

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

Question 19

Does id=a work?

Question 20

Yes it does, thanks! Have edited

Question 21

document.getElementById`a`.getContext`2d` saves 4 bytes

Question 22

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>

Question 23

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

Question 24

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>

Question 25

You could use gcc's raw-strings (?) extension to save 4 bytes... Apparently that too works without any flags :P ; Try it online!

Question 26

265 bytes using another extension... Essentially naming __VA_ARGS__ as s and using them to push out the default arguments.

Question 27

How'd you get null in TIO?

Question 28

You can copy paste null bytes on Linux and Android.

Question 29

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>

Question 30

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 >

Kirit 1512 bronze badges · Accepted Answer · 2021-05-22 14:32:05Z

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

Share

Improve this answer

edited May 23, 2021 at 14:08

hyperneutrino's user avatar

hyperneutrino ♦

42.8k5 gold badges72 silver badges227 bronze badges

answered May 22, 2021 at 14:32

Kirit's user avatar

Kirit

1512 bronze badges

\$\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\$

Rushabh Mehta
– Rushabh Mehta

2021年05月22日 14:37:13 +00:00
Commented 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
– user100690

2021年05月22日 14:40:20 +00:00
Commented 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
– Shaggy

2021年05月22日 14:58:58 +00:00
Commented 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
– pxeger

2021年05月23日 06:08:09 +00:00
Commented 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
– tsh

2021年05月24日 08:50:57 +00:00
Commented May 24, 2021 at 8:50

| Show 7 more comments

Stack Exchange Network

Recreate the Stack Overflow logo

8 Answers 8

HTML+CSS, 550 bytes

Python + Pygame, (削除) 319 (削除ここまで) (削除) 303 (削除ここまで) (削除) 273 (削除ここまで) (削除) 260 (削除ここまで) 252 bytes

JavaScript (Canvas API), (削除) 379 (削除ここまで) (削除) 341 (削除ここまで) (削除) 339 (削除ここまで) (削除) 328 (削除ここまで) 292 bytes

HTML + CSS, 21 + 232 = 243 bytes

HTML

CSS

Try it:

HTML + CSS, 21 + 195 = 216 bytes

PostScript, 209 bytes

C (gcc), (削除) 280 (削除ここまで) (削除) 278 (削除ここまで) (削除) 277 (削除ここまで) (削除) 275 (削除ここまで) (削除) 268 (削除ここまで) 265 bytes

C (gcc), boring semi-cheating version, (削除) 236 (削除ここまで) 231 bytes

HTML + JavaScript, 13 + 226 bytes = 239 bytes

SVG, (削除) 240 (削除ここまで) 238 bytes

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

Recreate the Stack Overflow logo

8 Answers 8

HTML+CSS, 550 bytes

Python + Pygame, (削除) 319 (削除ここまで) (削除) 303 (削除ここまで) (削除) 273 (削除ここまで) (削除) 260 (削除ここまで) 252 bytes

JavaScript (Canvas API), (削除) 379 (削除ここまで) (削除) 341 (削除ここまで) (削除) 339 (削除ここまで) (削除) 328 (削除ここまで) 292 bytes

HTML + CSS, 21 + 232 = 243 bytes

HTML

CSS

Try it:

HTML + CSS, 21 + 195 = 216 bytes

PostScript, 209 bytes

C (gcc), (削除) 280 (削除ここまで) (削除) 278 (削除ここまで) (削除) 277 (削除ここまで) (削除) 275 (削除ここまで) (削除) 268 (削除ここまで) 265 bytes

C (gcc), boring semi-cheating version, (削除) 236 (削除ここまで) 231 bytes

HTML + JavaScript, 13 + 226 bytes = 239 bytes

SVG, (削除) 240 (削除ここまで) 238 bytes

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related

Hot Network Questions