266 lines
8.0 KiB
HTML
266 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Colorpencils - CSS Doodle</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
|
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap'>
|
|
<link rel="stylesheet" href="./style.css">
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<div class="title">Colorpencils</div>
|
|
<div class="wrapper">
|
|
<svg width="0" height="0" style="position: absolute;" viewBox="-10 -30 200 200">
|
|
<filter id="chalk" height="2" width="1.6" color-interpolation-filters="sRGB" y="-0.5" x="-0.3" filterUnits="objectBoundingBox">
|
|
<feTurbulence baseFrequency="0.9" seed="100" result="result1" numOctaves="2" type="turbulence"/>
|
|
<feDisplacementMap scale="4" yChannelSelector="G" in2="result1" xChannelSelector="R" in="SourceGraphic"/>
|
|
</filter>
|
|
</svg>
|
|
<svg width="0" height="0" style="position: absolute;" viewBox="-10 -30 200 200">
|
|
<filter id="chalk_2" height="2" width="1.6" color-interpolation-filters="sRGB" y="-0.5" x="-0.3" filterUnits="objectBoundingBox">
|
|
<feTurbulence baseFrequency="0.9" seed="115" result="result1" numOctaves="2" type="turbulence"/>
|
|
<feDisplacementMap scale="1" yChannelSelector="G" in2="result1" xChannelSelector="R" in="SourceGraphic"/>
|
|
</filter>
|
|
</svg>
|
|
<css-doodle>
|
|
:doodle {
|
|
@grid: 70x1 / 10vmin 80vmin;
|
|
overflow: hidden;
|
|
filter: url(#chalk);
|
|
}
|
|
:container {
|
|
transform: scale(1.1);
|
|
}
|
|
background-color: #EF524B;
|
|
transform-origin: 0 0;
|
|
transform: rotate(30deg) scaleX(@r(.6, 1)) scaleY(@r(.8, 1));
|
|
border-radius: @r(100%);
|
|
::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 100;
|
|
top: 0;
|
|
left: @r(0, 50)%;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform-origin: 0 0;
|
|
transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
|
|
background-color: #f9f5ed;
|
|
opacity: @r(.6, .8);
|
|
}
|
|
</css-doodle>
|
|
<css-doodle>
|
|
:doodle {
|
|
@grid: 70x1 / 10vmin 80vmin;
|
|
overflow: hidden;
|
|
filter: url(#chalk);
|
|
}
|
|
:container {
|
|
transform: scale(1.1);
|
|
}
|
|
background-color: #539cd4;
|
|
transform-origin: 0 0;
|
|
transform: rotate(30deg) scaleX(@r(.6, 1)) scaleY(@r(.8, 1));
|
|
border-radius: @r(100%);
|
|
::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 100;
|
|
top: 0;
|
|
left: @r(0, 50)%;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform-origin: 0 0;
|
|
transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
|
|
background-color: #f9f5ed;
|
|
opacity: @r(.6, .8);
|
|
}
|
|
</css-doodle>
|
|
<css-doodle>
|
|
:doodle {
|
|
@grid: 70x1 / 10vmin 80vmin;
|
|
overflow: hidden;
|
|
filter: url(#chalk);
|
|
}
|
|
:container {
|
|
transform: scale(1.1);
|
|
}
|
|
background-color: #f1ca56;
|
|
transform-origin: 0 0;
|
|
transform: rotate(30deg) scaleX(@r(.6, 1)) scaleY(@r(.8, 1));
|
|
border-radius: @r(100%);
|
|
::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 100;
|
|
top: 0;
|
|
left: @r(0, 50)%;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform-origin: 0 0;
|
|
transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
|
|
background-color: #f9f5ed;
|
|
opacity: @r(.6, .8);
|
|
}
|
|
</css-doodle>
|
|
<css-doodle>
|
|
:doodle {
|
|
@grid: 70x1 / 10vmin 80vmin;
|
|
overflow: hidden;
|
|
filter: url(#chalk);
|
|
}
|
|
:container {
|
|
transform: scale(1.1);
|
|
}
|
|
background-color: #44ad64;
|
|
transform-origin: 0 0;
|
|
transform: rotate(30deg) scaleX(@r(.6, 1)) scaleY(@r(.8, 1));
|
|
border-radius: @r(100%);
|
|
::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 100;
|
|
top: 0;
|
|
left: @r(0, 50)%;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform-origin: 0 0;
|
|
transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
|
|
background-color: #f9f5ed;
|
|
opacity: @r(.6, .8);
|
|
}
|
|
</css-doodle>
|
|
<css-doodle>
|
|
:doodle {
|
|
@grid: 70x1 / 10vmin 80vmin;
|
|
overflow: hidden;
|
|
filter: url(#chalk);
|
|
}
|
|
:container {
|
|
transform: scale(1.1);
|
|
}
|
|
background-color: #f17f84;
|
|
transform-origin: 0 0;
|
|
transform: rotate(30deg) scaleX(@r(.6, 1)) scaleY(@r(.8, 1));
|
|
border-radius: @r(100%);
|
|
::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 100;
|
|
top: 0;
|
|
left: @r(0, 50)%;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform-origin: 0 0;
|
|
transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
|
|
background-color: #f9f5ed;
|
|
opacity: @r(.6, .8);
|
|
}
|
|
</css-doodle>
|
|
<css-doodle>
|
|
:doodle {
|
|
@grid: 160x1 / 10vmin 80vmin;
|
|
overflow: hidden;
|
|
filter: url(#chalk_2);
|
|
}
|
|
transform: translate(@r(-60%, 60%), @r(-100%, 100%)) rotate(@r(-100, 100)deg);
|
|
width: @r(300, 600)%;
|
|
height: @r(4000, 8000)%;
|
|
border-left: @r(3)px solid @p(rgba(230, 75, 77, @r(.6, 1)), rgba(212, 150, 53, @r(.6, 1)));
|
|
border-bottom: @r(3)px solid @p(rgba(230, 75, 77, @r(.6, 1)), rgba(212, 150, 53, @r(.6, 1)));
|
|
border-radius: @r(50, 100)%;
|
|
</css-doodle>
|
|
<css-doodle>
|
|
:doodle {
|
|
@grid: 40x1 / 10vmin 80vmin;
|
|
overflow: hidden;
|
|
filter: url(#chalk_2);
|
|
}
|
|
transform: translate(@r(-60%, 60%), @r(-100%, 100%)) rotate(@r(-100, 100)deg);
|
|
width: @r(300, 600)%;
|
|
height: @r(1000, 2000)%;
|
|
border-left: @r(3)px solid @p(rgba(230, 75, 77, @r(.6, 1)), rgba(112, 175, 202, @r(.6, 1)));
|
|
border-bottom: @r(3)px solid @p(rgba(230, 75, 77, @r(.6, 1)), rgba(112, 175, 202, @r(.6, 1)));
|
|
border-radius: @r(50, 100)%;
|
|
</css-doodle>
|
|
<css-doodle>
|
|
:doodle {
|
|
@grid: 1x1 / 10vmin 80vmin;
|
|
overflow: hidden;
|
|
filter: url(#chalk);
|
|
}
|
|
background-image: repeating-linear-gradient(
|
|
45deg,
|
|
transparent @r(.45, .55)vmin,
|
|
#f7e63d @lr()vmin,
|
|
#f7e63d @r(.65, .75)vmin,
|
|
transparent @lr()vmin,
|
|
transparent 2.5vmin
|
|
), repeating-linear-gradient(
|
|
-35deg,
|
|
transparent @r(.45, .55)vmin,
|
|
#70afca @lr()vmin,
|
|
#70afca @r(.65, .75)vmin,
|
|
transparent @lr()vmin,
|
|
transparent 2.5vmin
|
|
);
|
|
</css-doodle>
|
|
<css-doodle>
|
|
:doodle {
|
|
@grid: 1x1 / 10vmin 80vmin;
|
|
overflow: hidden;
|
|
filter: url(#chalk);
|
|
}
|
|
background-image: repeating-linear-gradient(
|
|
30deg,
|
|
transparent @r(.45, .55)vmin,
|
|
rgba(230, 75, 77, .8) @lr()vmin,
|
|
rgba(230, 75, 77, .8) @r(.75, .85)vmin,
|
|
transparent @lr()vmin,
|
|
transparent 3.5vmin
|
|
), repeating-linear-gradient(
|
|
-30deg,
|
|
transparent @r(.55, .65)vmin,
|
|
#70afca @lr()vmin,
|
|
#70afca @r(.95, 1.05)vmin,
|
|
transparent @lr()vmin,
|
|
transparent 3.8vmin
|
|
);
|
|
</css-doodle>
|
|
<css-doodle>
|
|
:doodle {
|
|
@grid: 90x1 / 10vmin 80vmin;
|
|
overflow: hidden;
|
|
filter: url(#chalk);
|
|
}
|
|
:container {
|
|
transform: scale(1.1);
|
|
}
|
|
background-color: hsla(
|
|
calc(330 - @i() * 1), 80%, 68%, @r(.99)
|
|
);
|
|
transform-origin: 0 0;
|
|
transform: rotate(-30deg) scaleY(@r(.95, 1));
|
|
border-radius: @r(100%);
|
|
::after {
|
|
content: "";
|
|
position: absolute;
|
|
z-index: 100;
|
|
top: 0;
|
|
left: @r(0, 50)%;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform-origin: 0 0;
|
|
transform: translate(@r(-10%, 10%), @r(-10%, 10%)) scale(@r(.5));
|
|
background-color: #f9f5ed;
|
|
opacity: @r(.6, .8);
|
|
}
|
|
</css-doodle>
|
|
</div>
|
|
<!-- partial -->
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.7.0/css-doodle.min.js'></script>
|
|
<script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html> |