Cool creative segmented SVG text animation effects, cool creative segmented svg

Cool creative segmented SVG text animation effects, cool creative segmented svg

This is a very creative segmented SVG text animation effect based on segment. js. This text animation effect uses the animation path of the animated SVG to produce the animation effects of various texts.

The last few examples in the first DEMO of this SVG text animation effect use the mo. js plug-in, a JavaScript library plug-in compiled by Oleg Solomka for making web page graphics animation. By using mo. js, you can produce more shocking text animation effects.

Download Online Preview source code

The font used in the special effect is exquisite lowercase font, a very creative WEB font.

Usage

To use this SVG text animation effect, you need to introduce segment. js in the page, which is used for animation SVG paths, d3-ease, for making easing animation transition effects, and letters. js.

<script src="js/segment.js"></script><script src="js/d3-ease.v0.6.js"></script>                  <script src="js/letters.js"></script>                 

HTML Structure

You can use one<div>Container to wrap the text that requires animation effects.

<div class="my-text">my text</div>       

Each SVG letter is assignedletterClass, for example:letter-(a, b, c, ...), Andletter-(1, 2, 3, ...). With these classes, we can customize the style of letters, such as setting the margin value or Positioning method.

/* Setting margin among all letters */.letter {  margin: 0 10px;} /* Setting background to letter m */.letter-m {  background-color: lightsalmon;}