Post pobrano z: Animate Calligraphy with SVG

From time to time at Stackoverflow, the question pops up whether there is an equivalent to the stroke-dashoffset technique for animating the SVG stroke that works for the fill attribute. But upon closer inspection, what the questions are really trying to ask is something like this:

I have something that is sort of a line, but because it has varying brush widths, in SVG it is defined as the fill of a path.

How can this „brush” be animated?

In short: How do you animate calligraphy?

The basic technique for this is relatively simple: draw a second (smooth) path on top of the calligraphy so that it follows the brush line and then choose the stroke width in such a way that it covers the calligraphy everywhere.

This path on top will be used as a mask for the one beneath it. Apply the stroke-dashoffset animation technique to the mask path. The result will look as if the lower path is being „written” directly on the screen in real-time.

The is a case for a mask, not a clip-path — that would not work. Clip-paths always reference the fill area of a path, but ignore the stroke.

The easiest variant is to set stroke: white for the path in the mask. Then everything outside the area painted white is hidden, and anything inside is shown without alteration.

See the Pen Writing calligraphy: basic example by ccprog (@ccprog) on CodePen.

So far, so simple. Things get tricky, however, when the calligraphic lines overlap. This is what happens in a naive implementation:

See the Pen Writing calligraphy: faulty intersection by ccprog (@ccprog) on CodePen.

At the intersection point, the mask reveals part of the crossing brush. Therefore, the calligraphy has to be cut into non-overlapping pieces. Stack them in drawing order and define separate mask paths for each one.

The most tricky part is to maintain the impression that the drawing is a single continuous stroke. If you cut a smooth path, ends will fit together as long as both path tangents have the same direction at their common point. The stroke ends are perpendicular to that, and it is essential that the cut in the calligraphic line aligns exactly. Take care all paths have consecutive directions. Animate them one after the other.

While many line animations can get by with rough math on the length for stroke-dasharray, this scenario requires accurate measurements (although small roundings shouldn’t hurt). As a reminder, you can get them in the DevTools console with:

document.querySelector('#mask1 path').getTotalLength()

See the Pen Writing calligraphy: divide up intersections by ccprog (@ccprog) on CodePen.

The „one after the other” part is slightly awkward to write in CSS. The best pattern is probably to give all partial animations the same start time and total duration, then set intermediate keyframes between the stroke-dashoffset changes.

Something like this:

@keyframes brush1 {
  0% { stroke-dashoffset: 160; } /* leave static */
  12% { stroke-dashoffset: 160; } /* start of first brush */
  44% { stroke-dashoffset: 0; }   /* end of first brush equals start of second */
  100% { stroke-dashoffset: 0; }   /* leave static */
}

@keyframes brush2 {
  0% { stroke-dashoffset: 210; } /* leave static */
  44% { stroke-dashoffset: 210; } /* start of second brush equals end of first */
  86% { stroke-dashoffset: 0; }   /* end of second brush */
  100% { stroke-dashoffset: 0; }   /* leave static */
}

Further down, you’ll see how a SMIL animation enables a more fluent and expressive way to define timing. Keeping with CSS, computations done with Sass might be pretty helpful since it can handle some math.

A comparable problem appears if the curve radius of the mask path gets smaller than the stroke width. While the animation runs through that curve, it may happen that an intermediate state looks seriously crooked.

The solution is to move the mask path out of the calligraphic curve. You only need to take care its inner edge still covers the brush.

You can even cut the mask path and misalign the ends, as long as the cutting edges fit together.

See the Pen Writing calligraphy: divide up intersections by ccprog (@ccprog) on CodePen.

And, thus, you can even draw something complex, like the Arabic calligraphy in this example:

See the Pen Tughra Mahmud II – text animation by ccprog (@ccprog) on CodePen.

The original design, the Tughra of Osmanic Sultan Mahmud II., is by an unknown 19th-century calligrapher. The vectorized version was done by Wikipedia illustrator Baba66. The animation is my attempt to visualize the position of the Arabic letters inside the drawing. It builds upon an earlier version by Baba66. Creative Commons Attribution-Share Alike 2.5.

The following code snippet shows the advanced method used to run the animations in order and in a repeatable fashion.

mask path {
  fill: none;
  stroke: white;
  stroke-width: 16;
}

.brush {
  fill: #0d33f2;
}

<mask id="mask1" maskUnits="userSpaceOnUse">
  <path stroke-dasharray="160 160" stroke-dashoffset="160" d="...">
    <!-- animation begins after document starts and repeats with a click
         on the "repeat" button -->
    <animate id="animate1" attributeName="stroke-dashoffset"
             from="160" to="0" begin="1s;repeat.click" dur="1.6s" />
  </path>
