স্ট্যাক ওভারফ্লো লোগো তৈরি করুন [বন্ধ]


47

চ্যালেঞ্জটি স্ট্যাকওভারফ্লো লোগোর অনুরূপ একটি চিত্র তৈরি করা:

আউটপুট অবশ্যই থাকতে হবে:

  • চিত্রের আকার *৪ * 64৪ বা তার বেশি
  • একটি ধূসর | __ | আকৃতির বেস
  • একটি বাঁকা খণ্ডিত স্ট্যাক বেস থেকে আসছে। বিভাগগুলি ধূসর থেকে কমলাতে ম্লান হয়ে যাবে এবং ~ 90 ডিগ্রি ডানদিকে ঘুরবে। বিভাগগুলির সংখ্যা 5 এবং 7 এর মধ্যে হওয়া উচিত, 6 টি পছন্দসই।

দ্রষ্টব্য: বর্ণের অভাবে আসকি প্রদর্শনগুলির জন্য, ধূসর উপস্থাপন করতে '0' অক্ষর এবং কমলার জন্য '9' ব্যবহার করুন। '1' থেকে '8' এর মধ্যে শেডগুলি উপস্থাপন করবে।

সীমাবদ্ধতা:

  • আপনাকে অবশ্যই ছবিটি তৈরি করতে হবে । ছবি লোড করা বা কোড / বাইনারি এগুলি সংরক্ষণ করার অনুমতি নেই।

অতিরিক্ত নিয়ম / তথ্য:

  • চিত্রটির লোগোটির সাথে অভিন্ন হওয়ার প্রয়োজন নেই, তবে এটি অবশ্যই এটির মতো চিনতে সক্ষম হবে।
  • প্রদর্শনের পদ্ধতিটি আপনার উপর নির্ভর করে। এটি কোনও চিত্রের ফাইলে সংরক্ষণ করা বা স্ক্রিনে প্রদর্শন করা উভয়ই গ্রহণযোগ্য।

বিচার / জয়ের মানদণ্ড:

  • চিত্রের যথার্থতা হল প্রাথমিক শর্ত
  • প্রজন্মের কমনীয়তা হ'ল দ্বিতীয় শর্ত

1
লোগোটির অফিসিয়াল 16x16 পিক্সেল সংস্করণটির স্ট্যাকটিতে কেবল মাত্র 4 টি বার রয়েছে।
ইলমারি করোনেন

3
আমি 2012 এ কেমন ছিল তা নিশ্চিত নই, তবে আজকের মান অনুসারে এটি একটি উদ্দেশ্যমূলক বিজয়ী মানদণ্ড নয়। আমার ধারণা সর্বোত্তম ফিক্স (যা বিজয়ীর উপরও প্রভাব ফেলবে না), এটি এটিকে জনপ্রিয়তা-প্রতিযোগিতায় পরিণত করা এবং বিচারের মানদণ্ডকে ভোটের নির্দেশিকাগুলিতে স্থানান্তরিত করা হবে।
মার্টিন ইন্ডার

@ ইলমারিকারোনেন আমি সিক্স গণনা করি। এছাড়াও, এটি 32x32px।
mbomb007

উত্তর:


61

ম্যাথামেটিকাল

Graphics[{
   Gray, Rectangle[{0, 0}, {78, 50}],
   White, Rectangle[{9, 9}, {69, 50}]}
  ~Join~
  Table[{
    Blend[{Gray, Orange}, x/5],
    Rotate[
     Translate[
      Rectangle[{16, 16}, {61, 25}],
      {0.25x^3 + 0.6x^2 - 0.4x, -0.53x^3 + 3.26x^2 + 12x}],
     -0.05x^2 - 0.04x]},
   {x, 0, 5}]]

এটি কোড গল্ফ নয় বুঝতে পেরে আমি আমার উত্তরটি প্রিটিটিফ করার সিদ্ধান্ত নিয়েছি। উপস!

স্ক্রীনশট:

ওভারফ্লো লোগো স্ট্যাক করুন

সম্পর্কিত খবরে, আমি স্ট্যাক ওভারফ্লো লোগোটিকে দেখতে দেখতে কী বলে তৈরি করেছি ... ভবিষ্যত :

