Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
#codevember 01 - svg motion

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


<div class="js-odoo"></div>
odoo.default({ el:'.js-odoo', from: 'NOVEMBER16', to: 'CODEVEMBER', animationDelay: 1000 });
<script src=""></script>
@import url('');
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;
Copy link

HaciKale commented Mar 8, 2018

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


Copy link

MarkusLiebl commented Jun 8, 2018

when i create:
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!


Copy link

MurtazaNawaz commented Oct 3, 2019

How can i increase its spin time?


Copy link

MurtazaNawaz commented Oct 3, 2019

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


Copy link

MightyDante commented Jan 9, 2020

this is awesome, thanks.

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


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment