This is a neat little library. It uses SVG to insert hand-drawn looking annotations to elements (probably text), like underlines and box highlights (there are 6 design options, all configurable). Super clever.
Here’s a little demo:
Aside from it just being cool, I really like how it was released. You can use it from npm. It’s ready to be used via ES6 imports. You can just use it as a <script src>
. Then, if you happen to be using a JavaScript framework, there are wrappers for React, Vue, Svelte, Angular, and Web Components. Nice.
Not all projects take that approach. Here’s another very cool project: gooey-react. It takes the gooey effect concept and essentially gives it an API via React/JSX.
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/06/Screen-Shot-2020-06-19-at-8.03.25-AM.png?fit=1024%2C540&ssl=1)
Again, this is very cool and clever and I love it — but imagine another approach instead, perhaps an HTML wrapper with data-*
attributes to control the effect. With that, wrappers could be (easily?) made in any JavaScript framework.
Direct Link to Article — Permalink
The post Rough Notation appeared first on CSS-Tricks.
source https://roughnotation.com/
No comments:
Post a Comment