SVG animation with JavaScript

[Mohamed Amin]

Hello, 

Is it possible in TW5 to do a SVG animation like this : https://codepen.io/chrisgannon/pen/qdwdrR?

I tried to use the tag "$:/tags/RawMarkup" with the JS code, but it insert the code in the "html Header" section (the code need to be inside the "html Body" section)

Regards

[Mohamed Amin]

Also I tried to use "$:/tags/RawMarkupWikified/BottomBody", but it remove the "<script>" tag from the code (the "Wikified" part in the name seems to work :) )

[Thomas Elmiger]

Hi Mohamed

It might not be possible to use Javascript in order to manipulate appearance (of anything, not only SVG) within TiddlyWiki – at least not in a convenient way.

On the other hand: It should be possible to animate SVG without JS. I do not fully understand this (yet) myself, but as an example you can copy-paste the code below into my SVG editor on https://tid.li/tw5/apps/svg.html

Have fun!

Thomas

<defs xmlns="http://www.w3.org/2000/svg">
    <marker id="Arrow" viewBox="0 0 20 20" refX="4" refY="5" markerUnits="strokeWidth" markerWidth="2" markerHeight="2" opacity="0.75" orient="auto">
      <path d="M 0 0 L 10 5 0 10 3 5 z" fill="#8a0" id="Q" stroke="#bf2" stroke-width="1" stroke-linejoin="round">
      <animate attributeName="d" id="QQ" dur="5s" repeatCount="indefinite" values="M 0 0 L 10 5 0 10 3 5 0 0; M 10 0 L 12 5 10 10 0 5 10 0; M 0 0 L 10 5 0 10 3 5 0 0"/>
      </path>
      <circle cx="5" cy="5" r="10" fill="#9b1"/>
    </marker>
  </defs>
<line xmlns="http://www.w3.org/2000/svg" x1="15" y1="55" x2="80" y2="40" stroke-width="25" stroke="green" marker-end="url(#Arrow)"/>
 <g xmlns="http://www.w3.org/2000/svg" transform="scale(1),translate(-10,20)">
 <path d="M 50 5 L 65 17 50 30 56 17 z" fill="red" stroke="black" marker-start="url(#Arrow)" marker-mid="url(#Arrow)" stroke-width="2" stroke-linejoin="round">
  <animateTransform attributeName="transform" type="rotate" dur="7s" from="0 50 40" to="360 50 40" repeatCount="indefinite"/>
  </path>
  </g>
<use xmlns="http://www.w3.org/2000/svg" xlink:href="#Q" xmlns:xlink="http://www.w3.org/1999/xlink" transform="translate(20,80),scale(4)"/>

[Mohamed Amin]

Thanks a lot Thomas for your replay, also your wiki is AMAZING.... I'll definitely play with it 

[Ton Gerner]

Hi Mohamed,

I remember Riz once mentioned something as animate.css

For sure there must be more

Cheers,

Ton

[TonyM]

Tip:

Searching for "animated gif icon" produces a lot of results.

They do work in tiddlywiki, even in the icon field.

Tony

[Mohamed Amin]

Thanks Ton & Tony for your reply/tip , very helpful and bring new options

On Saturday, February 22, 2020 at 10:13:06 PM UTC+2, Mohamed Amin wrote:

[A Gloom]

hello Mohammad,

I'm late to the party as usual but svg animations of svg tiddlers or in-line svg's in tiddlers has to be svg transforms, css transitions (for one time) & animation (for cycled) (@keyframes not javascript)-- java script anywhere in TW other than a java script macro gets disabled by security sandboxing.  The javascript I'ver gotten to work in TW was done with external svg's with javascript embedded in the svg.

As you have seen amazing things can be done with transforms, transitions & css @keyframes animation-- they're safe to use-- TW uses them itself. I have raster image & tiddler fade in's & outs and a cool page turning animation for tiddler transclusions in my story "book" presentation mode (a simulated bool with cover and 2 page (tiddler) at a time vew/scroll through).

[Mohamed Amin]

@A Gloom , thanks for your reply, would you please give a working example of external svg's with javascript embedded in the svg (I failed to get some samples to work in TW5)

On Saturday, February 22, 2020 at 10:13:06 PM UTC+2, Mohamed Amin wrote:

[A Gloom]

Mohamed

@A Gloom , thanks for your reply, would you please give a working example of external svg's with javascript embedded in the svg (I failed to get some samples to work in TW5)