এখন ই ভবিষ্যত

যদি কেউ এটির সাথে চারপাশে খেলতে চান তবে কোডটি এখানে রয়েছে (জঞ্জালের জন্য দুঃখিত):

Graphics3D[{EdgeForm[],
   Opacity[1],
   RGBColor[0.2, 0.2, 0.2], Cuboid[{0, 0, 0}, {78, 4, 50}],
   Cuboid[{0, 4, 0}, {4, 45, 50}],
    Cuboid[{74, 4, 0}, {78, 45, 50}],
   Opacity[1]}
  ~Join~
  Fold[Join, {},
   Table[{Hue[0.15 - i/5/12, i/3, 1],
     Translate[
      Rotate[
       Scale[Cuboid[{16, 16, 16}, {61, 25, 25}], {1, .3, .3}],
       (-.05 ((i*2 - 1.5)*1.25)^2 - .04 ((i*2)*1.2)), {0.3, 
        0.8, -1}, {(16 + 61)/2, (16 + 25)/2, (16 + 25)/2}],
      {-((i*2)^2 - (i*2)*4)/2, (i*2)^2*3/2, 0}]},
    {i, 0, 4.5, 0.05}]], Lighting -> "Neutral", Axes -> False, 
 Background -> White, Boxed -> False]

দুর্দান্ত, তবে আনুপাতিক শীট - বাক্সটি আরও কম দেখায়, কম, কম ঘন সীমানাযুক্ত একটি ছোট বাক্স সহ।
ব্যবহারকারী অজানা

1
খুব সুন্দর! এই সম্প্রদায়টি আপনার দক্ষতা ব্যবহার করতে পারে ;-) mathematica.stackexchange.com
Vitaliy Kaurov

হেহেOut[404]
জে আটকিন

22

জাভাস্ক্রিপ্ট (650)

আমি একটি কুইন লিখেছি যা ফাংশনের অক্ষরগুলি পড়ে এবং 0-9 থেকে একটি নম্বর দিয়ে ফাঁকা স্থান অক্ষরগুলিকে প্রতিস্থাপন করে।

(function a(){
l=[
                   1,
                    1,
            11,      1,
             11,     1,
               11,    1,
       11,      11,   1,
         11,      11,
           11,
   11,       1111,
     1111,
0,       11111111, 0,
0, 11,             0,
0,   111111111111, 0,
0,                 0,
0, 11111111111111, 0,
0,                 0,
000000000000000000000]

b=a.toString().split("[")[1].split("]")[0].split(""),i=-1
document.getElementById("output").innerHTML=
b.map(function(c){
++i
if(c==" "||c=="\n")return c
if(c!=0)c=9-Math.floor((i/b.length)*10)
if(b[i-1]=="0")c=0
return"<span class='c"+c+"'>"+c+"</span>"
}).join("")
})()

এটি এই ASCII শিল্পকে আউটপুট করে:

                   99
                    88
            888      88
             777     77
               766    66
       666      666   66
         555      555
           555
   444       44444
     44444
00       333333333 00
00 333             00
00   2222222222222 00
00                 00
00 111111111111111 00
00                 00
000000000000000000000

আপনি যদি পছন্দ করেন তবে এটি কোনও সিএসএস স্টাইলশিট দিয়ে রঙিন হতে পারে

  span{
    font-weight: bold;
  }
  .c0, .c1{
    color: #222;
  }
  .c2{
    color: #765;
  }
  .c3{
    color: #976;
  }
  .c4{
    color: #A64;
  }
  .c6, .c5{
    color: #D51;
  }
  .c8, .c9, .c7{
    color: #F60;
  }

আপনি এটি জেএসবিনে কর্মে দেখতে পাচ্ছেন

লিঙ্কটি মারা যাওয়ার ক্ষেত্রে এখানে একটি স্ক্রিনশট রয়েছে:

এখানে চিত্র বর্ণনা লিখুন


22

এসভিজি (347 টি অক্ষর)

