#codevember 01 - svg motion

codevember-01-svg-motion.markdown

#codevember 01 - svg motion

First entry to codevember. It uses my lib slightly changed to handle full text support.

A Pen by coderitual on CodePen.

License.

index.html

<div class="js-odoo"></div>

script.js

odoo.default({ el:'.js-odoo', from: 'NOVEMBER16', to: 'CODEVEMBER', animationDelay: 1000 });

scripts

<script src="https://cdn.rawgit.com/coderitual/odoo/feature/codevember16/lib/odoo.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Inconsolata');

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  background: radial-gradient(circle at 33% 100%, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF);
  font-family: 'Inconsolata';
  font-weight: bold;
  font-size: 16vmin;
  text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
  fill: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
 }

this is super nice, but you might wanna add to the readme that a script tag should be added to the html header

when i create:
odoo.default({
el: '.js-odoo',
from: 'foo bar', // space are ok nothing will be replaced
to: 'foo bar', // space will be replaced with this letter 'y' and the letter 'z' will be replaced with a number '0'
animationDelay: 1000
})

is that what you want or is it a bug? I would need a space in the 'to' area
would you want to change that would be great!

How can i increase its spin time?

got the solution to increase it.
In its JS file where n=t.duration set it to n=1000 to limit the spin to 1 second and Set the animationDelay to 0

this is awesome, thanks.

Is there any way to disable the blink on each character at the end of the animation?