New answers tagged

0

Note: In general the answer I wrote applies to the more complex animations, like your example 1. Some of the other examples you posted are pretty simple and can be addressed just talking to your team. Short answer: If you want to animate an animation, and want the final animation to be like the one you already animated... Just prepare the animation to be ...


1

There are probably many ways of doing this. If you're already familiar with After Effects, you can use it to create your SVG animations and export them with the help of the Bodymovin AE Plugin (~ USD 20). It will create a JSON file with the animation, that can be triggered by Javascript then. Here's a tutorial


0

Short answer: AI is more capable than SVG. EPS and PDF are final, compact, one way file format. Its purpose is to be consumed as a document, either for screen or for print. It is not intended as a 'working' document. Once the EPS/PDF is generated it's not supposed to be worked upon afterwards. For example, text boxes no longer exist in a PDF, just lines of ...


1

As Scott mentioned, Adobe Animate focuses on canvas animations, not CSS, and AE on video. As far as I know, there are certain plugins that you can use to force the export of an SVG file, but it isn't exactly the best solution. I haven't tried them out yet. I prefer to use SVGator if I need a single SVG file and there's no Adobe product that would allow you ...


0

So I've run into the same problem. What you need to do, first of all is check this website out: https://support.canva.com/create-your-design/uploads/photo-file-requirements/#svg Than when exporting from illustrator make sure you use the "save as" option not export. Because in export you will not find those options (at least I didn't). When I saved it with "...


0

Set the screen width and height to 100% as given below: <html> <svg height="100%" width="100%" viewBox="0 0 1550 1200" preserveAspectRatio="none"> <!---Your code here--> </svg> </html>


0

Save as optimized SVG. In particular, in Illustrator, don't use "Save as", use File > Export > Export for Screens .... Then select SVG as format .


5

It seems that the svg you link to is animated using CSS Animations. Read about it on W3Schools and CSS-Tricks. Inspecting the moving elements with browser Developer Tools by pressing F12 is revealing: These animations could be hand coded by editing the SVG file in a text editor. But the source code contains tons of animation keyframes. This seems like too ...


2

SVG files can have declarations for class and/or IDs. That file is merely using the animation ability of Cascading Style Sheets v3 (CSS3) to introduce animation based upon various IDs. #el_hAVKZVGCL * { -webkit-animation-duration: 8s; animation-duration: 8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; ...


2

Instead rotating, apply a new effect: go to menu Effect → Distort & Transform → Transform and set a rotation angle


1

Illustrator leads a double-life being capable of creating both print documents measured in physical units and web documents measured in pixels. This creates some unexpected side effects. By measuring your output file and looking at the ruler in the screenshot, I can see that you have created a document with the dimensions 270x380 px. With ordinary preview ...


-1

var circle = doc.getElementsByTagName('circle'); var convertSvgCircleToPath = function(cx, cy, r, deg) { var theta = deg * Math.PI / 180, dx = r * Math.cos(theta), dy = -r * Math.sin(theta); return "M " + cx + " " + cy + "m " + dx + "," + dy + "a " + r + "," + r + " 0 1,0 " + -2 * dx + "," + -2 * dy + "a " + r + "," + r + " 0 1,0 "...


1

Rounding errors I suppose. In your SVG export dialogue, did you set Decimal Places to 0 or 1? Add a higher value for decimal places, default should be 3. For such a tiny drawing (32x32px) I'd recommend even more (like 6).


1

Handwriting-likeness cannot be made by randomly moving the nodes of the glyph paths. A little child who tries to make slowly a freehand copy of the outline of a glyph can produce something which can be simulated by randomly moving the nodes of a path and very likely by increasing the number of the nodes. Established handwriting should look consistent which ...


0

The TL:DR; solution to this is to use Inkscape: https://inkscape.org/ It's free, open source, cross platform. You can install on Ubuntu with "snap install inkscape" or use the installer on the website for PC and Mac. If you have the Adobe suite (and there's a 30 day free trial) you can use either Photoshop paths or Illustrator to import, edit and export ...


3

Assuming you convert these glyphs to outlines, it could be done in vector image editing software such as Adobe Illustrator or Inkscape (which is free). In Inkscape, select the outlines and do Extensions > Modify Path > Jitter Nodes. Select the option to "Shift node handles", and adjust the displacement values as required. In Illustrator a similar effect is ...


2

Note: A clipPath is actually an SVG vector element, so it's technically not correct to say it isn't vector. Unfortunately, you can't expand something that has been clipped to pure outlines, and essentially have the clipping path cut out the pattern. You'll need to use a different technique. To achieve what you want, you could do the following: Create a ...


2

Edit the brush dragging it to from the Brush Panel to the artboard Select it and ungroup it Press Cmd + Shift + M Mac or Ctrl + Shift + M Win to activate the Shape Builder Tool and click the areas where the brush must be black Select the new shapes and create a new pattern brush dragging them to the Brush Panel Apply the new brush to the path


Top 50 recent answers are included