ভরাটের পরিবর্তে স্ট্রোক সহ স্যার_লাগসালোটের সংস্করণ ভিত্তিক । কয়েকটি অক্ষর শেভ করার পাশাপাশি কোডটি সহজ এবং আউটপুটটি আরও ভাল আকারে দেখায়।

<svg width="66" height="85" xmlns="http://www.w3.org/2000/svg">
<g stroke-width="7" fill="none">
<path stroke="gray" d="m4,50v31h49V50M12,69h33"/>
<path stroke="#a86" d="m12,57 33,3"/>
<path stroke="#b95" d="m14,42 32,9"/>
<path stroke="#c82" d="m22,24 27,19"/>
<path stroke="#e80" d="m37,9 18,27"/>
<path stroke="#f71" d="m58,1 4,32"/>
</g></svg>

এসভিজি চিত্রের লিঙ্ক

পিএনজি-তে রেন্ডার করা হয়েছে (প্রাকৃতিক আকারে এবং এক্স 2 এবং এক্স 3 কে ছোট করে দেওয়া হয়েছে):

প্রাকৃতিক আকার     X2 আপকে ছোট করে দেওয়া হয়েছে     স্কেল আপ এক্স 3

সম্পাদনা: অবশেষে অফ-বাই-ওয়ান ত্রুটি সংশোধন করতে পারে যা বাক্সের পক্ষগুলি লাইন না করায়। লাইন বেধ এবং শেষ পয়েন্ট প্লেসমেন্টটি কিছুটা টুইক করেছে এবং নীচে এবং ডান প্রান্তগুলি আরও শক্ত করে আঁকাগুলি এড়াতে সুস্পষ্ট প্রস্থ এবং উচ্চতা যুক্ত করেছে। এটি এখন সরকারী লোগোটির অনেক কাছাকাছি দেখায় ।


18

হাস্কেল ডাব্লু / গ্লস

import Graphics.Gloss

picture = translate 0 (-50) $ pictures [stack, base 150 60 20]

stack = translate 0 30 $ pictures [item n | n <- [0..5]]

item n = bend 200 (-10*n) $ color (fade grey orange (n/5)) box
  where box = rectangleSolid 110 20

base width height thickness = color grey $ pictures [left, right, bottom]
  where bottom = rectangleSolid width thickness
        left = translate (width / 2) (height / 2) side
        right = translate (-width / 2) (height / 2) side

        side = rectangleSolid thickness (height + thickness)

bend radius angle = translate radius 0 . rotate angle . translate (-radius) 0

fade from to alpha = mixColors (1-alpha) alpha from to

grey = greyN 0.5

স্ক্রিনশট

কোডটি এটি কার্যত দেখতে এখানে আটকান , বা এটি সংকলন করতে নিম্নলিখিত লাইন যুক্ত করুন ( গ্লস প্রয়োজন )।

main = display (InWindow "Stack Overflow" (512, 512) (10, 10)) white picture

15

এসভিজি (৩৩৩ টি অক্ষর)

আমি একটি এসভিজি চিত্র তৈরি করেছি যা 333 অক্ষরে লোগোটির 67x68 সংস্করণ উত্পন্ন করে:

<svg xmlns="http://www.w3.org/2000/svg">
<path fill="grey" d="m0,53v34h53V53h-5v29H5V53M9,69h33v6H11v-6"/>
<path fill="#a86" d="m12,56 31,3-1,6-31-3"/>
<path fill="#b95" d="m15,41 31,9-2,6-31-8"/>
<path fill="#c82" d="m22,25 28,17-3,5-28-17"/>
<path fill="#e80" d="m38,8 19,27-5,4-19-27"/>
<path fill="#f71" d="m62,0 5,32-6,1-5-32"/>
</svg>

ছোট এসভিজি চিত্রের
জন্য লিঙ্ক বড় এসভিজি চিত্রের জন্য লিঙ্ক

উদাহরণ


আমি ভাবছি যদি স্ট্রোক করা পথগুলি আরও ছোট করা না হয়।
ইলমারি করোনেন

13

ক্ষীর

টিকজেড এবং পিজিএফ প্যাকেজগুলি ব্যবহার করা হচ্ছে।

