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.

News: Industrialists on EVE Online.

EVE Online is a community-driven spaceship MMORPG where players can play free, choosing their own path from countless options. Experience space exploration, immense PvP and PvE battles and a thriving player economy in an ever-expanding sandbox. Participate in many in-game professions and activities, including war, politics, piracy, trading, and exploration, across 7,000 star systems with hundreds of thousands of other players. 

Today this online game with the news:

Industrialists shape the universe of EVE Online, being responsible for supplying the ships, ammo, and equipment that fuel the biggest wars in gaming history. 

You can download it and play it from the official website.

Everything he touches into chickens!

The game Neverwinter come with this new feature:

... who has an unfortunate condition of turning everything he touches into chickens!

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.

OpenProcessing - simple tree_001.

This is modified example from this in order to build another good tree using openprocessing website interface.

You can see this example on my account.

Let's see the source code:

/*--based on https://openprocessing.org/sketch/396851--*/

var nbranchs = 73;
function setup() {
  createCanvas(640, 400);
  background(0, 0, 128);
  
  noFill();
  stroke(128);
  noLoop();
}

function draw() {
  tree(100, 200, 150, 350);
}
function mousePressed() {
  background(0, 0, 128);
  redraw();
}

function branch(x, y, dx, dy) {
  var sign = random(dx+1.0)/(abs(dx)+5.0);
  
  for (var i = 0; i <= x; i += 3) {
    var idx = i/x;
    
    var xi = bezierPoint(x, x + dx/2,   x + dx, x + dx, idx);
    var yi = bezierPoint(y, y, y + dy, y + dy, idx);

    line(xi, yi, xi + sign*random(8), yi + random(18));  
	
  }
}

function tree(left, right, top, bottom) {
  for (var idx = 0; idx < nbranchs; idx += 1) {
    
    // choose a random y position
    var y = random(bottom, top);
		
    
    // choose a random x position inside of a triangle
    var dx = map(y, bottom, top, 0.0, (right-left)/2.0);
    var x = random(left + dx, right - dx);
		
    var x1 = random(left + dx, right - dx);
    
		// choose the size of the branch according to the position on the tree
    var w = map (x, left, right, random(-25) -25, random(25)+25) + 1;
    var h = map (y, bottom, top, 5 +random(20), 5);
    
		var w1 = map (x, left, right, random(-35), random(35)) + 3;
    var h1 = map (y, bottom, top, random(10), random(10));
    // randonize the size
    var dw = random(-10, 5);
    var dh = random (-5, 5);
  	
		var dw1 = random(-5, 1);
    var dh1 = random (-1, 1);
    // create the new branch
		branch(x1, y, w1 + dw1, h1 + dh1);
		stroke(random(0),random(128),random(15));
		branch(x1, y, w1 + dw1, h1 + dh1);
		stroke(random(25),random(255),random(50));
    branch(x, y, w + dw, h + dh);
    
  }
}

Boxy SVG - tool for editing SVG files.

This online tool for drawing and working with SVG file format comes with this intro:

Boxy SVG project goal is to create the best tool for editing SVG files. For beginners as well as for professional web designers and web developers. On any device and operating system. 

 ... 

 Boxy SVG is built around the idea that user interfaces should get out of the way. There is no crowded workspace with overlapping dialogs or dozens of opened palettes and toolbars. Your illustration takes the center stage. Whether it's the editing of shapes or adjustment of gradient fills, most of the action is taking place directly on the canvas. Fine control over the changes is available in panels that you can expand and then collapse with a single click or keypress. Many features are accessible with keyboard shortcuts that you can customize to your liking. This is especially useful if you are coming with a lot of muscle memory from years of using other vector graphics editors.

The tool comes with a trial for 15 days or you can subscribe with these two options: 9.99 USD/ year or 9.99 USD/month register with your account.

On the official webpage, the Linux version is Free.

I install it easily on my Fedora 33 distro Linux with the snap tool:

[mythcat@desk ~]$ snap search boxy
Name      Version  Publisher    Notes  Summary
boxy-svg  3.46.0   jarek-foksa  -      Scalable Vector Graphics (SVG) editor
boxy-svg 3.46.0 from Jarosław Foksa (jarek-foksa) installed
...

I tested all features of this tool and, is very good for an SVG tool.

You can see many tutorials with this online tool from the official youtube channel.

In the next video you can see one video tutorial with the SVG library of this online tool: