Looks beautiful, any plans to allow any SVG file instead of SVG fonts?
You have to convert him to font. Various tools exists for that.
Svg file contains colors, font contains only lines.
You can test “modernpics” or “justvectorv2-webfont” icon font in live demo.
The options you included in the demo do not show up in the actual product such as transparency etc..
You’re right, I put the updated version today, sorry for the inconvenience
Hi Noodlez, The updated version is ready and online. You should have received an email. Don’t hesitate to tell me if there is something. And do not forget to assign a rating to the product .
Last thing: if you like this, don’t forget to review.
i am interesting about this feature, but before i buy, i have a question. may this plug in can be exported to jpg or any image extension ?
Hi tavgreen. This plugin lets you create an animation in SVG. When the animation is complete, you can capture and save the result in JPG, PNG or another.
For this you can use any tool that captures all or part of your screen :
Tell me if it’s ok.
And don’t forget to review.
may I show an image after hand writings?
Yes you can. Just convert image to a font character. Many sites offer this for free ( http://www.freefontconverter.com/)
Hi, great work, but 2 things I would missing. Can I inserting break lines or some additional text lines under the main text? And second version output for mobiles …? Because responsive is an strange thing.
Hi, I work to insert breaklines.I caution you when ready. Responsive is very complicated with SVG. If you have some exemple don’t hesitate to give me.
Is it possible to add my own fond?
Sorry… Of course it does ;o)
I just purchased this code and when I try to use the generated code, I get these errors
Warning: XMLReader::open() [xmlreader.open]: Unable to open source data in /var/www/font_anim/font_anim.php on line 144
Warning: XMLReader::read() [xmlreader.read]: Load Data before trying to read in /var/www/font_anim/font_anim.php on line 146
Warning: Division by zero in /var/www/font_anim/font_anim.php on line 228
can you please help
Yes. It is not error just warning.Disabled theses ;
And try to work again.
first of all, the function should not be throwing 3 error messages every time I run it. But the main problem is not with the warning message, the problem is that the script (when included) is not working, it is not generating anything. The font_anim/index.php works well, it generates the preview and the code , my index.php is outside the font_anim directory, and it only includes the code generated and copied from font_anim/index.php. Still, no text/animation appears in the page where I included the generated code, just the error messages.
also, looking at the debugging console, I get 25 errors with this message : TypeError: path.getTotalLength is not a function
upon further investigation, the generated code works fine if I include it in a file which is in the font_anim/ directory. However, if I embed the code into a file outside the font_anim directory, it does not work. I did update the reference font_anim.php to font_anim/font_anim.php as outlined in your documentation:
“First you have to include file called “font_anim.php” :
<?php include (‘font_anim/font_anim.php’); ?>
When you run the script alone, outside your website it works fine or not ?
Hi, here is what i did step by step
1. copied the whole font_anim directory and its files to /var/www/font_anim/
2. I opened /var/www/font_anim/index.php, this works great, I can see the animation, I can change settings etc
3. I copied the generated php code into /var/www/example.php. This php file contains ONLY the generated code eg.:
<?php include (‘font_anim/font_anim.php’);
font_anim( array( “transparent” => “true”, “background” => ”#000000”, “outline_color” => ”#a0e660”, “text” => “Welcome”, “color” => array(”#a0e660”,”#a00960”) ,”color_blend” => array(”#6969dc”,”#a00960”), “stroke” => 20, “mode” =>1, “height” => 600, “width” => 1500, “size” => 150, “speed” => 1500, “font” => “Sevillana-Regular.svg”, “type” => “cubic-bezier(0.250, 0.250, 0.750, 0.750)”, “transition” => 800, “fill” => “true”, “vertical” => 1500 )); ?>
this tells me that there is a referencing error in your script, can you please correct it?
I test and come back.
If you have copied all files in “var/www/font_anim/” and if after you copied the script in “var/www/” this is normal that doesn’t work. The script depends from other files : font, js script… And it doesn’t found them.
You wrote ” and if after you copied the script in “var/www/”” .... but I didn’t say that. What I am saying is that your script only works if the file that includes font_anim.php (eg. example.php in my case) is actually located in the font_anim directory. This is clearly a coding error on your side, in php you should be able to include and reference files from any directory under your /var/www in Apache. So can you please finally correct this error? Also your documentation says: First you have to include file called “font_anim.php” :
<?php include (‘font_anim/font_anim.php’); ?> ... this is exactly what I am doing, but it does not work that way. It only works if example php is located in the font_anim directory
The script need the font file to work. Not only “font_anim.php”. Copy font folder to the root. I have to add this in my doc. Sorry.
Just so future buyers are aware: One of the JS functions in this script causes an infinite loop. That may or may not be an issue depending on how much you care about CPU strain.
Wich function is ?
Hey dude! That is a nice drawing-tools.
My question I do have: Is there a oppertunity to get a sperrated Version with PHP and JS?
Hi. What do you mean ?
Bonjour, je viens d’acheter votre plugin mais je me suis trompé, je voulais le wordpress compatible.
Comment pouvons nous switcher la commande?
Achetez l’autre puis faites une demande de remboursement pour celui ci je l’accepterais.
Hello, when i try to use this. i’m getting error. i launch the index.php but it has this error.
Notice: Undefined index: outline in C:\wamp64\www\intro\writing\font_anim_ajax.php on line 474
Notice: Undefined index: specify in C:\wamp64\www\intro\writing\font_anim_ajax.php on line 475
If that doen’t work tell me I improve the version.
when i get the code from get code. and put it new test1.php in the directory which font_anim.php exists. but i receive these errors.
Undefined variable: unicode in C:\wamp64\www\intro\writing\font_anim.php on line 163
Notice: Undefined offset: 0 in C:\wamp64\www\intro\writing\font_anim.php on line 166
Add the same line at the beginning of font_anim.php
There are no errors but only notice.
I tried but it shows more errors not showing my text. C:\wamp64\www\intro\writing\font_anim.php:165:null
Maybe your wamp configuration is not adapted and you have to try on a server.
At first I didn’t realize I needed to upload this to my server and had some problems creating an SVG font, but eventually got it working. Much easier than Inkscape + AnimateSVGText at github. Now if I could just have some kind of animated fill (like a moving image background) for the letters instead of color… Probably too complicated.
Hi, for created svg font you can use an online and free service. Search on google “create svg font” or other.
Merci for the fast response. Yes, I did find such a service and was actually able to create a SVG font and make the text animation. Now I just have to figure out how to insert the animation into my HTML document.
I’ve generated the code and I’m following the instructions carefully (I think). PHP is enabled on the server. How do I insert the code into a static HTML web page and have the animation appear? Is there a live example where I can view source and inspect? I’m not very good with PHP.
Any tips on how to include one of these generated animations into an existing HTML web page?
yes alright by iframe.
Can I move my license from one site and to another?
I created a new profile for Chrome but the oddity is still happening. I may completely nuke Chrome and re-install but in the meantime you can see exactly what’s happening via this animated GIF: http://gph.is/2n03DFK
As I mentioned, this only happens on my own Mac but it’s odd that Chrome 57 (WebKit-based fork) and Firefox 52 (Gecko-based, not WebKit-based) exhibit the problem while Safari 10 (WebKit-based) does not have the problem. Brave browser (based on Chrome’s WebKit fork
Blink) does not exhibit the issue.
In any case, I’ll end up reinstalling Chrome and Firefox and report back after I save all the settings and profiles. This note is just to let you see what’s happening in case someone else has the same problem.
yes it’s very strange. You have this problem on the demo also ?
Yes, this happens for the demo at http://preview.codecanyon.net/item/handwriting-animated-text-svg-responsive/full_screen_preview/6719796 also, so it’s obviously a problem with this specific computer. I can screen record the same behavior including the URL if you like.
can you remember me what are the browser console error ?
Screen capture: http://s28.postimg.org/v26vwrdxp/anitext-demo-error.png
Here is the copied text. Replacing #00000 with #000000 in index.php didn’t seem to fix anything.
The specified value ”#00000” does not conform to the required format. The format is ”#rrggbb” where rr, gg, bb are two-digit hexadecimal numbers.
jquery-1.10.1.min.js:5 Error: <rect> attribute width: Expected length, “1500 px”.
buildFragment @ jquery-1.10.1.min.js:5
jquery-1.10.1.min.js:5 Error: <rect> attribute height: Expected length, “600 px”.
buildFragment @ jquery-1.10.1.min.js:5
www.google.com/ads/ga-audiences?v=1&aip=1&t=sr&_r=4&tid=UA-11834194-12&cid=170505556.1485819774&jid=887085519&_v=j49&z=297728531 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
yes I have the same errors but no interval between the two text.
do you have tried this version ?
If I enable ‘Plain/outlined’ the same strangeness happens with index_5.php. I guess it’s just my Chrome install that’s borked (but then why would it also happen with Firefox?) and I’ve been delaying re-installation out of concern that I’ll mess up the backup and lose passwords. I can’t see how it would be a hardware issue. Thanks.
I have found a browser where this problem happens. I can try to resolve it. I come back to you if I arrive.
transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
Thanks for your feedback..
Yes, that appears to have fixed it, thanks. You’d not seen this before?
Use, by you or one client, in a single end product which end users are not charged for. The total price includes the item price and a buyer fee.
Use, by you or one client, in a single end product which end users can be charged for. The total price includes the item price and a buyer fee.
View license details
Get it now and save up to $4
Unlimited graphic downloads & digital courses. Only $29/month
22,000+ templates & 1,000+ courses
Learn almost anything with
Envato Tuts+ for free
9000 free tutorials, 3000 paid courses
Designers matched perfectly to
you on Envato Studio
2000 artists ready to undertake your work