\documentclass{minimal}
\usepackage{tikz}
\pagestyle{empty}
\begin{document}
\xdefinecolor{col1}{RGB}{167, 149, 116}
\xdefinecolor{col2}{RGB}{189, 153, 87}
\xdefinecolor{col3}{RGB}{211, 157, 57}
\xdefinecolor{col4}{RGB}{233, 161, 28}
\xdefinecolor{col5}{RGB}{255, 165, 0}
\begin{tikzpicture}
\draw[gray, fill=gray] (-1,0.5) -- (-1,0) -- (0,0) -- (0,0.5) -- (-0.1,0.5) -- (-0.1,0.1) -- (-0.9,0.1) -- (-0.9,0.5) -- (-1,0.5);
\draw[gray, fill=gray] (-0.8,0.3) rectangle(-0.2,0.2); 
\draw[col1, fill=col1, xshift=0.3pt, yshift=3pt,  rotate around={-15:(0.2,0.2)}] (-0.8,0.3) rectangle(-0.2,0.2); 
\draw[col2, fill=col2, xshift=0.5pt, yshift=6pt,  rotate around={-30:(0.2,0.2)}] (-0.8,0.3) rectangle(-0.2,0.2); 
\draw[col3, fill=col3, xshift=0.8pt, yshift=9pt,  rotate around={-45:(0.2,0.2)}] (-0.8,0.3) rectangle(-0.2,0.2); 
\draw[col4, fill=col4, xshift=1.3pt, yshift=12pt, rotate around={-60:(0.2,0.2)}] (-0.8,0.3) rectangle(-0.2,0.2); 
\draw[col5, fill=col5, xshift=2.1pt, yshift=14pt, rotate around={-75:(0.2,0.2)}] (-0.8,0.3) rectangle(-0.2,0.2); 
\end{tikzpicture}
\end{document}

ল্যাটেক্স লোগো


9

সিএসএস + জাভাস্ক্রিপ্ট (এইচটিএমএল ডিভি ভিত্তিক)

* { padding: 0; margin: 0; }

div { position: absolute; width: 100px; height: 20px; background-color: red; }
.s { background-color: gray; }
#d0,#d2 { width: 20px; height: 70px; }
#d0 { left: 20px; top: 160px; }
#d1 { left: 20px; top: 230px; width: 160px; }
#d2 { left: 160px; top: 160px; }

.e { -moz-transform-origin: 200% center; -ms-transform-origin: 200% center; -o-transform-origin: 200% center; -webkit-transform-origin: 200% center; transform-origin: 200% center; }
$(document).ready(function() {
    for (var i = 0; i < 9; i++)
        $('body').append($('<div/>').attr('id', 'd' + i).attr('class', i < 3 ? 's' : 'e'))

    $('.e').each(function(i) {
        $(this).css({
            left: (50 - i * 3) + 'px',
            top: '200px',
            backgroundColor: '#' + (i + 10).toString(16) + 'a' + (10 - i * 2).toString(16),
            '-moz-transform': 'rotate(' + (i * 15) + 'deg)',
            '-ms-transform': 'rotate(' + (i * 15) + 'deg)',
            '-o-transform': 'rotate(' + (i * 15) + 'deg)',
            '-webkit-transform': 'rotate(' + (i * 15) + 'deg)',
            transform: 'rotate(' + (i * 15) + 'deg)'
        });
    });
});

নমুনা রান: http://jsfiddle.net/ryzBx/

নমুনা রেন্ডারিং (ফায়ারফক্স 14):
স্ট্যাক এক্সচেঞ্জ লোগো


8

জাভাস্ক্রিপ্ট ( 814 টি অক্ষর প্রচুর )

window.onload = function() {
                var canvas = document.getElementById("cgCanvas");
                var context = canvas.getContext("2d");
                context.moveTo(60,140);
                context.lineTo(60,190);
                context.moveTo(57.5,190);
                context.lineTo(137.5,190);
                context.moveTo(135,140);
                context.lineTo(135,190);
                context.lineWidth = 5;
                context.strokeStyle = "rgb(94,94,94)";
                context.stroke();
                for(i=0;i<6;i++) {
                    context.beginPath();
                    var b=1;
                    var a=1;
                    if(i==5) {
                        a=3;
                        b=1.3;
                    }
                    else if(i==4)
                        a==2;
                    x=94+i*9;
                    y=94-i*5;
                    z=95-i*19;
                    context.moveTo(122.5+i*i,180-i*15);
                    context.lineTo(72.5+i*i+i*i*b,180-i*15-i*i*i+i*i*a);
                    context.lineWidth = 8;
                    context.strokeStyle = 'rgb('+ x +','+ y +','+ z +')';
                    context.stroke();
                }
            };

