Skip to content

Instantly share code, notes, and snippets.

Avatar

codingdudecom

View GitHub Profile
View Online Photo Editing - FabricJS Masking.md

Online Photo Editing - FabricJS Masking

A while ago I tried implementing a photo mask tool in MockoFun which is based on FabricJS

Check out an working example: https://jsfiddle.net/codingdude/sk84xLh2/

The solution I came up was combining the built in fabric.Image.filters.BlendImage filter with a custom FabricJS brush. Here's a glimpse at my implementation of that.

(function(){
View Star Copy and Paste.md

Star Copy and Paste Characters & Symbols

See a complete list of star symbols, star characters, star emojis and other star copy and paste useful information.

View css-star-6-pointed-star.markdown
View css-star-5-pointed-star.markdown
View css-star-4-pointed-star.markdown
View css-3d-grid-outrun-design.markdown
@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
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.