Hi everyone,
I am beginner in Inkscape. I am not sure if this post opened in this area is appropriate or not since it is about the effect on web
well, I would like to know how to make the effect as shown in the following examples, particularly for the example Two

example one

example two

Could anyone be generous to let me know in detail how to make such kind of effect on the website with Inkscape ...Could I make the one similar to the example Two by myself asap? I know it takes time and effort to learn and I would try my best!

Thank you very much!

Java script is your friend / aside of Google ,)

You will probably need to remove transformations before any kind of animation.
This may make a good use: https://github.com/svg/svgo.

Maestral wrote:Java script is your friend / aside of Google ,)

Thanks for your reply. but i do not know Java script or code, so i have to look for an easy way to do this...

Lazur URH wrote:You will probably need to remove transformations before any kind of animation.
This may make a good use: https://github.com/svg/svgo.

could you let me know how to make good of use it? sorry for my question since i am not familiar with the code..i have checked the svgo but have no idea of how it is going to solve my issue. thank you.

Does it mean you`ve used lmgtfy? Perhaps adding css as an search term could help?!

Just to clarify... Inkscape is a vector editing tool, not intended for creating animations - yet, it`s possible and doable but... Da Capo al Fine.

Hi.

Just to clarify... Inkscape is a vector editing tool, not intended for creating animations - yet, it`s possible and doable but... Da Capo al Fine.

I would take the above statement with a pinch of salt.

See some of these;
http://www.svgopen.org/2007/papers/SLOGO_Abstract/SLogo_Fig9_Goldberg_Machine.svg
http://svg-wow.org/audio/animated-lyrics.svg
http://www.bogotobogo.com/svg_source/SVGDigitalClock.svg

All examples "lifted" from this page:

On using Inkscape to create animations.
Inkscape -wiki - SVG_Animation

icefancy wrote:could you let me know how to make good of use it? sorry for my question since i am not familiar with the code..i have checked the svgo but have no idea of how it is going to solve my issue. thank you.

Tried only once to spin a simple svg with no real avail, so that was most of my five cents on it.

@ ragstian
Why so?! Is it possible to create animations with current Inkscape tools? Were those examples made without xml editor and coding?

Hello,
I haven't checked, but those animation effects shown in the first post maybe are made in.html"smilies" src="images/smilies/icon_e_wink.gif" alt=";)" title="Wink" /> ).

- I think that for SVG animation, it must be related to html5 technologies. One Initiative which is recent and I wish to explore more is this:
viewtopic.php?f=11&t=18416

- I also tried some tests with animated SVGs. But the things aren't easy to do in my opinion.

Greetings

Hi.

Maestral wrote:@ ragstian
Why so?! Is it possible to create animations with current Inkscape tools? Were those examples made without xml editor and coding?

What? Yes? No. You were basically correct but I would not say "Impossible to do".
Let the OP explore the possibilities instead of closing the gate saying "Impossible".

To me inkscape is one of the tools in your graphics toolbox, if I compare it to woodworking the tools
cut the wood, to assemble or finish a project I still need some glue/screws/nails or just some sandpaper for the simpler shapes. (Spoon)
Same with Inkscape, create the objects in Inkscape and use other tools for the "glue".

Having said that, Inkscape have a built in XML editor - with the right knowledge you can make this Animated Clock using no other tools.

I don't know this coding language but it is not JavaScript

Page source:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
onload="startUp()">

<script>

<![CDATA[

/* Evolved from DHTML version
@ http://www.dhteumeuleu.com */

var xmlns="http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";

var backX0;
var backY0;
var backWidth;
var backHeight;

var O=[];
var TM=[];
var Tm=[];
var A = 1000;


var digits = [
" ### # #### #### # ###### ### ##### ### ### ",
"# # # # ## ## # # ## ## # ",
"# # # # ## ## # ## ## # # ",
"# # # ### ### ######### #### # ### #### ",
"# # # # # # ## # ## # # # ",
"# # # # # # ## # ## ## # ",
" ### # ######### ##### ### # ### ### "
];


function startUp() {

var myBack = document.getElementById("backGround");
backX0 = myBack.getAttributeNS(null,"x");
backY0 = myBack.getAttributeNS(null,"y");
backWidth = myBack.getAttributeNS(null,"width");
backHeight = myBack.getAttributeNS(null,"height");

dayDisplay();
timer();

/*
k 0 1 2 3 4 5 6 7 -> 1st args of Cdigit
display * * : * * : * * -> 2nd args of Cdigit
('10' for ':')
*/
var k=0;
for(var i=0;i<6;i++){
O[k] = new Cdigit(k++, TM[i]);
if(i==1 || i==3) O[k] = new Cdigit(k++, 10);
}
mainloop();
}

/* Input for Cdigit
N = 0-7
d = 0-9 or 10 */

function Cdigit(N,d){
// digit prototype: 5 x 7 dots for each of digit from 0 to 9
this.O = [];
for(var i=0;i<7;i++){
for(var j=0;j<5;j++){
if(digits[i].charAt(5*d+j)!=" "){
this.O.push(
// COjb(this.a, this.z)
new CObj((
(28*N)+(j*5))/(180/Math.PI),
-42+i*12
)
);
}
}
}
}

function CObj(a,z){
// create led element
this.o = document.createElementNS(xmlns,"circle");
document.getElementById("clock3D").appendChild(this.o);
this.a=a;
this.z=z;
this.plot=true;
}

// leds lighting

// main 3D function
CObj.prototype.anim=function() {
// z axis rotation
var x=Math.sin(A+this.a)*100;
var y=Math.cos(A+this.a)*100;
// simple 3D
var x1=y;
var zz=this.z;
var y1=-zz;
zz=x;
// 2D projection
var r=396/(396+zz);
x=Math.round(backWidth/2-x1/r)+parseFloat(backX0);
y=Math.round(backHeight/2-y1/r)+parseFloat(backY0);

// leds lighting
if(zz>0){
this.o.setAttributeNS(null,"fill","#ff0000");
this.o.setAttributeNS(null,"cx",x);
this.o.setAttributeNS(null,"cy",y);
this.o.setAttributeNS(null,"r","5");
this.o.setAttributeNS(null,"opacity","1.0");
}
else {
this.o.setAttributeNS(null,"fill","#00ff00");
this.o.setAttributeNS(null,"cx",x);
this.o.setAttributeNS(null,"cy",y);
this.o.setAttributeNS(null,"r","5");
this.o.setAttributeNS(null,"opacity","0.3");
}
}

function mainloop() {
// rotation speed
A-=Math.PI/120;
// refresh time
k=0;
for(var i=0;i<6;i++){
if(TM[i]!=Tm[i]){
Tm[i]=TM[i];
// destroy objects
for(var j in O[k].O)document.getElementById("clock3D").removeChild(O[k].O[j].o);
delete O[k];
// create new digit
O[k] = new Cdigit(k, TM[i]);
}
// skip colons
k+=(i==1 || i==3)?2:1;
}
// call animation
for(var i in O){
for(var j in O[i].O){
O[i].O[j].anim();
}
}
setTimeout("mainloop()",20);
}

function timer(){
// HH:MM:SS
T = new Date();
h = T.getHours();
m = T.getMinutes();
s = T.getSeconds();

TM = [
Math.floor(h/10),
h%10,
Math.floor(m/10),
m%10,
Math.floor(s/10),
s%10
];
setTimeout("timer()" ,1000);
}

function dayDisplay()
{
var dayName =
new Array("Sunday","Monday","Tuesday","Thursday",
"Friday","Saturday");
var monthName =
new Array("January","February","March","April","May","June","July",
"August","September","October","November","December");

var today = new Date();

document.getElementById("date").firstChild.nodeValue =
dayName[today.getDay()-1]+", "
+ monthName[today.getMonth()]+" "
+ today.getDate()+", "+today.getFullYear();
}

]]>

</script>


<rect id="backGround" x="50" y="50" width="300" height="200" fill="black" stroke="#444" stroke-width="5"/>
<rect id="backGround" x="53" y="53" width="294" height="194" fill="none" stroke="#fff" stroke-width="1"/>

<g id="clock3D">
<circle id="red" cx="-150" cy="-150" r="4" fill="red"/>
<circle id="green" cx="-150" cy="-150" r="4" fill="green" opacity="0.3"/>
</g>

<text id="date" x="80" y="240" font-size="20" fill="white">
date
<animate attributeName="opacity" dur="5s"
values="1;0;1" repeatCount="indefinite"/>
</text>

</svg>

That was from the 'clock' site and just to show that a lot of coding is involved

ragstian wrote:Hi.

Maestral wrote:@ ragstian
Why so?! Is it possible to create animations with current Inkscape tools? Were those examples made without xml editor and coding?

What? Yes? No. You were basically correct but I would not say "Impossible to do".
Let the OP explore the possibilities instead of closing the gate saying "Impossible".

Where exactly did you read me saying "Impossible" ?

Maestral wrote:Does it mean you`ve used lmgtfy? Perhaps adding css as an search term could help?!