এটি সুন্দর নয় তবে কিছুটা এসও লোগোর মতো দেখাচ্ছে। এখানে টেস্ট বেহালার - http://jsfiddle.net/elssar/jcYtg/2/


আপনি যদি প্রসঙ্গের নামটিকে আরও সাধারণ কিছুতে পরিবর্তন করেন তবে এটি কিছুটা নিচে যেতে পারে।
মিঃজান্ডার

আরে, আমি আপনার জন্য এটি কিছুটা কমিয়ে দিয়েছি, এটি এখন 9৪৯ টি চিচে রয়েছে : jsfiddle.net/jcYtg/5 - আমি এই পদ্ধতিটি পছন্দ করেছি! খুব সুন্দর.
আলফা

706 এখন: jsfiddle.net/jcYtg/12 - আমি বা আরজিবি'র পুনরাবৃত্তি পরিবর্তন করতে চেয়েছি কিন্তু কেবল এটির সাথে গণ্ডগোল করেছে, সুতরাং সেই অংশটি পরিবর্তন হয়নি।
আলফা

3
(স্প্যামের জন্য দুঃখিত, এটিই শেষ, আমি প্রতিশ্রুতি দিই)। হ্রাস করা হয়েছে : jsfiddle.net/jcYtg/13 501 অক্ষর।
আলফা

1
ধন্যবাদ @ আলফা কোডটি গল্ফ করার অভ্যস্ত হতে কিছুটা সময় নিতে চলেছে, বেশিরভাগ সময় গল্ফযুক্ত কোডটি দেখে আমাকে যে ব্যক্তি এটি লিখেছিল তাকে হত্যা করতে চাইছে (দুঃখিত)। পদ্ধতির বিষয়ে প্রাথমিকভাবে পরীক্ষা এবং ত্রুটি ছিল কারণ আমি গণিত করতে খুব অলস ছিলাম। স্ট্যাকের অবস্থান পাওয়ার জন্য কেন্দ্রীক বৃত্ত বা আরও ভাল কেন্দ্রীক উপবৃত্তগুলি ব্যবহার করা আরও ভাল।
এলসার

6

সি # / GDI এর + +

আমি যখন অবাক হই তখন আমি লক্ষ্য করি যে এখানে কোনও সি # উত্তর নেই। সুতরাং এখানে একটি। লোগো আঁকার এটি কোনও দক্ষ পদ্ধতি নয় এবং এটি কোনও সংক্ষিপ্ত সমাধানও নয়। তবে প্রয়োজনীয় আউটপুট পায়।

উত্পন্ন লোগো এবং মূল স্ট্যাক ওভারফ্লো লোগো

তুমি আমার ব্লগ পোস্টে চেক আউট করতে পারেন সম্পূর্ণ পরিশ্রমী সমাধান → ডাউনলোড করতে http://guganeshan.com/blog/stackoverflow-logo-using-csharp-and-gdi.html

public class SOLogo
{
    private float _rotateValue;
    private float _xValueForTransformation;
    private float _yValueForTransformation;

    int _containerWidth;
    int _containerHeight;
    float _lineThickness;
    int _paddingWithinContainer;
    int _elementStartY;

    public SOLogo(float rotateValue, float xValueForTransformation, float yValueForTransformation)
    {
        // Values used to position and rotate the overflowing elements.
        _rotateValue = rotateValue;
        _xValueForTransformation  = xValueForTransformation;
        _yValueForTransformation = yValueForTransformation;
    }

