Hot answers tagged

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 ...


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

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


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


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


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 ...


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

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 ...


Only top voted, non community-wiki answers of a minimum length are eligible