Are the javascript tags located correctly?

I am unsuccessfully trying to add an animation to an html page:
https://codepen.io/alticreation/pen/ZYdopE?editors=1111

I copied the very small amount of js, html & css code from that link and placed it on a basic html page. I wrappred the css in < style > < /style > tags and wrapped the js in script tags < script > < / script > and located both the css and javascript code above the body tag, but no successful animation upon page load. So, I moved the js to below the html code, still no success. Any ideas are appreciated.

CodePen has an export option at the bottom right of the screen, that correctly puts the style and script tags where they should be located.

I recommend that you try that out.

Much thanks, that was very helpful. Should I start another posting to ask about this related question?

At that same link, you can see a blue design :
https://codepen.io/alticreation/pen/ZYdopE?editors=1111

I’ve tried to eliminate the blue design and keep the text, but haven’t figured it out. Here’s the js code:

window.onload = play();
document.getElementById('tryAgain').addEventListener('click', () => { play() })

function play() {
	var blue = '#2980b9';
	var l = Snap('#logo');
	var p = l.select('path');
  l.clear();
	l.append(p);

	p.attr({
		fill: blue,
		stroke: '#0066CC',
	});

	setTimeout( function() {
		// modify this one line below, and see the result !
		var logoTitle = 'alticreation';
		var logoRandom = '';
		var logoTitleContainer = l.text(0, '98%', '');
		var possible = "-+*/|}{[]~\\\":;?/.><=+-_)(*&^%$#@!)}";
		logoTitleContainer.attr({
			fontSize: 280,
			fontFamily: 'Dosis',
			fontWeight: '600'
		});

		function generateRandomTitle(i, logoRandom) {
			setTimeout( function() {
				logoTitleContainer.attr({ text: logoRandom });
			}, i*70 );
		}

		for( var i=0; i < logoTitle.length+1; i++ ) {
			logoRandom = logoTitle.substr(0, i);
			for( var j=i; j < logoTitle.length; j++ ) { 
				logoRandom += possible.charAt(Math.floor(Math.random() * possible.length)); 
			}
			generateRandomTitle(i, logoRandom);
			logoRandom = '';
		}

	}, 500 );

}

Any help with removing the blue design, and keeping the rest, is appreciated.

[quote=“ChrisjChrisj, post:3, topic:367276, full:true”]
I’ve tried to eliminate the blue design and keep the text, but haven’t figured it out.[/quote]

That blue design is in the d attribute of the path. Remove that d attribute and you’ll be done.

The d attribute is the d="..." part, that has all sorts of coordinate commands in there.

Thanks again Paul

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.