    public void DrawLogo(Graphics g, int startX, int startY)
    {
        // Backup the current smoothing mode to apply later.
        var SmoothingMoodBackup = g.SmoothingMode;
        g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;

        // Values for the container box.
        _containerWidth = 94;
        _containerHeight = 61;
        _lineThickness = 11f;
        _paddingWithinContainer = 15;

        // Y value of the position where the 1st overflowing element starts.
        _elementStartY = 0;

        // Starting point of the 'container' - Top point of the line on the left-> |_|
        Point pointContainerLineStart = new Point(startX, startY);

        Point pointContainer1stLineEnd = new Point(pointContainerLineStart.X, pointContainerLineStart.Y); // Start with the previous
        pointContainer1stLineEnd.Offset(0, _containerHeight); // Offset "Y"

        Point pointContainer2ndLineEnd = new Point(pointContainer1stLineEnd.X, pointContainer1stLineEnd.Y); // Start with the previous
        pointContainer2ndLineEnd.Offset(_containerWidth, 0); // Offset "X"

        Point pointContainer3rdLineEnd = new Point(pointContainer2ndLineEnd.X, pointContainer2ndLineEnd.Y); // Start with the previous
        pointContainer3rdLineEnd.Offset(0, 0 - _containerHeight); // Offset "Y" (negative)

        GraphicsPath pathOfBox = new GraphicsPath();
        pathOfBox.AddLine(pointContainerLineStart, pointContainer1stLineEnd); // Left line. Top to bottom
        pathOfBox.AddLine(pointContainer1stLineEnd, pointContainer2ndLineEnd); // Bottom line. Left to right
        pathOfBox.AddLine(pointContainer2ndLineEnd, pointContainer3rdLineEnd); // Right line. Bottom to top

        Pen thickPen = new Pen(Brushes.Gray, _lineThickness);
        Color elementColor = Color.FromKnownColor(KnownColor.Gray);

        // Draw the 'container'
        g.DrawPath(thickPen, pathOfBox);

        // Increase the size of the pen to draw the elements inside the container
        thickPen.Width = _lineThickness += 3;
        // "Y" - position of the 1st element
        _elementStartY = startY + 38;

        // The following section draws the overflowing elements

        Point pointElement1Left = new Point(startX + _paddingWithinContainer, _elementStartY);
        Point pointElement1Right = new Point((startX + _containerWidth) - _paddingWithinContainer, _elementStartY);

        // Six colors of the overflowing elements
        var colors = new Color[] {
            Color.Gray,                 Color.FromArgb(-6911615),   Color.FromArgb(-4417693),
            Color.FromArgb(-2848227),   Color.FromArgb(-554957),    Color.FromArgb(-688847)
        };

        for (int x = 0; x < 6; x++)
        {
            thickPen.Color = colors[x];
            pointElement1Left = new Point(startX + _paddingWithinContainer, _elementStartY);
            pointElement1Right = new Point((startX + _containerWidth) - _paddingWithinContainer, _elementStartY);
            g.DrawLine(thickPen, pointElement1Left, pointElement1Right);
            g.RotateTransform(_rotateValue);
            g.TranslateTransform(_xValueForTransformation, _yValueForTransformation);
        }

        pathOfBox.Dispose();
        thickPen.Dispose();

        // Restore the smoothing mood that was backed up before we started this method.
        g.SmoothingMode = SmoothingMoodBackup;
    }
}

6

আমি জানি আমি সুপার দেরী খেলা করার জন্য এখানে, কিন্তু আমি কোন এক এই একটি CSS এর সংস্করণ করেনি বিস্মিত ছিল। অক্ষর গণনা (1,195) এর ক্ষেত্রে এটি অবশ্যই প্রতিযোগিতামূলক উত্তর নয় তবে চূড়ান্ত পণ্যটি বেশ নির্ভুল।

সাফারি (9.0) এ লিখিত এবং ক্রোম (45.0.2454.93) এবং ফায়ারফক্স (40.0.3) এ পরীক্ষিত।

