Skip to content

Instantly share code, notes, and snippets.

Avatar

codingdudecom

View GitHub Profile
View css-3d-grid-outrun-design.markdown
View curved-text-generator-js.markdown

Curved Text Generator JS

JS function to generate curved text from a HTML text element. This technique make a span element for each letter and rotates it slightly. Generate a circle text by adjusting the font site and circle radius.

Check out MockoFun Online: curved text generator

A Pen by Ion Emil Negoita on CodePen.

License.

@codingdudecom
codingdudecom / index.html
Created Dec 17, 2020
Rotating Circle Text
View index.html
<div>Made with the MockoFun <a href="https://medium.com/@codingdudecom/circle-text-2e7e5246cc94">circle text</a> generator</div>
<img style="--rotation-duration:10s;" src="https://i.imgur.com/zdPkiY2.png" alt="Circle Text" class="rotating-circle-text">
@codingdudecom
codingdudecom / index.html
Created Dec 17, 2020
Rotating Circle Text
View index.html
<div>Made with the MockoFun <a href="https://medium.com/@codingdudecom/circle-text-2e7e5246cc94">circle text</a> generator</div>
<img style="--rotation-duration:10s;" src="https://i.imgur.com/zdPkiY2.png" alt="Circle Text" class="rotating-circle-text">
View heart-shaped-bokeh.markdown
@codingdudecom
codingdudecom / index.html
Created Nov 9, 2020
JS Square Symbol Art
View index.html
<div class="squares"></div>
<footer>Complete <a href="">Square Symbol</a> Collection</footer>
@codingdudecom
codingdudecom / index.html
Created Nov 9, 2020
JS Square Symbol Art
View index.html
<div class="squares"></div>
<footer>Complete <a href="">Square Symbol</a> Collection</footer>
View anaglyph-3d-css-effect.markdown
View 80s-fonts-text-effect-5-css-neon-font-text-effect.markdown
View html5-canvas-text-outline.markdown

HTML5 Canvas Text Outline

CSS Stroke Text Using text-shadow. The idea is to have multiple shadows combined all around the text to give the illusion of a real stroke text.

Sample code for CSS text stroke definitive guide on coding-dude.com

A Pen by Ion Emil Negoita on CodePen.

License.