Skip to content

Instantly share code, notes, and snippets.

Avatar

codingdudecom

View GitHub Profile
View heart-shaped-bokeh.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 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 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.

@codingdudecom
codingdudecom / double-outline-font-multiple-outline-fontwith-svg-stroke.markdown
Created Jul 30, 2020
Double Outline Font & Multiple Outline FontWith SVG Stroke
View double-outline-font-multiple-outline-fontwith-svg-stroke.markdown

Double Outline Font & Multiple Outline FontWith SVG Stroke

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 stroke text definitive guide on coding-dude.com

A Pen by Ion Emil Negoita on CodePen.

License.

View index.html
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
<text class="stroke-text" x="50%" y="50%">SVG STROKE TEXT</text>
</svg>
<footer>The Definitive Guide to <a href="http://www.coding-dude.com/wp/css/css-stroke-text/">Stroke Text CSS</a> made by <a href="http://www.coding-dude.com">Coding Dude</a></footer>
View css-stroke-text-using-svg-filters.markdown

CSS Stroke Text Using SVG Filters

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.

View css-stroke-text-using-text-shadow.markdown

CSS Stroke Text Using text-shadow

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.

View css-stroke-text-using-webkit-text-stroke.markdown
You can’t perform that action at this time.