body {
    padding: 100px 40px;
}
.base {
    width: 60px;
    height: 40px;
    border: 8px solid #818286;
    border-top: none;
}
.container {
    bottom: 28px;
    left: 6px;
    position: relative;
}
.line {
    width: 48px;
    height: 10px;
    position: relative;
}
.line:nth-child(1n) {
    background: #ff7a15;
    bottom: 23px;
    left: 45px;
    transform: rotate(80deg)
}
.line:nth-child(2n) {
    background: #ff8907;
    bottom: 25px;
    left: 25px;
    transform: rotate(55deg)
}
.line:nth-child(3n) {
    background: #d48c28;
    bottom: 19px;
    left: 10px;
    transform: rotate(30deg)
}
.line:nth-child(4n) {
    background: #c19653;
    bottom: 12px;
    left: 3px;
    transform: rotate(16deg)
}
.line:nth-child(5n) {
    background: #a78b6e;
    bottom: 5px;
    left: 0;
    transform: rotate(5deg);
}
.line:nth-child(6n) {
    background: #818286;
    bottom: 0;
    left: 0;
    transform: rotate(0deg);
}
<div class="base">
    <div class="container">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
    </div>
</div>


4

পিএইচপি ডাব্লু / জিডি

<?php
$img = imagecreatetruecolor(67,68);
$white = imagecolorallocate($img,0xff,0xff,0xff);
$grey = imagecolorallocate($img,0x80,0x81,0x85);
$orng1 = imagecolorallocate($img,0xa6,0x8a,0x6e);
$orng2 = imagecolorallocate($img,0xc0,0x95,0x53);
$orng3 = imagecolorallocate($img,0xd3,0x8b,0x28);
$orng4 = imagecolorallocate($img,0xfd,0x88,0x08);
$orng5 = imagecolorallocate($img,0xfe,0x7a,0x15);
imagefilledrectangle($img,0,0,67,68,$white);

//container
imagefilledrectangle($img,7,41,10,65,$grey);
imagefilledrectangle($img,10,61,44,65,$grey);
imagefilledrectangle($img,41,61,44,41,$grey);

// stack levels
imagefilledrectangle($img,14,52,37,56,$grey); //1st level
imagefilledpolygon($img,array(14,42,14,47,37,49,37,44),4,$orng1);
imagefilledpolygon($img,array(16,32,15,36,37,42,38,38),4,$orng2);
imagefilledpolygon($img,array(22,21,20,24,39,35,41,32),4,$orng3);
imagefilledpolygon($img,array(33,10,31,12,43,30,45,28),4,$orng4);
imagefilledpolygon($img,array(45,5,48,5,51,27,48,27),4,$orng5);
header("Content-type: image/png");
imagepng($img);
?>

উদাহরণ: স্ট্যাকওভারফ্লো লোগো পিএইচপি এ টানা


1
: পরিবর্তনশীল ফাংশন ব্যবহার করুন $a = 'imagecolorallocate';$r = 'imagefilledrectangle'; $p = 'imagefilledpolygon';আপনি কোড যথেষ্ট কমাতে পারবেন যা: $p(...);$p(...);...
শিওনক্রস


4

জাভাস্ক্রিপ্ট + jQuery এবং এসভিজি - 250

$('body').html('<svg><g stroke-width="6" fill="none"$grey" d="m3,51v31h47V53M10,70h33"/$#a86" d="m10,57 33,3"/$#b95" d="m13,42 31,9"/$#c82" d="m20,25 28,17"/$#e80" d="m34,9 19,27"/$#f71" d="m56,1 4,32"/></g></svg>'.replace(/\$/g, '><path stroke="'))​

আমি ইলমারি করোননের এসভিজি নিয়েছিলাম এবং জাভাস্ক্রিপ্টের ওভারহেড এমনকি কার্যকরভাবে এটি সংক্ষিপ্ত করে $এর প্রতিস্থাপন করতে জাভাস্ক্রিপ্ট ব্যবহার ><path stroke="করেছি।


3

আর

সবচেয়ে সুন্দর সমাধান নয় তবে এটি অনুরোধ করা আউটপুট ফেরত দেয়।

library(grid)
my.palette <- colorRampPalette(c("grey57","orange"))(6)
png("StackOverflow_Logo.png", width=300, height=300)
pushViewport(viewport(x=0.5, y=0.5, w=unit(100, "points"), h=unit(100, "points")))
grid.polygon(x=unit(c(10, 0, 0, 100, 100, 90, 90, 10),"points"), 
             y=unit(c(50, 50, 0, 0, 50, 50, 10, 10),"points"),
             default.units="points", gp=gpar(col = "grey57", fill="grey57"))
