Hi there,

I use Inkscape to make SVG files for scribe files.

No I want try to explain what I want to ask because it is difficult for me.

I want to make respiration curves like on a ventilator. A pressure curve, a flow curve and a volume curve
There for the lines/curves I want to make must be simultaneously been drawn. So not one after the other but in the same time.

Is there any way to achieve this in Inkscape?

What have you tried, and what was the result?

Can you provide a sketch of what you want to do?

An animated set of waveforms should be manageable in svg or gif.

Yes, it sounds like you need animation. Here's an overview of different ways to use images made in Inkscape, to create animation: https://inkscape.org/en/learn/animation/ Many ways! But Inkscape doesn't have animation by itself.

Actually as I think about it more, I'm not sure what kind of approach to take, to animate a line being drawn. For a GIF animation, I guess you'd have many frames, where in each frame, the line (or lines) are extended by a few pixels more. Oh, or maybe you could use pattern along path, and extend the path a little bit more for each frame?

For SVG animation....I really don't know how that would work. I can think of moving a box across the screen. But extending a line more and more across a screen....I can't imagine how that would work. I don't mean to say it can't work - just that I haven't learned how.

I wouldn't be surprised if there isn't some graphics program somewhere, that will do exactly what you want.

The classic (and probably simplest) way to animate a line being drawn in SVG is this:

https://css-tricks.com/svg-line-animation-works/

What exactly is scribe? Does anyone know what the OP is asking about?

Moini wrote:What exactly is scribe? Does anyone know what the OP is asking about?

Maybe this: https://www.videoscribe.co/en/

But I think the best way to do what the OP wants is to have three waveforms that are revealed by a moving mask.

So, doesn't that mean that this is a thing that needs to be set in videoscribe?

Inkscape's paths are always 'consecutive', no matter if you use subpaths, or groups, or separate paths - they always have an order - and if videoscribe uses that order for drawing a single line at once, there must be a solution in videoscribe to also draw 3 lines at once...

(or to just move whole objects from left to right on the screen, while hiding their end behind a static white rectangle)

Yeah, I don't think these whiteboard sketchy programs do more than sequentially follow path creation order, so I suggested a more conventional/archaic method of "wipe" to reveal waveforms. (if they are waveforms... Some pulmonary/respiratory plots are loops that draw simultaneously.)

https://www.youtube.com/watch?v=ybR1g_91Eb4

It probably needs to be a wipe, rather than "slide-in" to simulate a display... some systems might slide in the waveforms right to left, since we westerners have defacto standardized time charting with increasing duration in the right-hand direction.

I really like the CSS trick to make the dash-array draw the stroke... is there a way to include that CSS within the SVG?

(A working example would be greatly appreciated.)

Thanks!

I think there is one in Jabier's gallery on the website... Let me look for it... https://inkscape.org/en/~jabiertxof/%E2 ... er-logo-in

Including CSS in any SVG file is as simple as putting it in a <style> block in the XML - of course you have to add that by hand. Animations included this way will also run in the browser when an SVG image is included in an <img> tag, whereas externally referenced CSS files won't.

My tutorial series is focusing on SVG in web pages for a few months; I'll certainly be covering adding CSS, and this technique in particular, but I'm not sure yet exactly how long it will be until I get to that.

FWIW, if anyone's in an extension writing mood, this would be a great one to have. Select a path, run the extension to set the animation delay, length and whether it loops or not, and the extension would add a new <style> block with the right CSS in it.

An extension would be awesome.

Here's what I've hacked together so far to make a waveform:


Obviously fast and dirty, just cutting/pasting stuff to replace Jabier's code.

Hehe, this is a fun extension idea... I'd love to make one like that.... TD, can you send me the details of the interface options and the code that Inkscape would need to insert for a selected path? That would make it faster (but still would take long, because I'm currently in a hurry to finish another project, which will take several weeks still).

I've made a minimized version of the SVG, which doesn't need clones anymore.

https://framadrive.org/s/LWXyAT9kaFoZLGa/download

I've already made a concept of the extension now... It's going to allow multiple animations in a file (not written yet, but I know each step already)

This is so great!

I've only had a moment to look at the css animation properties, but this is helping me understand much better. =)

TD

Moini wrote:I've already made a concept of the extension now... It's going to allow multiple animations in a file (not written yet, but I know each step already)

You've probably already worked this out, but just in case...

The "obvious" method for animating more than one path is to add CSS animation properties for each one to a single <style> element. It's the way you might typically do it if you're adding the properties by hand. But it's worth remembering that you can have more than one Style element in an SVG document. A simpler approach for an extension might therefore be to add a separate <style> element for each path - that way there's less chance of accidentally trampling over any existing CSS rules. By giving each <style> element an appropriate ID or other attribute, constructed from the ID of the path its animating, it also makes it much more viable for the extension to be able to replace an existing block, rather than just appending a new one every time.

Thank you, I didn't think of using multiple style tags.

As I've been planning to try and not repeat myself too much in the styles I insert, so it can still be adapted manually without a lot of search-and-replace, I've thought of using classes for some of this, and ids for other parts. But this can still be combined with multiple style tags.

Your hint will save me some style-parsing It's quicker to just access tags/ids.

Moini wrote:Your hint will save me some style-parsing

I've been there and done that. If I can help even one person avoid having to deal with the hell that is parsing CSS, I've done some good

(One of my personal bugbears is that CSS wasn't implemented as an XML language, even though the W3C was going XML crazy at the time. If it had been, we would have a style language that could be manipulated more easily in code, and which allowed for future extensibilty without having to introduce increasingly obtuse syntax)

The scaffolding is there now, all lego bricks I need exist. Now I only need to do the actual putting together of them, to make it actually do something.

If anyone's interested, work is going to happen here:
https://gitlab.com/Moini/ink_delineator

(and if anyone could tell me if the name I chose sounds okay to a native English speaker, that would be helpful)

Moini wrote:(and if anyone could tell me if the name I chose sounds okay to a native English speaker, that would be helpful)

I'm not convinced by it. Although "delineate" might literally mean to draw or trace a line, it's not commonly used in that sense.

Perhaps "Path Animator" or "Line Animator"? I know it might be misinterpreted as causing the path to move, but every other option I've thought of is too long or too clunky - and the CSS Tricks article does refer to it as "Line Animation", after all.

Yeah, I know, I wanted to make a pun... something less ordinary. People often use these kinds of videos for explaining things, so the dual meaning would have been used. But if it doesn't work with a native speaker, there's not much sense using it

Sketchit was in use already, and I'm not familiar enough with the language to think of other, smart names.

(ghostwriter would be nice, too, but I think it's used multiple times already...)

Maybe "ghost pen" or "ghost ink pen"? ("Ink pen" kind of harkens back to when I was a child, growing up in the south, where "pen" and "pin" sound exactly alike when spoke with southern accent, and "inkpen" was commonly used for clarity.)

What about just "writer" or "handwriter"? Well, I guess it works for more than just writing text....

I could cast a 2nd vote for "path animator".

To me (native English speaker) "delineate" is more about creating a border or outline, or maybe separating groups.

Edit
I'll be glad to test it, when it's ready, as long as other software is not needed (I have totally no idea how you're doing it).