Certainly, give me a day to modify the svg map I have-- I'll change out my map with something smaller (the svg is huge) but leave the java script compass rose that has 6 controls that zoom and pan (move) the map north,south, east and west-- its not an automated animation but it will show you where the script goes and how it operates.  It won't be much effort to do.  It works in Firefox (I don't know about other browsers) and single file TW 5.1.19 -21.

[Ton Gerner]

Hi Josiah,

On Saturday, February 29, 2020 at 8:39:15 PM UTC+1, TiddlyTweeter wrote:

I want comment that I FAILED at finding either Riz's great SVG animations or Jed's well thought through demo of the sun in the sky on my mind still. It sucks my memory is better than my recall of internet addresses.

Jed's animations can be found at: https://ooktech.com/jed/ExampleWikis/SnapSVG/

Can you tell more about Riz's animations? I only remember he mentioned animate.css at https://daneden.github.io/animate.css/

Cheers,

Ton

I hope, one day, we will not be reinventing the wheel.

TT

[Ton Gerner]

Hi Josiah,

These? https://ibnishak.github.io/Tesseract/css_snippets/animations.html

Cheers,

Ton

On Saturday, February 29, 2020 at 9:39:16 PM UTC+1, TiddlyTweeter wrote:

Thanks Ton

Jed's animation is really neat, happy you found it ... https://ooktech.com/jed/ExampleWikis/SnapSVG/#Animation%20Example

Ton Gerner wrote:

Can you tell more about Riz's animations? I only remember he mentioned animate.css at https://daneden.github.io/animate.css/

He did that, right. But also a native TW working impressive cycle thingie I can't find.

Best wishes

TT 

[Mohamed Amin]

WOOW, great examples, specially the "Calendar Tiddler"  it shows how "BEAUTIFULLY" TW5 can be integrated with "svg" world.

Thanks Ton / TT for bringing this in

[Diego Mesa]

Wow that sci-fi one lookes awesome! 

Any one know how to use that as the splashscreen? I cant get it to work. 

[A Gloom]

@Mohammad

Attached is the external svg-- it has a basic highway route and a compass rose in the upper right-- once installed in wiki (instructions below) hover over each part of the compass rose and its function will be revealed--  mouse clicks on each portion will zoom in and out, pan east, west, north, south.  It runs off script embedded in the svg. The other attachment is the tiddler that will display the svg inside a wiki.

1-- install the svg into the same directory as your wiki

2-- import the tiddler

3-- the tiddler will display the svg-- if you have NoScripts or similar running in your browser, you may have to tell it (in its settings) to allow scripts in the browser tab TW is running in (or the tab the svg is running in if your just viewing the svg by itself)

@Ton

many thanks for those links to other TW svg work-- they should have ideas I could apply to my work-- depending a lot on svg's for the next stage-- where I take TW as thw framework for Aylin -- a browser based game

[Mohamed Amin]

Thanks a lot A Gloom for your help, I really appreciate it. also it is very nice/creative way to implement your map.

[A Gloom]

Mohamed

Thanks a lot A Gloom for your help, I really appreciate it. also it is very nice/creative way to implement your map.

YW, glad to be of help.  Whats nifty is that map with controls is trancluding into a div that has a border (a cell phone case) that makes it appear that the map is the cell phone's screen-- screenshot here-- https://groups.google.com/d/msg/tiddlywiki/gsKttLKxG_Y/Ca5k4BNLAgAJ

[Diego Mesa]

Thanks all for their great work!

I want to ask again to see if anyone can provide instructions to get this to work as a splash screen? Thanks!

[Thomas Elmiger]

Hi Diego,

The attached tid file contains my new splashscreen including an SVG graphic. Basically, it seems to work on https://tid.li/tw5/apps/svg.html – but I still have questions myself:

- The animation is not visible in my browsers on the splash screen – would there be a way?

-- but: when I open the tiddler in the wiki and add html to the pragma rules, the animation is visible

- Macros can not be included (I tried to show the TW <<version>>) – would there be a way?

All the best,

Thomas

[Jeremy Ruston]

Hi Thomas

On 8 Mar 2020, at 10:32, Thomas Elmiger <thomas....@gmail.com> wrote:

Hi Diego,

The attached tid file contains my new splashscreen including an SVG graphic. Basically, it seems to work on https://tid.li/tw5/apps/svg.html – but I still have questions myself:

- The animation is not visible in my browsers on the splash screen – would there be a way?

-- but: when I open the tiddler in the wiki and add html to the pragma rules, the animation is visible

The complexity here stems from the way that tiddlers with the tag $:/tags/RawMarkupWikified/TopBody are processed. At the time the wiki is saved, they are are wikified, and then the text content is extracted and spliced into the HTML file.

So, if your tiddler contained <div>Jeremy</div>, then the HTML that would be spliced into the HTML file would be the string “Jeremy”, with no HTML tags.

In your example, using \rules only filteredtranscludeinline transcludeinline  means that only transclusions will be wikified, and the HTML elements will be treated as plain text. That makes things work nicely when the wiki is reloaded, but as you note it means that viewing the tiddler directly in TW won’t work as expected.

Adding the “HTML” rule causes the HTML and SVG elements to be wikified, and thus displayed normally.

- Macros can not be included (I tried to show the TW <<version>>) – would there be a way?

You’ll need to use \import to import any macros you need,

Best wishes

Jeremy.

All the best,

Thomas

Am Donnerstag, 5. März 2020 17:10:21 UTC+1 schrieb Diego Mesa:

Thanks all for their great work!

I want to ask again to see if anyone can provide instructions to get this to work as a splash screen? Thanks!

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/1ffe5c64-e778-4427-b4bb-e4b8a12830fa%40googlegroups.com.
<$__telmiger_splashscreen.tid>