Skip to content

Instantly share code, notes, and snippets.

@seangeleno

seangeleno/css-doodle-art.markdown

Created December 25, 2023 21:25
Show Gist options
  • Save seangeleno/e16c549d3140d485dfad3efe98e70502 to your computer and use it in GitHub Desktop.
Save seangeleno/e16c549d3140d485dfad3efe98e70502 to your computer and use it in GitHub Desktop.
Download ZIP
css doodle art
Raw
index.html
<main>
<css-doodle grid="1x100" #1>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * -182deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: bean;
}
filter: drop-shadow(-1px 0 0 hsla(
calc(@index() * 1.5 - 50), 70%, 65%,
calc(@index() / 50)
));
</css-doodle>
<css-doodle grid="1x100" #2>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 181deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: clover 4;
}
filter: drop-shadow(-1px 0 0 hsla(
calc(@index() * 1.5 - 50), 70%, 65%,
calc(@index() / 50)
));
</css-doodle>
<css-doodle grid="1x50" #3>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 2%);
transform: rotate(calc(@index() * 181deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: bud 10;
}
filter: drop-shadow(-2px 0 0 hsla(
calc(@index() * 3 - 50), 70%, 65%,
calc(@index() / 50)
));
</css-doodle>
<css-doodle grid="1x100" #4>
@place-cell: center;
@size: calc(100% - @calc(@index() -1) * 1%);
transform: rotate(calc(@index() * -10deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: infinity;
}
--sw: 1px;
--sc: hsla(
calc(@index() * 2 - 50), 70%, 65%,
calc(@index() / 100)
);
filter:
drop-shadow(0 var(--sw) 0 var(--sc))
drop-shadow(0 calc(-1 * var(--sw)) 0 var(--sc))
drop-shadow(var(--sw) 0 0 var(--sc))
drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc));
</css-doodle>
<css-doodle grid="1x100" #5>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 10deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: bud 10;
}
filter: drop-shadow(-1px 0 0 hsla(
calc(@index() * 2 - 50), 70%, 65%,
calc(@index() / 50)
));
</css-doodle>
<css-doodle grid="1x100" #6>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 10deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: bean;
}
filter: drop-shadow(-1px 0 0 hsla(
calc(@index() * 2 - 50), 70%, 65%,
calc(@index() / 50)
));
</css-doodle>
<css-doodle grid="1x100" #7>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * -20deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: star;
}
filter: drop-shadow(-1px 1px 0 hsla(
calc(@index() * 1.5 - 50), 70%, 65%,
calc(@index() / 50)
));
</css-doodle>
<css-doodle grid="1x100" #8>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * -24deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: clover 5;
}
filter: drop-shadow(-1px 0 0 hsla(
calc(@index() * 1.5 - 50), 70%, 65%,
calc(@index() / 50)
));
</css-doodle>
<css-doodle grid="1x100" #9>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 260deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: hypocycloid 6;
}
filter: drop-shadow(0 -1px 0 hsla(
calc(@index() * 1.5 - 50), 70%, 65%,
calc(@index() / 50)
));
</css-doodle>
<css-doodle grid="1x100" #10>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * 45deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: bean;
}
filter: drop-shadow(-1px 0 0 hsla(
calc(@index() * 2 - 50), 70%, 65%,
calc(@index() / 50)
));
</css-doodle>
<css-doodle grid="1x25" #11>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 4%);
transform: rotate(calc(@index() * -60deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: clover 4;
}
--sw: 1px;
--sc: hsla(
calc(@index() * 8 - 50), 70%, 65%,
calc(@index() / 25)
);
filter:
drop-shadow(0 var(--sw) 0 var(--sc))
drop-shadow(0 calc(-1 * var(--sw)) 0 var(--sc))
drop-shadow(var(--sw) 0 0 var(--sc))
drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc));
</css-doodle>
<css-doodle grid="1x50" #12>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 2%);
transform: rotate(calc(@index() * 189deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: clover 5;
}
--sw: 1px;
--sc: hsla(
calc(@index() * 3 - 50), 70%, 65%,
calc(@index() / 50)
);
@even {
filter:
drop-shadow(0 var(--sw) 0 var(--sc))
drop-shadow(0 calc(-1 * var(--sw)) 0 var(--sc))
drop-shadow(var(--sw) 0 0 var(--sc))
drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc));
}
</css-doodle>
<css-doodle grid="1x50" #13>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 2%);
transform: rotate(calc(@index() * 1 * 189deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: star;
}
--sw: 1px;
--sc: hsla(
calc(@index() * 4 - 50), 70%, 65%,
calc(@index() / 50)
);
filter:
drop-shadow(0 var(--sw) 0 var(--sc))
drop-shadow(0 calc(-1 * var(--sw)) 0 var(--sc))
drop-shadow(var(--sw) 0 0 var(--sc))
drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc));
</css-doodle>
<css-doodle grid="1x100" #14>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * -270deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: star;
}
--sw: 1px;
--sc: hsla(
calc(@index() * 2 - 50), 70%, 65%,
calc(@index() / 50)
);
filter:
drop-shadow(var(--sw) 0 0 var(--sc))
drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc));
</css-doodle>
<css-doodle grid="1x20" #15>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 5%);
transform: rotate(calc(@index() * 70deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: hypocycloid 10;
}
--sw: 1px;
--sc: hsla(
calc(@index() * 10 - 50), 70%, 65%,
calc(@index() / 10)
);
filter:
drop-shadow(0 var(--sw) 0 var(--sc))
drop-shadow(0 calc(-1 * var(--sw)) 0 var(--sc))
drop-shadow(var(--sw) 0 0 var(--sc))
drop-shadow(calc(-1 * var(--sw)) 0 0 var(--sc));
</css-doodle>
<css-doodle grid="1x100" #16>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * -298deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: infinity;
}
@odd {
filter: drop-shadow(-2px 0 0 hsla(
calc(@index() * 2 - 50), 70%, 65%,
calc(@index() / 50)
));
}
</css-doodle>
<css-doodle grid="1x50" #17>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 2%);
transform: rotate(calc(@index() * -123deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: alien 1 1 2;
}
--sw: 1px;
--sc: hsla(
calc(@index() * 4 - 50), 70%, 65%,
calc(@index() / 25)
);
filter:
drop-shadow(var(--sw) 0 0 var(--sc))
drop-shadow(calc(-.5 * var(--sw)) 0 0 var(--sc));
</css-doodle>
<css-doodle grid="1x100" #18>
@place-cell: center;
@size: calc(100% - @calc(@index() - 1) * 1%);
transform: rotate(calc(@index() * -269deg));
:after {
content: '';
background: var(--doodle-bg);
@size: 100%;
@shape: alien 4 1 2;
}
filter: drop-shadow(-2px 0 0 hsla(
calc(@index() * 1.5 - 50), 70%, 65%,
calc(@index() / 50)
));
</css-doodle>
<p>
CSS Art with
<a target="_blank" href="http://yuanchuan.name/css-doodle/">
&lt;css-doodle /&gt;
</a>
</p>
</main>
Raw
scripts
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/52982/css-doodle.v0.2.1.min.js"></script>
Raw
style.css
:root {
--body-bg: #0a0c27;
--doodle-bg: #190B32;
--col: 6;
--gap: 2px;
--width: 95vw;
--size: calc((var(--width) - (var(--col) - 1) * var(--gap)) / var(--col));
}
html, body {
height: 100%;
margin: 0;
background: var(--body-bg);
}
body {
display: flex;
align-items: center;
}
main {
display: grid;
width: var(--width);
margin: auto;
background: var(--body-bg);
padding: calc(50vw - var(--width) / 2) 0;
grid-template-columns: repeat(var(--col), 1fr);
grid-gap: var(--gap);
position: relative;
padding-bottom: 5em;
}
p {
position: absolute;
bottom: 2em;
margin: 0;
width: 100%;
text-align: center;
font-family: cursive;
font-size: .9em;
line-height: 1;
color: rgba(74, 78, 113, .5);
}
p a {
text-decoration: none;
color: rgba(128, 53, 101, .8);
background: linear-gradient(to left, currentColor 50%, transparent 50%) 0 100% repeat-x;
background-size: 2px 1px;
}
p a:hover {
color: rgba(128, 53, 101, 1);
}
css-doodle {
overflow: hidden;
width: var(--size);
height: var(--size);
background: var(--doodle-bg);
}
@media screen and (max-width: 80em) {
:root { --col: 3; }
}
@media screen and (max-width: 47.5em) {
:root { --col: 2; }
}
@media screen and (max-width: 25em) {
:root { --col: 1; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment