CodePen : Home RoughJS and Wired elements example .

Codepen : TorusKnotGeometry - example .

This is a simple examaple with ThreeJS on my account codepen.io, basic geometry TorusKnotGeometry.

See the Pen Untitled by Cătălin George Feștilă (@catafest) on CodePen.

Codepen : Rafa - nixie tubes example .

See this demo from Rafa user with the Nixie tubes example ... you can find many examples in the trending area development on the codepen.io official website.

CodePen: Mojo CSS simple example.

Mojo CSS is an atomic CSS Framework that generates CSS based on your HTML in real-time and with near zero-runtime.

It offers the fastest way to create custom, beautiful and responsive layouts without having to write a single line of CSS. A full suite of utilities that helps you get the most performance out of your web pages.

I tested with codepen online tool, see how can be used:

This is the official youtube.

CodePen: CodePen Home WebGL Flower Pattern (Voronoi diagram GLSL)

You can find good web development with a great graphics on Ksenia Kondrashova codepen account.

See this example named: CodePen Home WebGL Flower Pattern (Voronoi diagram GLSL):

CodePen: Home MediaPipe - Hands

You can see an example of the codepen about how to deal with

See the Pen MediaPipe - Hands by MediaPipe (@mediapipe) on CodePen.

Play Button - week's challenge .

This is my proposal for this weeks challenge called Play Button. I could have done it better, but my time resource is limited...

Liquid button on CodePen Home by Waaark.

This is a good example with a button to use javascript to create a liquid effect. I studied a little and I can tell you that modifying the tag elements via javascript is quite tricky ...

CodePen: Simple example with css-doodle web component.

This is a simple example with css-doodle javascript web component for drawing patterns with CSS.

See the Pen Untitled by Cătălin George Feștilă (@catafest) on CodePen.

CodePen: Google visualization with GeoChart.

In this exameple I used visualization with GeoChart.

See the Pen Untitled by Cătălin George Feștilă (@catafest) on CodePen.

CodePen: The pantone color of the year 2022.

The pantone color of the year 2022 is this.

See the Pen the Pantone Color of year 2022 by Cătălin George Feștilă (@catafest) on CodePen.

CodePen: ... challenges every time.

This website comes with challenges all the time, see this week example:

THIS WEEK’S CHALLENGE,Book Text ...Your challenge: Give this book excerpt some tasteful text styles.

Here's what I managed to do for this week:

CodePen: How can share sketchfab 3D models.

The Viewer API lets you build web apps on top of Sketchfab’s 3D viewer. With the API, you can control the viewer in JavaScript. It provides functions for starting, stopping the viewer, moving the camera, taking screenshots and more.

See the official webpage.

CodePen: RGB colors.

Example with the javascript programming language presented in my codepen account solves the following issues:

• create HTML tag div for each for iteration;
• create an id for each div tag;
• build an RGB color with red, green, and blue using a random function;
• read that id and used to set the color background of each div;
• print the RGB value for each color and set background color;

Let's see the example:

See the Pen by Cătălin George Feștilă (@catafest) on CodePen.

CodePen: Lottie for Web, Android, iOS, React Native, and Windows - 001.

Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile!, see GitHub project.

You can find Lottie files on this website. 

This is a simple example with lottie-player.js:

See the Pen lottie-player html 001 by Cătălin George Feștilă (@catafest) on CodePen.

CodePen: A simple progressbar with CSS.

A simple test with CSS about how to create two simple progress bars. The code source of this example - https://codepen.io/catafest/pen/rNjmdwa show us about the cascading source code in CSS and how this works pe properties in CSS. This difference of the source code in CSS change the speed of the animation:

 animation: animate 6s ease-in-out infinite;
...
 animation: animate 1s ease-in-out infinite;

Some changes to the CSS source code are not allowed because they have no effect on the end result or must be used in order to complete the base code and have the end result. Another good example is flex:

display: flex;

On the parent element also changes how width and height work. CSS codes defines have no effect on a flex container. ... I can tell you that it is not very easy to change a project based on CSS, so the steps of designing and building a website are very important.

See the Pen CSS excample 001 by Cătălin George Feștilă (@catafest) on CodePen.

The wrld for custom maps.

A good map can have many features.
If you don't want to build one using advanced programming language then you can use this website.
You can use this with an online map with Unity, JavaScript, iOS and Android.
You can also build your indoor map and visualize any building in 3D.
All of these features let you optimize building management, resources, and planning.
The map can have many features like time of day, weather and seasons and heat map.
The next example is an outdoor map of my location.

The neon effect with javascript P5 JavaScript library.

The P5.js is a JavaScript library for creative coding.
You can use by adding this link on your HTML area using the script tag:

https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js

You can use it like any JavaScript library.
You have two functions: setup and a draw for setup and drawing.

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
}

function draw() {
  ellipse(50, 50, 80, 80);
}

Then you can fill these functions with any javascript code.
You can see a neon effect with two bezier functions.
The example uses the mouse movement to change the bezier lines.
You can see many examples created by me at codepen website.

CodePen: Include shadertoy example in the webpage.

This issue can be solve it easy.
You need to get the iframe share from you shadertoy example.
Then use my example HTML and CSS from my codepen example.
You can remove the javascript code from example.
This javascript code is used to show the formula of sphere. I used my shadertoy example named Ray Marching - 001.

New codepen example - modal window.

In user interface design for computer applications, a modal window is a graphical control element subordinate to an application's main window. It creates a mode that disables the main window, but keeps it visible with the modal window as a child window in front of it.
This is my example with a modal window created on codepen website.
The example is very simple.
The html5 source code is created with classes and id's.
The css file make all style for this tags.
The javascript use all of this to open the modal window, use click to close the window.
The Cancel and Add buttons not work with the java script.