Just to clarify... Inkscape is a vector editing tool, not intended for creating animations - yet, it`s possible and doable but... Da Capo al Fine.

On a side note...
Are we talking about the Inkscape here or about .svg a general? One can create .svg file with a plain text editor and even without Inkscape but creating animated .svg in Inkscape without coding - ?

On account of our friend...
Possibilities

Da capo al Fine ,)

This is CSS http://www.dhteumeuleu.com/ - and beautiful b.t.w.

Thank you everyone. Well, after knowing it has something to do with SVG and someone told me that I can use Inkscape to make the "graph" first(sorry i don't know how to describe it in technical terms..) and then use another plugin together to display the scrolling effect as i want the ones shown in examples. So i try to know more Inkspace but still have no idea how I am going to do with that issue. Does anyone have a clue to do with this effect?

Hello,

I may be wrong but it seems that you are just begining... me too

For animation and SVG, see here:
http://tutorials.jenkov.com/svg/svg-animation.html

But it's also related with scripting, so see here also:
http://tutorials.jenkov.com/svg/scripting.html

If you just want to animate something, see also here:
https://www.youtube.com/watch?v=iwwqmMY-Lt8

Aaaaaaanyway, also see here:

http://www.google.com

I have a collection of links to animation software and techniques that can be used with Inkscape. Look in the ANIMATION block on this page: http://forum.inkscapecommunity.com/index.php (maybe I should code an id tag into that title, so I can make a direct link to it?....hhmm....put on my to-do list )

Janne wrote:I don't know this coding language but it is not JavaScript
...
<script>
<![CDATA[
/* Evolved from DHTML version
@ http://www.dhteumeuleu.com */

var xmlns="http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";

var backX0;
var backY0;
...
]]>
</script>

That most definitely is Javascript. Usually the <script> tag would include a type="text/javascript" attribute, but as JS is the default language of a browser, it still works if it's omitted.

Xav wrote:

That most definitely is Javascript. Usually the <script> tag would include a type="text/javascript" attribute, but as JS is the default language of a browser, it still works if it's omitted.

My mistake, Xav - normally it would start with the script attribute and I didn't know that it's not necessary anymore - thank you for your info