Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs

Dashboard
Notifications
Mark all as read
Challenges

Recreate the Stack Overflow logo

+5
−0

Originally from Somewhere Else. I thought I'd continue making more drawing challenges here now that I discovered it.

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 as a minimum.

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.

Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

main(){printf("$");main();} (2 comments)

2 answers

+2
−0

HTML + CSS, 29 + 677 (706) bytes

HTML:

<div id="S"><div></div></div>

CSS:

#S{box-sizing:border-box;position:relative;display:block;height:192px;width:163px;}#S div{position:absolute;bottom:0;left:0;box-sizing:border-box;width:155px;height:68px;border:17px solid #bcbbbb;border-top-width:0;background:#f48024;background-clip:content-box;padding:17px;}#S::before,#S::after,#S div::before,#S div::after{content:'';width:87px;height:17px;background:#f48024;display:block;position:absolute;transform-origin:100% 100%;}#S::before{bottom:56px;left:34px;transform:rotate(12deg);}#S:after{bottom:77px;left:39px;transform:rotate(25deg);}#S div::before {bottom:79px;left:31px;transform:rotate(40deg);}#S div::after{bottom:95px;left:46px;transform:rotate(53deg);}

Since TIO.run doesn't support HTML Or CSS. You can try it in JSFiddle or try it locally.

That is really hard to do but this was a nice challenge.

Why does this post require moderator attention?
You might want to add some details to your flag.

0 comment threads

+1
−0

Vector, 893 Bytes

<vector xmlns:android="http://schemas.android.com/apk/res/android"android:width="474dp"android:height="355dp"android:viewportWidth="474" android:viewportHeight="355"><path android:fillColor="#bcbbbb"android:pathData="m187 227h59v9h-59v-9z"/><path android:fillColor="#bcbbbb"android:pathData="m187 210h7v26h-7v-26z"/><path android:fillColor="#bcbbbb"android:pathData="m239 210h7v26h-7v-26z"/><path android:fillColor="#f48024"android:pathData="m197 221h40v3h-40v-3z"/><path android:fillColor="#f48024"android:pathData="m197.4 206 39.6 9.3 -0.3 2.6 -39.6 -9.3 0.3 -2.6z"/><path android:fillColor="#f48024"android:pathData="m200.9 192 36.1 17.2 -0.8 1.8 -36.1 -17.2 0.8 -1.8z"/><path android:fillColor="#f48024"android:pathData="m207.3 176 30.7 27.4 -1.3 1.6 -30.7 -27.4 1.3 -1.6z"/><path android:fillColor="#f48024"android:pathData="m217.5 165 25.5 32.6 -1.5 1.4 -25.5 -32.6 1.5 -1.4z"/></vector>

I don't have any idea where you can use the code. I usually used the code in Android Studio XML. See the code better way..

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="474dp"
    android:height="355dp"
    android:viewportWidth="474"
    android:viewportHeight="355">
    <path
        android:fillColor="#bcbbbb"
        android:pathData="m187 227h59v9h-59v-9z" />
    <path
        android:fillColor="#bcbbbb"
        android:pathData="m187 210h7v26h-7v-26z" />
    <path
        android:fillColor="#bcbbbb"
        android:pathData="m239 210h7v26h-7v-26z" />
    <path
        android:fillColor="#f48024"
        android:pathData="m197 221h40v3h-40v-3z" />
    <path
        android:fillColor="#f48024"
        android:pathData="m197.4 206 39.6 9.3 -0.3 2.6 -39.6 -9.3 0.3 -2.6z" />
    <path
        android:fillColor="#f48024"
        android:pathData="m200.9 192 36.1 17.2 -0.8 1.8 -36.1 -17.2 0.8 -1.8z" />
    <path
        android:fillColor="#f48024"
        android:pathData="m207.3 176 30.7 27.4 -1.3 1.6 -30.7 -27.4 1.3 -1.6z" />
    <path
        android:fillColor="#f48024"
        android:pathData="m217.5 165 25.5 32.6 -1.5 1.4 -25.5 -32.6 1.5 -1.4z" />
</vector>

image

Why does this post require moderator attention?
You might want to add some details to your flag.

1 comment thread

used XML as language name since I am using XML in Android Studio (2 comments)

Sign up to answer this question »

This community is part of the Codidact network. We have other communities too — take a look!

You can also join us in chat!

Want to advertise this community? Use our templates!