grid.rect(vp=viewport(x=0.5, y=0.3, w=unit(70, "points"), h=unit(10, "points")), 
          gp=gpar(col = "grey57", fill="grey57"))

grid.rect(vp=viewport(x=0.52, y=0.52, w=unit(70, "points"), h=unit(10, "points"), angle=-10), 
          gp=gpar(col = my.palette[2], fill=my.palette[2]))

grid.rect(vp=viewport(x=0.58, y=0.78, w=unit(70, "points"), h=unit(10, "points"), angle=-20), 
          gp=gpar(col = my.palette[3], fill=my.palette[3]))

grid.rect(vp=viewport(x=0.70, y=1.05, w=unit(70, "points"), h=unit(10, "points"), angle=-35), 
          gp=gpar(col = my.palette[4], fill=my.palette[4]))

grid.rect(vp=viewport(x=0.90, y=1.25, w=unit(70, "points"), h=unit(10, "points"), angle=-55), 
          gp=gpar(col = my.palette[5], fill=my.palette[5]))

grid.rect(vp=viewport(x=1.15, y=1.38, w=unit(70, "points"), h=unit(10, "points"), angle=-70), 
          gp=gpar(col = my.palette[6], fill=my.palette[6]))
dev.off() 

লোগো


2

scala

object LogoCanvas extends javax.swing.JPanel {

  import java.awt._

    def viereck (g: Graphics, points: scala.List[(Int, Int)]) = {
      val polygon = new Polygon ()
      points.foreach (p => polygon.addPoint (10 * p._1, 400 - 10 * p._2))
      g.fillPolygon (polygon)           
    }

  override def paint (g: Graphics) = {
    g.setColor (Color.GRAY);
    // ablage
    viereck (g, scala.List ((2, 1), (2, 11), (3, 11), (3, 1)))
    viereck (g, scala.List ((2, 1), (2, 2), (23, 2), (23, 1)))
    viereck (g, scala.List ((23, 1), (23, 11), (24, 11), (24, 1)))
    // blaetter flach
    viereck (g, scala.List ((5, 5), (5, 6), (21, 6), (21, 5)))
    viereck (g, scala.List ((5, 9), (5, 10), (21, 10), (21, 9)))
    // blaetter schraeg
    g.setColor (Color.LIGHT_GRAY);
    viereck (g, scala.List ((7, 22), (8, 23), (21, 13), (21, 12)))
    viereck (g, scala.List ((12, 28), (13, 29), (22, 15), (21, 14)))
    // blaetter steil
    g.setColor (Color.ORANGE);
    viereck (g, scala.List ((18, 34), (19, 34), (23, 17), (22, 16)))
    viereck (g, scala.List ((24, 36), (25, 36), (25, 17), (24, 17)))
  }

  import javax.swing._

  def main (args: Array [String]) : Unit = {
    val jf = new JFrame ("Stackoverflow!")  
    jf.setSize (350, 520)
    jf.setLocationRelativeTo (null)
    jf.setBackground (Color.BLACK)
    jf.add (LogoCanvas)
    jf.setDefaultCloseOperation (WindowConstants.EXIT_ON_CLOSE) 
    jf.setVisible (true)            
  }
}

কালো পটভূমিতে স্ট্যাকওভারফ্লো লোগো


1

জাভাস্ক্রিপ্ট

var c=document.getElementById('c'),x=c.getContext('2d'),i=0
c.width=c.height=140
x.scale(5,5)
x.fillStyle="#999"
x.fillRect(3,26,14,2)
x.fillRect(1,18,2,10)
x.fillRect(17,18,2,10)
for(;i<6;){x.fillStyle="#"+"999a96b95c94d93f90".substr(i*3,3)
x.save()
x.translate(i*i/2,22-i*6)
x.rotate(i++/5)
x.fillRect(5,0,10,2)
x.restore()}
<canvas id="c"></canvas>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.