</mask>
<mask id="mask2" maskUnits="userSpaceOnUse">
  <path stroke-dasharray="350 350" stroke-dashoffset="350" d="...">
    <!-- animation begins at the end of the previous one -->
    <animate id="animate2" attributeName="stroke-dashoffset"
             from="350" to="0" begin="animate1.end" dur="3.5s" />
  </path>
</mask>
<!-- more masks... -->
<mask id="mask15" maskUnits="userSpaceOnUse">
  <path stroke-dasharray="230 230" stroke-dashoffset="230" d="...">
    <!-- insert an artificial pause between the animations, as if the
         brush had been lifted -->
    <animate id="animate15" attributeName="stroke-dashoffset"
             from="230" to="0" begin="animate14.end+0.5s" dur="2.3s" />
  </path>
</mask>

<g class="brush">
  <path id="brush1" d="...">
    <!-- The mask is only applied  after document starts/repeats and until
         the animation has run. This makes sure the brushes are visible in
         renderers that do not support SMIL -->
    <set attributeName="mask" to="url(#mask1)"
         begin="0s;repeat.click" end="animate1.end;indefinite" />
  </path>
  <path id="brush2" d="...">
    <set attributeName="mask" to="url(#mask2)"
         begin="0s;repeat.click" end="animate2.end;indefinite" />
  </path>
  <!-- more paths... -->
  <path id="brush15" d="...">
    <set attributeName="mask" to="url(#mask2)"
         begin="0s;repeat.click" end="animate15.end;indefinite" />
  </path>
</g>

In contrast to the other examples we’ve look at, this animation uses SMIL, which means it will not work in Internet Explorer and Edge.

---

This article is published in German over at Browser…​unplugged.

The post Animate Calligraphy with SVG appeared first on CSS-Tricks.

Post pobrano z: Don’t Use The Placeholder Attribute

Eric Bailey takes a hardline position on <input placeholder>.

You might be thinking, as I did: yeah, yeah I know the pitfalls. I’m capable of using placeholder responsibly. But when you look at all the negatives together:

• Can’t be automatically translated;
• Is oftentimes used in place of a label, locking out assistive technology;
• Can hide important information when content is entered;
• Can be too light-colored to be legible;
• Has limited styling options;
• May look like pre-filled information and be skipped over.

…and the fact that there are advantages to just moving whatever helper text you would want in there anyway outside the input to real markup…I’m fairly well convinced.

Direct Link to Article — Permalink

The post Don’t Use The Placeholder Attribute appeared first on CSS-Tricks.

Post pobrano z: Balancing Time

I first wrote this post four years ago. I put it on a blog that no longer exists. Funnily enough, I still refer to it myself, so I figured it might be best served in a place where other people can see it. I’ve made only a few minor tweaks to the original content. A lot about how I work has changed, but most of these pieces have not.

---

I work on many personal projects concurrently. I love doing this, as it keeps me in a constant mode of creation. At the same time, it can become a delicate balancing act. In order to keep everything moving forward, I have set up some guidelines for myself and I’m going to share them with you in this post. However, it’s more important to understand what works best for you and consider the sage words of Thich Nhat Hahn:

“Don’t follow someone else’s map.”

What works for me might not work for you. However, hearing about how other people set up their workflow might help you reconsider your own, so hopefully this is a useful mental exercise.

Organize

Every three months or so, I compile a list of all my projects. The projects that have time parameters go first in line (but do not always come first if my passion lies elsewhere). For each project, I break down the tasks I need to perform in order to get them done. I try to make each one as small and actionable as possible.

I actually write out the same list multiple ways — some digital, some paper. I find the repetition helps me reinforce and recall what my priorities are. I also find large gridded Moleskine sketchbooks useful for organizing myself. It’s important to me that they’re large enough to have enough space to write notes, draw terrible sketches, or generally spread out.

Unless they must be done in order, I often place the easiest and quickest tasks first so I can get them out of the way. I love the feeling of checking things off my list because it serves as positive re-enforcement. I make a schedule of due dates for items that have no due dates; having a specific deadline helps me push forward.

Only stop when you know what happens next

This a really simple and useful trick. If you stop when your plan is veering or meandering, then chances are that project will never see the light of day again. If you can help it, try to only stop working when you know what the next actionable item is. You will arrive back at the project with brighter eyes than before.

Of course, this one doesn’t work when you’ve smacked your head on a problem forever and ever. Sometimes you need a break and just leaving it for a little while or coming back to it the next day will help you solve it. Generally speaking though, you still still know what comes next even before you come to a solution. It’s more the feeling of malaise that I’m warning against. Stop while you still have a plan.

Even backwards work is forward progress

Allow yourself to make mistakes. Seriously, make them. I used to tell my students that it takes two bad projects to make a good one. Never compare yourself to what others show you — their final output is often the result of many failed attempts. Make a lot and then edit down. Try not to get discouraged if you spend a day or two messing up. You’ll likely learn more from those mistakes than if you had done everything perfectly. Forge ahead.

