A web component for drawing patterns with CSS.
A web component for drawing patterns with CSS. https://css-doodle.com/
Questions tagged [css-doodle]
10 questions
2
votes
3 answers
Create chart using css, css-doodle, or bootstrap
I am looking to generate a rectangle shape of 12 houses chart using CSS. The best I could use is CSS-doodle code below; even that it is nowhere perfect.
How can the example images below can be accomplished? The structure has to be a single…
Majoris
- 2,963
- 6
- 47
- 81
1
vote
0 answers
i want to include a css-doodle animation in the same line as my header text
I have a css-doodle animation which is basically a small, animated circle, which I would like to use as a replacement for the letter "O" in my website header (h1.) Therefore, the animation needs to be on the same line as my header, with header text…
purplexmoss
- 11
- 2
1
vote
1 answer
Animations only affect first element of css-doodle
I want to make random "blinking" effect when hovering over a doodle. For this i store animation name blink into a variable when user hovers over doodle container. For some reason animation applies only to the first element of the grid. Is there a…
EntityinArray
- 109
- 12
1
vote
1 answer
Making css-doodle responsive with media queries
I've set up a background for my page using css-doodle. It looks fine when on full screen but because of the way my grid is set up, the shapes get smaller along with the screen and are completely invisible on split screen or when simulating mobile…
mowie
- 193
- 1
- 9
0
votes
1 answer
Css-Doodle svg update with angular
Context : I am in typical and classic Angular project and trying to import the css doodle library.
I am currently looking to use the css-doodle library in an angular project. There is not much documentation mixing the Angular framework with the…
Interceptor
- 23
- 1
- 5
0
votes
2 answers
uses ± in one of their examples
On the css-doodle site one of their first examples uses a '±' symbol like this:
/* 10 PRINT */
@grid: 16 / 320px;
@size: 1px calc(141.4% + 1px);
transform: rotate(@p(±45deg));
background: #AEACFB;
margin: auto;
I've never seen this used before in…
Nick Roberts
- 1
- 1
0
votes
2 answers
Hexagon pattern CSS Doodle
I've got stack with this hexagonal pattern using CSS Doodle. Problem is: I want to make hexagons 1.5-2 times smaller and more symmetric (now it is like a little bit stretched by X-axis), but responsive when the viewport is changed must be saved. I…
0
votes
2 answers
React state is udpate but not in the css doodle tag
The state of the app is ok. It is updating when I change a value in the textarea I can see the changement in the state component with the react utility but the css doodle don't update. I must refresh manually to see the changes I don't understand…
Arno
- 1
- 4
0
votes
3 answers
css doodle throwing errors with angular?
https://codepen.io/tuckermassad/pen/rPYNLq
I copied the CSS doodle code from there into my angular component:
:doodle {
@grid: 10 / 100%;
}
background: @pick(
…
Ben Beri
- 1,101
- 4
- 23
- 64
0
votes
0 answers
Two infinite animations on same element only plays once each
I'm playing around with css-doodle and I'm trying to make a spiraling animation in the grid.
What I want to do is to get it to alternate between spiraling out and the in again infinitely. Currently I can only get it to play the animations once even…
mTv
- 1,074
- 17
- 28