I planned to rewrite css-doodle from scratch a long time ago, but there's barely any progress. One reason is that I wanted to make it too perfect but was stuck at the part of parsing all the time. Another reason is creating new things was more attractive to me than tools building whenever I got some time or inspiration.
I then changed my mind recently, instead of rewriting from scratch, making improvement little by little seems to be more promising. There have been many updates for the past month to give css-doodle a new look. I'd like to share those exciting new features.
Screenshot at client side has always been a hard problem if it's not SVG or canvas. Unfortunately, the most commonly used html2canvas does not work well for Web Components. For a long time I thought using a command line tool with Puppeteer was the best solution I could find.
Until I learned about the SVG <foreignObject> the other day, which can embed HTML inside it to make the whole thing a valid SVG. So I put everything of Shadow DOM generated by css-doodle into <foreignObject>, and then using canvas to get the SVG image data. Problem sovled!
Thanks to SVG, keep
viewBox to the actual element size, increase the
will get large dimensions of the image. That's extremely useful for print purpose.
.export() API uses this technique and wraps everything up, it will export css-doodle as an image right in the browser.
See example and all the options here.
Since css-doodle can be exported as an image now, why not to generate image from code on the fly inside itself?
mask all accepts image data as value.
It's just an idea at first but soon proved to be the right direction to open up a new dimension.
Issues with background patterns before
To fill as many space of background as possible, creating more DOM elements might be an option. The max number of elements css-doodle can make is 1024. Even if there's enough of them, the performance gets worse as the number of elements increases.
There also lacks a way to transform background in CSS like
patternTransform does in SVG,
which makes it difficult to create some classic patterns by tiling, like this one.
How @doodle() solves the issues
We build the tiling fragment with css-doodle as background image. Together with
only one element is needed to fill up the entire screen no mater how big it is. So it performs farely well.
@doodle() function can also be nested.
It's possible to do any kinds of transformations with
or applying any other styles to the image itself. Because everything inside
@doodle() is image.
No need to wait for the browser to support something like
Another quick example using
I'm quite excited about this function. Can't wait to build tons of background patterns using css-doodle!
This is another exciting function! It will generate a
polygon() in string used by
For example, to make a hexagon:
Rotate it by
30 degree and scale it down:
split value is big enough it approximately to be a circle.
y are defined with trigonometric functions.
t stands for
Theta, each of them equals
360 / split degree.
As you may have noticed,
2 * t,
it's much shorter this way to follow common notation in mathematics.
All the Math functions including the symbol
π can be used
You can also define variables if the expressions are too long.
I hope the above examples explain well to the
There are countless shapes waiting for you to explore! Check out more examples here.
@m function behaves like the normal
for loop but much readable, now it accepts two nested iterations.
See the demo.
By default the output values are separated with commas.
@M alias is added to make the values seperated with spaces.
There remains a lot work to be done, such as documentation, the new paser, tests and performance improvement. And I still have several new ideas that haven't been implemented yet. Only wish I had more time.
It’s easy to make your mind rigid and ignore other things when you stick to one thing for too long. Maybe it's time to try something else other than CSS. So while waiting for CSS to evolve, I'll put part of my energy to new things.
Thanks to everyone who supports css-doodle via open collective and who sent me the encouraging words.