< Back to Frontend Friday Folks Index

Snake

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (1164 characters)
1 
<article>
2 
<div c></div>
3 
<div t></div>
4 
<div r></div>
5 
<div b></div>
6 
</article>
7 
<style>
8 
  body {
9 
    display: grid;
10 
    place-items: center;
11 
    background:
12 
      #C74E4E;
13 
  }
14 
  article {
15 
    display: grid;
16 
    grid-template-areas:
17 
      "c t"
18 
      ". r"
19 
      "b b";
20 
  }
21 
  div {
22 
    height: 25px;
23 
    width: 25px;
24 
    background:
25 
      radial-gradient(1q at -10% -10%,transparent 33px, #C74E4E 0) 50% 50% / 25px 25px,
26 
      radial-gradient(1q at 110% -10%,transparent 33px, #C74E4E 0) 50% 50% / 25px 25px,
27 
      radial-gradient(1q at 110% 110%,transparent 33px, #C74E4E 0) 50% 50% / 25px 25px,
28 
      radial-gradient(1q at -10% 110%,transparent 33px, #C74E4E 0) 50% 50% / 25px 25px,
29 
      linear-gradient(to right,transparent 0 20px, #C74E4E 0) 2.5px 2.5px / 25px 25px,
30 
      linear-gradient(#E0E246 0 20px, #C74E4E 0) 2.5px 2.5px / 25px 25px
31 
    ;
32 
  }
33 
  [c] {
34 
    grid-area: c;
35 
    height: 27q;
36 
    width: 27q;
37 
    background: radial-gradient(#FFFFFF 11q, #0000 0);
38 
  }
39 
  [t] {
40 
    justify-self: end;
41 
    grid-area: t;
42 
    width: 125;
43 
  }
44 
  [r] {
45 
    justify-self: end;
46 
    grid-area: r;
47 
    height: 75.5;
48 
  }
49 
  [b] {
50 
    grid-area: b;
51 
    width: 225;
52 
  }
53 
</style>
54

This is embarassing - I've only got this to a 99.9% solution and this is the first time we let people from JSCraftCamp into the CSS battles. The idea was to use repeating gradient images to generate the pattern of the snake. Three divs with this repeating background should work, but it ended up being not quite as perfect. At the same time, Arvind solved it with a 100% with multiple divs instead. It's definitely the simpler solution!

< Back to Frontend Friday Folks Index