Push outside of your comfort zone, but slowly

Work on a few things that you know and understand, and a few things you don’t. We should foster personal growth in our projects, but without some semblance of comfort, it’s easy to get discouraged. Let your projects push the limits of your boundaries, but don’t go overboard. Give yourself a foundation to spring off before floating into space.

Figure out your “studio commandments”

What do you need to work? Do you need music? Do you need water? Do you need isolation? Do you work better in a cafe? Maybe you need a certain monitor. Perhaps you concentrate better if you have scheduled breaks? Do you work better if you have a snack in your bag in case you get hungry? Study yourself. Write down 10 things you need in order to be productive and try to sort them out before you get going so that you give yourself fewer excuses to stop making progress. I wrote another post about this on SuperYesMore, posted here.

Make the time

I usually break up my time so that I have certain nights, like appointments, where I work on each project. There are times, however, where you should keep on going and not worry about other outstanding projects. Sometimes working 15 or more continuous hours will gain you traction in a way that you can’t if you break it up over several weeks. However…

Break your own rules

Do you have a consistent schedule and you can’t possibly do X because of Y? Double and triple check that you aren’t setting up guidelines for yourself that give you excuses ti not get things done. Something that worked last week might not work this week, so take the time to re-evaluate your own rules. In other words: be adaptive.

Do things for other people

Make one of your projects something that benefits others. This guideline might sound strange, but if you continuously work on things just for yourself, work starts to feel a little dreary. I’m not talking about your job, either. It needn’t be overkill. Even donating a few hours here or there to people who need it will help you think more broadly about the world around you.

Bonus: If you build a community and reach the point where you’re ready to launch that donated project, you might just have other people around you who to share the excitement of a job well done.

Research is productive time

Reading about what you find interesting or doing a little bit of digging about your interests can save you time in process. Find heroes in the field in which you are working and follow them. I have so many.

Poke around at other things. Reverse engineer something. I have a giant private collection on CodePen called „To reverse engineer.” When I’m bored at an airport, or sitting on hold, or have an hour to kill, I’m usually poking around in that folder: breaking things, changing things, finding the boundaries of how everything works.

Read a book, read some docs, watch some talks, do a workshop, watch some anime, go to a museum, listen to some music with your eyes closed, play a video game. Need a starting point? CodePen Challenges are good for that. There are all kinds of things that can feed your work. All of this spent time — while it won’t make your GitHub contribution graph greener — is important for development.

Make it fun

Personal projects are fun because you want to do them, right? Enjoy yourself. I really like mimosas on the weekends so I enjoy one by my window every Saturday morning while writing code. It’s a very simple trick. It’s not drudgery; it’s pure enjoyment. I turn down other plans to do this because I love it. Find ways to make the work a reward in and of itself. Maybe you only get to listen to that one album you like while you work on a side project. Maybe you have a nice fuzzy blanket that you get to wrap yourself in while you read that programming book. Maybe you get to go to the park after you get that last component in. You know the difference between something that genuinely excites you to work or not — use this to your advantage.

I also imagine how I might feel when something is done. This particularly works when the only thing keeping me from finishing something is a bit of drudgery. I imagine it’s done and feel the little dopamine rush from accomplishing something and not letting it sit. Then I chase that feeling.

The post Balancing Time appeared first on CSS-Tricks.

Post pobrano z: Advanced Document Conversions with Filestack

You might know Filestack from being an incredible service to add file uploading, storage, and management to your own web apps.

There is another thing Filestack can do for you: convert documents into different formats.

For one thing, it can manipulate documents. Take images. Perhaps you would like to offer some image manipulation for your users uploaded images, like cropping and rotation. That’s a common feature for apps that offer avatar uploading. With Filestack, you got it.

It’s great to be able to have that kind of functionality without having to build it yourself. You almost surely aren’t in the avatar cropping business, you’re in your own unique business that just happens to have users with avatars.

I’ve said it before:

But let’s up the ante a little bit here. What if you need to get an entirely different document format out of another document? How about the hardest document format at all, feared by web developers everywhere, the Microsoft Word document format! 😱

Filestack has you covered! Say you have an invoice document created in Word and you need it as a PDF. But a perfect PDF, not some hack job conversion. And you need to do it programmatically. That’s tricky stuff, and Filestack has solved it.

Of course, it isn’t just Microsoft Word document formats, they have a whole matrix of in’s and out’s.

Just about any file format conversion you need, they got. Personally, I’m impressed by the idea that conversion between PDF and SVG maintains the vectors in both directions.

Document security is a prime concern of course and is handled through policy and signature validation.

Need a way to show users files like PDFs? Browsers can view PDFs, but only as a whole, not embedded into regular web pages. Not a problem with the document viewer!

If you think Filestack might solve some problems for your app, like transforming files, check out their getting started guide.

The post Advanced Document Conversions with Filestack appeared first on CSS-Tricks.