SitePoint Wallpaper

Hi guys,

Had a minute to revive my rusty Blender skills.
Made simple dark SitePoint wallpaper:

If you like it, grab the full res image (1920x1080) here

9 Likes

XD Mind if I butt in? Here’s my stab at it. Mine isn’t that good, but it has PHP’s color as the background.

Mine isn’t good, but here it is.

(1920x1000) here

5 Likes

Here’s a SVG Responsive Version that needs vertical centering.


Source:

<?php 
    $title  = 'SitePoint SVG Logo';
    $path   = 'http://www.johns-jokes.com/downloads/sp-h/sp-background-logo/';
    $spImg  = $path ."site-point-seeklogo.com.svg";
    $spSvg  = $path ."site-point-seeklogo.com.svg";
    $spSvg  = $path ."sp-logo2.svg";
    $spLogo = file_get_contents($spSvg);

?><!DOCTYPE HTML>
<html lang="en-gb">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title> <?= $title ?> </title>
<style type="text/css">
#logo {
        text-align:center;
        background-color:#000;
}
#logo div {
        width:33%; height:33%; 
        margin:6em auto; 
        background-color:transparent;
        z-index:123;
}
.bdr {border:solid:1px #999; }
.lh6 {line-height: 600px }
.w88 {
    width:88%; height:600px; 
    margin:2em auto; 
}
</style>
</head>

<body>

  <h1> <a href="<?= $spImg ?>"> <?= $title ?> </a> </h1>

  <div id="logo" class="w88 lh6">
    <div> <?= $spLogo ?> </div>
  </div>

<div class="w88 bdr">
   <?php highlight_file(__FILE__); ?>
</div>

</body>
</html>
2 Likes

Everyone is welcome! I like your image, especially the colors.

I decided to put some more efforts into it and also try that purple background color.
So here is my second wallpaper:

7 Likes

I like your colour scheme

Here is my Version-002





SVG Source (2,007 bytes)


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" viewBox="0 0 256 307">

 <filter id="blurMe">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <filter id="dropShadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
    <feOffset dx="2" dy="4" />
    <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
  
<defs>
  <pattern id="pattern1"
    x="10" y="10" width="20" height="20"
    patternUnits="userSpaceOnUse" >
   <circle cx="10" cy="10" r="10" style="stroke: none; fill:#07508B" />
  </pattern>

  <pattern id="pattern2"
    x="10" y="10" width="20" height="20"
    patternUnits="userSpaceOnUse" >
    <circle cx="10" cy="10" r="10" style="stroke: none; fill:#E57B25" />
  </pattern>
</defs>

<path d="M249.630577,171.957624 L227.034809,150.357602 L155.609203,84.7341299 L124.817682,113.974586 C122.002785,117.804377 122.194275,122.974595 125.392151,126.55545 L153.541116,150.798028 L153.445371,150.836326 L183.700721,179.751249 C187.281576,183.734232 187.185831,189.63211 183.432636,193.461902 L101.858084,270.976875 L138.949611,306.383295 L249.630577,201.217229 C258.113564,193.136369 258.132713,180.038483 249.630577,171.919326 L249.630577,171.957624 Z"
fill="#07508B"
style="stroke:f00; fill: url(#pattern1);" 
/>
<!--
  fill-opacity="1.0" 
  stroke-opacity="1.0"
  filter="url(#dropShadow)"
  filter="url(#blurMe)"
--> 

<path d="M6.34309165,134.463968 L28.9388596,156.006544 L100.402763,221.630016 L131.175135,192.38956 C133.970883,188.598067 133.779393,183.389551 130.600667,179.808696 L102.451701,155.52782 L102.547446,155.470373 L72.2729469,126.574599 C68.73039,122.610765 68.8261348,116.693737 72.5601812,112.883095 L154.134733,35.3298237 L117.043206,0 L6.3622406,105.166066 C-2.12074687,113.246925 -2.12074687,126.36396 6.3622406,134.463968 L6.34309165,134.463968 Z" 
fill="#E57B25"
style="stroke:f00; fill: url(#pattern2);"
/>
</svg>



**HTML Source** ``` <?php declare(strict_types=1); error_reporting(-1); ini_set('display_errors', 'true'); $title = 'SitePoint SVG Logo'; $path = 'http://www.johns-jokes.com/downloads/sp-h/sp-background-logo/'; $sp000 = $path ."site-point-seeklogo.com.svg"; $spSvg = "sp-logo3.svg"; $spLogo = file_get_contents($spSvg); $fSize = filesize($spSvg); $fSize = '(' .number_format( (float) $fSize) .' bytes'; ?> <?= $title ?> body {background-color:#f0f0f0;} pre {white-space:pre-wrap;} #logo-1 { width: 11%; min-width: 110px; height:11%; min-height:110px; background-color: #000; } #logo-2 { width: 22%; min-width: 220px; height:22%; min-height:220px; background-color: lightgrey; } #logo-3 { width: 42%; min-width: 420px; height:42%; min-height:420px; background-color: gray; } #logo-1, #logo-2, #logo-3 { /* height:33%; margin:6em auto; background-color:#000; background-image: <?= $sp000 ?>; background: linear-gradient(black, white); background: radial-gradient(circle, black, white); background-color:transparent; background-origin: border-box; background-size: cover; */ background-image: url(<?= $spSvg ?>); background-repeat: no-repeat; background-position: 50% 50%; background-size: 42% 42%; padding: 16px; margin: 2em auto; } .bdr {border:solid 1px #000;} .bgs {background-color:snow;} .mga {margin:2em auto;} .ooo {border:0; margin:0; padding:0;} .tac {text-align:center;} .w88 {width:88%;}

<?= $title ?>

SVG Source: <?= $fSize ?>)
<?php highlight_file($spSvg) ?>
<dt> HTML Source </dt>
<dd> <pre class="w88 mga bdr bgs"><?php highlight_file(__FILE__) ?></pre> </dd>
```
4 Likes

Okay guys, I cannot stop, this is too fun :smiley:
I made a third one. This time real logo (am I allowed to do that?) and fictional slogan were used.

Check it out:

This one looks epic :smile:

Let’s make something real with it.

Come on, guys, if you like both this image and SitePoint then there are simple steps:

  • click and download the image (1920x1080);
  • post it to any of your social networks;
  • attach link to http://sitepoint.com;
  • Done!
3 Likes

Lol, it’s out of my area of expertise. I probably can’t post anything better. But I really like this one. Should be some kind of background for Sitepoint. I also like @John_Betong’s last one he posted. The dotted logo is pretty neat.

2 Likes

Many thanks for the kind words.

The script can be easily changed and I was hoping some artistic CSS Gurus would add their two cents of drop-shadows, blur, etc

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.