Colorpencils
: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);
}
: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);
}
: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);
}
: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);
}
: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);
}
: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)%;
: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)%;
: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
);
: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
);
: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);
}