DEV Community: Maxime HEBRARD

Flutter

Maxime HEBRARD — Sun, 15 Jun 2025 00:02:55 +0000

If you want to develop an application for mobile, you should probably look into Flutter, that allow to deploy the same code base on Android, IOS and web.
If your goal is to deploy on IOS, you will need to use a Mac, have an Apple ID and Xcode

Following the instructions from (Flutter)[https://docs.flutter.dev/get-started/install)

Install Xcode (to build for IOS)

If you are using an Apple Silicon, enable rosetta translation

sudo softwareupdate --install-rosetta --agree-to-license

Install Xcode
- Open App Store
- Search for Xcode
- Click on 'Get'
- Click on 'Install'
- Click on 'Open'
- Setup Xcode for Flutter

  sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  sudo xcodebuild -runFirstLaunch

Install Cocoapods

brew install cocoapods

Install Flutter SDK

Install Flutter extension for VSCode
- Open VSCode
- Navigate to 'Extensions'
- Search 'Flutter'
- Click on 'Install'
- Click on 'Trust Publisher & Install'
Install the Flutter SDK
- Open VSCode
- Open the Command Palette (Press Command + Shift + P)
- Search 'flutter'
- Select 'Flutter: New Project'
- Click on 'Download SDK'
- Click on 'Clone Flutter'
Add Flutter to the PATH
- Edit .zshrc
```
vim .zshrc
```
- Press 'i' to enter insert mode
- Add the content as follow
- replace [Pathto] by the correct path
```
export PATH=$HOME/[Pathto]/flutter/bin:$PATH
```
- Press 'esc' to exit insert mode
- Press ':' and 'x' end 'return' to save and quit the file
- Update Terminal
```
source .zshrc
```

Install Android studio (to build for Android)

Install Android studio

brew install --cask android-studio

Launch adroid studio
- Install Type: Standard
- Accept the licences
- Finish the installation
- In android studio top menu, select 'Android studio' / 'Settings...'
- Search for 'Android SDK'
- In 'SDK Platforms' tab, check 'Android 15.0 ("VanillaIceCream") 35'
- In 'SDK Tools' tab, check
- 'Android SDK Build Tool'
- 'Android SDK Command-line Tool'
- 'Android Emulator'
- 'Android SDK Platform-Tools'
- Click on 'Apply'
- Click on 'OK'
- Click on 'Finish'
- Click on 'OK'
Close Android studio
Accept android licences

flutter doctor --android-licenses

Accept the licences

Check Flutter install

At any time you can check which element of flutter are missing and get some instructions to solve the issue

flutter doctor

My first app

Flutter game basic template

Visit Flutter game basic template
Activate sample downloader

dart pub global activate sample_downloader

Navigate to the parent direct where you want the application to be created
Run the downloader

sample_downloader

Follow the instructions of the downloader
- Do you want to use your environment's GitHub credentials? > 1) Yes
- Choose sample: > 4) templates/basic
- Enter name of new directory (ENTER for flutter-games-basic): ENTER

GitHub repository

Create a new GitHub repository named flutter_match3 for example
Clone the repository on you machine
Create a new branch feature/flutter-basic
Copy the content of flutter-games-basic into flutter_match3 (you can keep or replace the README.md as you see fit)
Navigate to the GitHub repo

cd flutter_match3/

Stage all changes
Commit changes

Update the template configuration

Update android/build.gradle

ext.kotlin_version = '2.1.21'

Update android/settings.gradle

id "com.android.application" version "8.4.0" apply false

Update android/gradle/wrapper/gradle-wrapper.properties

distributionUrl=https\://services.gradle.org/distributions/gradle-8.6-all.zip

Stage all changes
Commit changes

Add mobile simulators

Select lib/main.dart
From the bottom menu, click on 'macos (darwin)'
In the top drop down, select 'Start flutter emulator'
Also Start IOS emulator
Run the app

flutter clean
flutter pub get
flutter run

You can select the device you prefer and run the app

Nextflow

Maxime HEBRARD — Sat, 14 Jun 2025 12:47:27 +0000

If you ever wrote bash scripts for each of your task, then try to write "one script to rule them all", a gigantic master script that handle parameters, and chains all the other tasks... Then you should stop right here and look for a workflow manager ! Nextflow.io is what you are looking for.

Install on MacOS

Before reading this post, I suggest you follow Improved Shell (MacOS).

Install Java

At the point of writing this post, the recommanded java version to install is OpenJDK 21. See Which JDK for more info.

Open 'Terminal'
Install OpenJDK from Homebrew

brew install openjdk@21

Link it to Java

sudo ln -sfn /opt/homebrew/opt/openjdk@21/libexec/openjdk.jdk /Library/Java/JavaVirtualMachines/openjdk-21.jdk

Add it to the PATH

echo 'export PATH="/opt/homebrew/opt/openjdk@21/bin:$PATH"' >> ~/.zshrc

Install Nextflow

Download Nextflow

curl -s https://get.nextflow.io | bash

Make Nextflow executable

chmod +x nextflow

Create a new directory with write permissions to store binary

mkdir -p $HOME/.local/bin/

Move Nextflow into the directory

mv nextflow $HOME/.local/bin/

Add the directory to the PATH

echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

Confirm Nextflow is installed correctly

nextflow info

Container manager - Docker

Maxime HEBRARD — Sat, 14 Jun 2025 09:28:21 +0000

Docker is a container manager. It allow you to package your base OS and your software in a virtual container, and to run your application almost independently of the platform running it.

Thanks to Shimin Ang that wrote those instructions for me

Licence

Docker itself is open source and free, but its main installer advertised on the official website, Docker Desktop, required a licence fee for "for-profit organization with more than 250 total employees". To avoid any issue we will install an alternative to Docker Desktop, Colima

Install on MacOS

Before reading this post, I suggest you follow Improved Shell (MacOS).

Open 'Terminal'
Install Docker CLI

brew install docker

Install Docker Credential Helper (optional), this allows Docker to use the macOS Keychain for credentials

brew install docker-credential-helper

Install Colima, this provides a lightweight VM that runs the Docker daemon

brew install colima

Install Docker Compose for multi-container setups

brew install docker-compose

If advance build options is required, install docker buildx

brew install docker-buildx

Usage

To start docker engin

colima start

Run a docker image

docker run hello-world

Here you confirmed that you can pull a docker image and run it !

Cross Platform, Cross Language Text Editor - VSCode

Maxime HEBRARD — Sat, 30 Jul 2022 13:01:00 +0000

I see more and more youtubers and instructors coding using Visual Studio Code. I was a bit reluctant at first, but after trying it, there is no doubt ! VSCode is the best text editor I encounter to date. Free, cross platform, cross language, terminal integrated, hundreds of extentions that will help your productivity, and hundreds more for cosmetic changes.

Install on Windows

Before reading this post, I suggest you follow Ubuntu on Windows (WSL).

Open web browser
Visit code
Download 'Windows x64' installer
Open the installer
Follow installation instructions...

Install on MacOS

Before reading this post, I suggest you follow Improved Shell (MacOS).

Open 'Terminal'
Install VSCode from Homebrew

brew install --cask visual-studio-code

Open 'Visual Studio Code'
Authorise VSCode to access your folders.

Colors

Navigate the menu 'Code/Settings.../Themes/Color Theme'
Search for 'Tomorrow'
Click on 'Browse Additional Color Themes...'
Select 'Base16 Tomorrow'
Click on 'OK'
Click on 'Trust Publisher & Install'

Extensions

Navigate to 'Extensions'
Install 'Better Comments': categorize and color your comments
Install 'Git Graph': an visual interface to handle branches and commits
Install 'Live Server': Launch a development local server with live reload feature for static & dynamic pages
Install 'Markdownlint': a code formatter that enforce consistent style for markdown files
Install 'Material Icon Theme': a set of icons to help identify file extensions
Install 'Prettier': opinionated code formatter that enforces a consistent style, tabulations and maximum line length at each save.
Install 'Python': handy package of python related extentions
Install 'Rainbow CSV': color csv content by column
-for Windows only- Install 'Remote - WSL': Connect VSCode terminal to WSL.

Settings

Navigate the menu 'Code/Settings.../Settings'
Set 'Editor: Tab Size' to 2
Set 'Files: Eol' to \n
Set 'Font Family:' to MesloLGS NF

Environment Manager - Conda

Maxime HEBRARD — Wed, 27 Jul 2022 14:47:00 +0000

If you are testing programmes or developping your own I strongly suggest to look after an environment manager. An easy way to install libraries into dedicated environments in isolation from each other, and to keep track of what is installed where. A whildely used environment manager is conda

Licence

Conda itself is open source and free, but the main installer miniconda and it's default package repository are managed by Anaconda. Those services required a licence fee for "for-profit organization with more than 200 total employees" see this blog for more info.

Install on Windows

Before reading this post, I suggest you follow Ubuntu on Windows (WSL).

Open 'Ubuntu'
Download Miniconda installer for Linux

wget https://repo.anaconda.com/miniconda/Miniconda3-py39_4.12.0-Linux-x86_64.sh

Install miniconda

bash Miniconda3-py39_4.12.0-Linux-x86_64.sh

Press Enter to continue
Press Space to read through the licence
Key 'yes' to accept the licence
Press Enter to install miniconda3
Key 'yes' to confirm installation
Quit and restart 'Ubuntu'

At this point you will find a new information in your prompt that indicate in which conda environment you are currently in.

Install on MacOS

Before reading this post, I suggest you follow Improved Shell (MacOS).

Open 'Terminal'
Install miniconda from Homebrew

brew install --cask miniconda

Initiate conda for your shell(s)

conda init --all

Quit and restart 'Terminal'

At this point you will find a new information in your prompt that indicate in which conda environment you are currently in.

Usage

Update conda

conda update -n base -c defaults conda

Create a new environment

conda create -n myEnvName

Activate the environment

conda activate myEnvName

Install libraries You can find libraries and how to install them either on Anaconda or pip

conda install ...

pip install ...

List all libraries in the current environment

conda list

Exit an environment

conda deactivate

Remove an environment

conda env remove -n myEnvName

List the environements available

conda env list

Next, I suggest you follow Cross Platform, Cross Language Text Editor - VSCode.

Ubuntu on Windows (WSL)

Maxime HEBRARD — Tue, 26 Jul 2022 15:12:00 +0000

At work I often need to use software or CLI only available on Linux, while keeping contact with my co-workers require access to Microsoft Office and other Windows products...
Back in the days, the only solution was to have two machines and transfer data across. Later came the idea of dual boot, installing both OS on one machine. But we needed to reboot the machine everytime we wanted to change OS. Then I came across VirtualBox, a software running on Windows, that allows to install a Linux OS. The limitation was that CPUs, disk space and RAM were divided between the two OS running concurrently, reducing significantly the compute power of the machine.

Today, a new solution exists: Windows Subsystem for Linux (WSL). It allows to install Linux OS, as a software running on Windows. the Linux core has full access to the resources of the machine, and is fully integrated.

WSL Installation

From microsoft.com.

Prerequisites: Windows 10 Build 19041 and higher.
Search for Windows PowerShell and click on "Run as administrator"
In the terminal, type:

wsl --install

Reboot the machine

Ubuntu Installation

Ensure that you are connected to internet.
Launch the newly installed application "Ubuntu"
Wait for the installation process
Enter new UNIX username
Enter new password
Retype new password
Check Linux version

wslfetch

Access files

Note that Windows "do not know about" linux file system, but Linux can access all the files in Windows. By default Windows file system is mounted in Linux at /mnt/c/. I recommand to create a symlink (shortcut) of Documents and Downloads, the most used Windows folders, in Linux home directory. That way, the access to data is simplified.

cd
ln -s /mnt/c/Users/hebrardms/Documents Documents
ln -s /mnt/c/Users/hebrardms/Downloads Downloads

Fonts

We will change the default font of the terminal in preparation for the theme we will install later.

Open the web browser
Visit powerlevel10K - Fonts
Install the recommended fonts (MenloLGS)
- Download the font files from the github links
- Open the .ttf file
- Click on "Install"
Open Ubuntu
Right-click on the logo at the top left corner
Select "Properties"
Select the font "MesloLGS NF" and size "18"

Color theme

Default terminal colors can be inappropriate. They do not play well with the theme we will install later. To address this issue we will follow tomorrow color theme. Note tomorrow do not provide a theme file dedicated to windows default terminal, but we can define the colors manually.

Open Ubuntu
Right-click on the logo at the top left corner
Select "Properties"
Select "Colors"
Update the "Color Values" for each color as per the list below

from base16-tomorrow-night
first column is the original value, third column is the tomorrow theme value

default      name    tomorrow
38,38,38    - Black  - 29,31,33
0,55,218    - Blue   - 129,162,190
19,161,14   - Green  - 181,189,104
58,150,221  - Cyan   - 138,190,183
197,15,31   - Red    - 204,102,102
136,23,152  - Purple - 178,148,187
193,156,0   - Yellow - 240,198,116
204,204,204 - White  - 197,200,198
118,118,118 - Black  - 150,152,150
0,55,218    - Blue   - 129,162,190
19,161,14   - Green  - 181,189,104
58,150,221  - Cyan   - 138,190,183
197,15,31   - Red    - 204,102,102
136,23,152  - Purple - 178,148,187
193,156,0   - Yellow - 240,198,116
242,242,242 - White  - 255,255,255

Select the first color
Click "OK"

Oh My Zsh

WSL come with a minimal terminal. In this section, we will configure the terminal to add some features and style using Oh My ZSH and the theme Powerlevel10k.

Open "Ubuntu"

# Install Zsh
sudo apt install zsh -y
# Set Zsh as default shell
chsh -s $(which zsh)
# Close Ubuntu
exit

Open "Ubuntu"
Setup Zsh, type 0
Install Oh My Zsh

sh -c "$(wget https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh -O -)"

Powerlevel10K

Theme that add useful infomation right in the prompt.

Open the web browser Visite powerlevel10k
Follow Powerlevel install instructions...

git clone --depth=1 https://gitee.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

Install zsh-autosuggestions plugin that provides autocompletion based on our previous commands

git clone --depth=1 https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

Install exa a modern replacement for ls.

wget -c http://old-releases.ubuntu.com/ubuntu/pool/universe/r/rust-exa/exa_0.9.0-4_amd64.deb
sudo apt-get install ./exa_0.9.0-4_amd64.deb

Edit .zshrc to enable powerlevel theme

vim .zshrc

Press 'insert' to enter insert mode
Uncomment options and edit file as follow...

# Enable powerlevel10K
# ZSH_THEME="robbyrussell"
ZSH_THEME="powerlevel10k/powerlevel10k"

# Fix pasting URLs and other text messed up.
DISABLE_MAGIC_FUNCTIONS="true"

# Disable colors in ls.
DISABLE_LS_COLORS="true"

# Enable command auto-correction.
ENABLE_CORRECTION="true"

# Display red dots whilst waiting for completion.
COMPLETION_WAITING_DOTS="true"

# Disable marking untracked files under VCS as dirty. (much faster)
DISABLE_UNTRACKED_FILES_DIRTY="true"

# Enable plugins
plugins=(git zsh-autosuggestions)

# Alias of ls using exa
if [ -x "$(command -v exa)" ]; then
    alias ls="exa --icons"
    alias ll="exa --icons --long"
    alias la="exa --icons --long --all --group"
    alias lt="exa --icons --long --all --group --git --tree"
fi

Press 'esc' to exit insert mode
Press ':' and 'x' end 'return' to save and quit the file
Update Terminal

source .zshrc

Follow instructions to customise the prompt

Next, I suggest you follow Environment Manager - Conda.

Improved Shell (MacOS)

Maxime HEBRARD — Sat, 23 Jul 2022 07:53:00 +0000

MacOS comes with a default terminal, but it might be convenient to customized it to improve user experience.

Homebrew

Homebrew is a package manager for MacOS, we will use it to install all the software on Mac.

Open the web browser
Visite homebrew
Follow install instructions...

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Proceed with installation
Follow instructions to add homebrew to your PATH

echo >> /Users/mhebrard/.zprofile
echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/mhebrard/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

To install software using homebrew:

Open the web browser
Visite homebrew
Search for the software
Copy the recipe
Open 'Terminal'
Paste the recipe and run the command.
Follow installation instructions...

Git

Git is a version control software. It is also wildely use to distribure software.

First, check if Git is already installed on your machine:

Check git version

git --version
# git version 2.39.5 (Apple Git-154)

In case Git is not yet installed:

Open 'Terminal'
Install git from homebrew

brew install git

Fonts

We will change the default font of the terminal in preparation for the theme we will install later.

Open the web browser
Visit powerlevel10K - Fonts
Install the recommended fonts (MenloLGS)
- Download the font files from the github links
- Open Font Book
- In the top menu, select 'File' / 'Add Font to Current User...'
- Select the MesloLGS files
- Click 'Open'

Color theme

Default terminal colors can be inappropriate. They do not play well with the theme we will install later.

Open the web browser
Visit tomorrow theme
Navigate to 'OS X Terminal'
Download Tomorrow Night.terminal
Open 'Terminal'
Navigate to the menu 'Terminal / Settings...'
Navigate to the tab 'Profiles'
Below the list of profiles, click on '...'
Select 'Import...'
Select Tomorrow Night.terminal file
Click on 'Open'
In the list of profiles, select 'Tomorrow Night'
Click on 'Default'
Change font to 'MenloLGS NF'
Close the settings windows

Oh My Zsh

MacOS come with a minimal terminal. In this section, we will configure the terminal to add some features and style using Oh My ZSH and the theme Powerlevel10k.

Open the web browser
Visite Oh My Zsh
Follow Install instructions...

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Powerlevel10K

Theme that add useful infomation right in the prompt.

Open the web browser
Visite powerlevel10k
Follow Powerlevel install instructions...

git clone --depth=1 https://gitee.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

Install zsh-autosuggestions plugin that provides autocompletion based on our previous commands

git clone --depth=1 https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

Install eza a modern replacement for ls.

brew install eza

Edit .zshrc to enable powerlevel theme

vim .zshrc

Press 'i' to enter insert mode
Uncomment options and edit file as follow...

# ZSH_THEME="robbyrussell"
ZSH_THEME="powerlevel10k/powerlevel10k"

DISABLE_MAGIC_FUNCTIONS="true"

DISABLE_LS_COLORS="true"

ENABLE_CORRECTION="true"

COMPLETION_WAITING_DOTS="true"

DISABLE_UNTRACKED_FILES_DIRTY="true"

plugins=(git zsh-autosuggestions)

# Alias of ls using eza
if [ -x "$(command -v eza)" ]; then
    alias ls="eza --icons"
    alias ll="eza --icons --long"
    alias la="eza --icons --long --all --group"
    alias lt="eza --icons --long --all --group --git --tree"
fi

Press 'esc' to exit insert mode
Press ':' and 'x' end 'return' to save and quit the file
Update Terminal

source .zshrc

Follow instructions to customise the prompt

Check Config

Install neofetch from homebrew

brew install neofetch

Check config

neofetch

Next, I suggest you follow Environment Manager - Conda.

Branding logo in SVG

Maxime HEBRARD — Sat, 19 Mar 2022 02:59:45 +0000

Inspired by the logo of the Hacktoberfest 2016 seen below, I will create an image with my initials (MH) with a similar typography and decoration than the logo. Then customize the colors to produce the cover image of this post.

Find the code related to this project on GitHub @ mhebrard/mh-logo.

What is Hacktoberfest?

Hacktoberfest is a contest organized by Digital Ocean every years to promote opensource. By contributing to multiple projects hosted on GitHub or GitLab during the month of October, one can earn perks like T-shirt and stickers.

Why this image?

2016 is the year I first joined the contest and I like this T-shirt very much. The fill of the letter represent lines of code and the background pictures circuit board or git branching history. That correspond to my interest. Also, H is the first letter of my family name, so If I could reproduce the H and add a M with the same look and feel, that would become a nice wallpaper for future content.

Setup

Git repo

I always start a new project by creating a repository on GitHub. You can follow along from there: mhebrard/mh-logo.

vsCode

I use Visual Studio Code as my text editor, with few extentions installed:

Emmet: Built-in extention that help write HTML. For example, type ! then enter to obtain a pre-filled index.html template.
Live Server: Serve your current project. Come with hot reload.
Prettier: Automatically correct indentation on save.
Git Graph: Easy to use interface to manage git repo from within vsCode.

Initial files

Hacktoberfest-2016.png: Image to replicate.
index.html: Display the PNG and the SVG image.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Document</title>
  </head>
  <body>
    <img src="./Hacktoberfest-2016.png" alt="hack" class="wallpaper" />
    <img src="./MH.svg" alt="MH" class="svg" />
  </body>
</html>

style.css: Position the PNG to display the H near the top-left corner of the screen and the SVG on top of it.

/* CSS variables 
 * Define color scheme
 */
:root {
  --background: #3a3937;
  --primary: #ce873d;
  --secondary: #949494;
}
/* Remove margin
 * Set background
 */
body {
  margin: 0;
  background-color: var(--background);
}

/* Move and resize the wallpaper 
 * to place the H conveniently 
 */
.wallpaper {
  position: absolute;
  left: -340px;
  top: -40px;
  height: 700px;
}

/* Place the SVG on top of the wallpaper */
.svg {
  position: absolute;
}

MH.svg: SVG in which to replicate the logo

<svg version="1.1"
  width="1920" height="1080"
  xmlns="http://www.w3.org/2000/svg"
  ><!-- Size the SVG as a HD wallpaper -->

  <!-- Show SVG contour -->
  <rect width="100%" height="100%" fill="none" stroke="red" />

</svg>

With those files created we can trigger live server by right-click on index.html and select "Open with Live Server". That will open the web browser and display the wallpaper and the SVG live.

Redraw of H

In MH.svg, I add a group <g> that will contain the H letter. In this group, I add a <path> that will draw the H contours. I specify no fill, a stroke color and a stroke width for the path. The main attribute of the path is d that contain a string defining each anchor point of the path. This string is composed as a sequence of one letter that indicate the drawing instruction (M: move, L: line, H: horizontal, V: vertical), and X and Y coordinates. Note that is SVG, the origin (0,0) is the top-left corner of the image. Also, upper-case letters refer to absolute coordinates and lower-case letters refers to relative coordinates from the previous anchor point.

<!-- in MH.svg -->
<g id="H">
  <path fill="none" stroke="pink" stroke-width="5"
    d="M220 550 l-30 -30 v-370
    l-10 -10 -50 50 -20 -20 90 -90 50 50
    v170 l80 -80 v-70
    l-30 -30 40 -40 50 50 v340
    l10 10 50 -50 20 20 -90 90 -50 -50
    v-170 l-80 80 v120 z
    "
  />
</g>

The first line in the 'd' attribute means "move -without drawing- to (220, 550), then draw a line from the current point to 30px on the left and 30px on top, then draw a vertical line of 370px on top".
The next line draw the top-left shape of the H -the serif.
The next line draw the top of the horizontal bar of the H.
The next line draw the top-right shape of the H -the sans-serif.
The next line is a copy of the serif but with all signs inverted.
The next line finishes the shape and closes the path.

Creation of M

Now let's move the H away and draw an M.

<g id="M" transform="translate(0, 0)">
  <path fill="none" stroke="pink" stroke-width="5"
    d="M220 550 l-30 -30 v-370
    l-10 -10 -50 50 -20 -20 90 -90 50 50
    l80 80 60 -60
    l-30 -30 40 -40 50 50 v340
    l10 10 50 -50 20 20 -90 90 -50 -50
    v-170 -60 l-60 60 -80 -80 
    v280 z
    "
  />
</g>

<g id="H" transform="translate(400, 0)">
<!-- [...] -->

First two lines are a copy of the H that draw the start and the top left serif.
Next line continue the serif until it "hit" the right bar of the H, then move up to draw the top of the M. The line stop when reaching the Y coordinate where the sans-serif shape start.
Next 2 lines are a copy of the sans-serif and the botom-right serif of the H.
Next line ensure that the M shape has same width as the horizontal bar of the H.
Last line close the path.

At this point we have our two letters MH.

Fill

Let's add to the SVG the code representation as fill of the main letters. First I overlap the M and the H and give it some fill to highlight which part of the image I need to cover with code. I also create a new group that will contain the code representation.

<g id="M" transform="translate(0, 0)">
  <path fill="rgba(255, 255, 255, 0.3)" stroke="pink" stroke-width="5" d="[...]"/>
<!-- [...] -->

<g id="H" transform="translate(0, 0)">
  <path fill="rgba(255, 255, 255, 0.3)" stroke="pink" stroke-width="5" d="[...]" />
<!-- [...] -->

<g id="Fill" transform="translate(0, 0)">
  <path fill="none" stroke="lime" stroke-width="5" d="[...]"/>
<!-- [...] -->

The fill itself is representing 2 columns of text, starting at 190px and 330px on x axis. It is composed of horizontal lines of random length with a constant spacing of 10px. Note that the tabulation are 20px. Each line is separated by 10px, with few blank lines. Path lines are rounded using stroke-linecap attribute.

<g id="Fill" transform="translate(0, 0)">
    <path fill="none" stroke="lime" stroke-width="5"  stroke-linecap="round"
      d="M120 90 h20 m10 0 h30 m10 0 h60 M330 90 h50
      M120 100 h20 m10 0 h60 M330 100 h120
      M120 110 h20 m10 0 h40 m10 0 h30 M330 110 h30 m10 0 h60
      M120 120 h20 m10 0 h40 m10 0 h50 M330 120 h30 m10 0 h30 m10 0 h30
      M120 130 h20 m10 0 h10 m10 0 h20
      M120 150 h10 m10 0 h70 m10 0 h40 M330 150 h10
      M120 160 h10 m10 0 h30 m10 0 h30 M330 160 m20 0 h20 m10 0 h30 m10 0 h60
      M190 170 m20 0 h20 m10 0 h20 m10 0 h20 M330 170 m20 0 h10 m10 0 h30 m10 0 h10 m10 0 h30
      M190 180 m20 0 h40 m10 0 h40 M330 180 m20 0 h30 m10 0 h30 m10 0 h20
      M190 190 m20 0 h10
      M190 200 m20 0 h10
      M190 210 m20 0 h20 m10 0 h20 M330 210 h10
      M190 220 h10 M330 220 m20 0 h10 m10 0 h20
      M190 230 h10 m10 0 h60 m10 0 h30 M330 230 m20 0 h10 m10 0 h30 m10 0 h10 m10 0 h20
      M190 240 h100
      M190 260 h10 M330 260 h10 m10 0 h100
      M190 270 m20 0 h20 m10 0 h30 M330 270 h30 m10 0 h30 m10 0 h50
      M190 280 m20 0 h10 m10 0 h20 m10 0 h20 m10 0 h20
      M190 290 m20 0 h10 m10 0 h30 m10 0 h30
      M190 300 m20 0 h10 m10 0 h30 m10 0 h30 M330 300 h10
      M190 310 m20 0 h10 m10 0 h30 m10 0 h30 M330 310 m20 0 h20 m10 0 h40
      M190 320 m20 0 h10 m10 0 h20 m10 0 h50 M330 320 m20 0 h20 m10 0 h40
      M190 330 h10 m10 0 h20 M330 330 m20 0 h30 m10 0 h30 m10 0 h40
      M190 350 h20 m10 0 h40 m10 0 h10 m10 0 h20
      M190 360 h30 m10 0 h10 m10 0 h50 M330 360 h20 m10 0 h30 m10 0 h60
      M190 370 h10 m10 0 h40 M330 370 h10 m10 0 h40 m10 0 h20
      M190 390 h10
      M190 400 m20 0 h20 m10 0 h30 M330 400 h10
      M190 410 m20 0 h10 m10 0 h20 M330 410 m20 0 h20 m10 0 h30
      M190 420 m20 0 h10 m10 0 h20 M330 420 m20 0 h20 m10 0 h30
      M190 430 m20 0 h20 m10 0 h20 M330 430 m20 0 h20 m10 0 h30
      M190 440 h10 M330 440 m20 0 h40 m10 0 h30 m10 0 h20
      M190 460 h10
      M190 470 m20 0 h30 M330 470 h10 m10 0 h60 m10 0 h10 m10 0 h20 m10 0 h30
      M190 480 m20 0 h10 m10 0 h20 M330 480 h20 m10 0 h50 m10 0 h20 m10 0 h60
      M190 490 m20 0 h20 m10 0 h20 M330 490 h10 m10 0 h20 m10 0 h30 m10 0 h40
      M190 500 m20 0 h10 m10 0 h30 M330 500 h30 m10 0 h20 m10 0 h40 m10 0 h20
      M190 510 m20 0 h30 m10 0 h20
      M190 520 h10
      M190 530 M330 530 m30 0 h100
      M190 540 h30
      "
    />
  </g>

Now we want the fill to appears only within the letters. For that we encapsulate the letters paths in clipPath objects and assign an id to each clipPath. The clipPaths are move into a defs section. Like the header for HTML, the defs of SVG define objects without rendering them.

<defs>
  <clipPath id="clipM">
    <path id="shapeM" fill="none" stroke="#ce873d" stroke-width="5" d="[...]" />
  </clipPath>

  <clipPath id="clipH">
    <path id="shapeH" fill="none" stroke="#ce873d" stroke-width="5" d="[...]" />
  </clipPath>

  <g id="Fill">
    <path fill="none" stroke="#949494" stroke-width="5" d="[...]" />
  </g>

</defs>

Then in the body of the SVG (anything outside the defs), we can specify what to render and use the objects defined in the defs section. Note that we first use the fill object that is clipped using the clipPath containing the letter contour. Then we use the letter contour itself that will be render on top of the fill.

<g id="M">
  <use href="#Fill" clip-path="url(#clipM)" />
  <use href="#shapeM"/>
</g>

<g id="H" transform="translate(400, 0)">
  <use href="#Fill" clip-path="url(#clipH)" />
  <use href="#shapeH"/>
</g>

Branches

Time to focus on the mother board branches. Similar as the fill, I define objects in the defs section that I can reuse for both letters. Starting with re-draw of the base image and more precisely the left part of the branches. The group is composed of a unique path that draw the grey banches and a sub-group for the orange circles

<defs>
<!-- [...] -->
  <g id="branchLeft">
    <path fill="none" stroke="#949494" stroke-width="3" stroke-linecap="round" 
      d="
      M170 170 v330
      M170 170 l-140 140
      M170 170 m-40 40 h-30 l-30 30
      M170 170 m-80 80 v30 l-30 30
      M170 170 v80 l-30 30 v180
      M170 170 v80 l-30 30 v40 l-60 60
      M170 170 v80 l-30 30 v100 l-40 40 v30
      " />
    <g fill="#3a3937" stroke="#ce873d" stroke-width="3">
      <circle cx="170" cy="500" r="4"/>
      <circle cx="30" cy="310" r="4"/>
      <circle cx="70" cy="240" r="4"/>
      <circle cx="60" cy="310" r="4"/>
      <circle cx="140" cy="460" r="4"/>
      <circle cx="80" cy="380" r="4"/>
      <circle cx="100" cy="450" r="4"/>
    </g>
  </g>
</defs>
<!-- [...] -->
<g id="H" transform="translate(0, 0)">
  <use href="#branchLeft" />
  <use href="#Fill" clip-path="url(#clipH)" />
  <use href="#shapeH"/>
</g>

The branches on the right are a copy of the left object with the path coordinates inverted. Note that we have to re-position each circle as they used absolute coordinate

<defs>
<!-- [...] -->
  <g id="branchRight">
    <path fill="none" stroke="#949494" stroke-width="3" stroke-linecap="round" 
      d="
      M410 440 v-360
      M410 440 v-320 l-50 -50
      M410 440 l140 -140
      M410 440 m40 -40 h30 l30 -30
      M410 440 m80 -80 v-30 l30 -30
      M410 440 v-80 l30 -30 v-180
      M410 440 v-80 l30 -30 v-40 l60 -60
      M410 440 v-80 l30 -30 v-100 l40 -40 v-30
      " />
    <g fill="#3a3937" stroke="#ce873d" stroke-width="3">
      <circle cx="360" cy="70" r="4"/>
      <circle cx="410" cy="80" r="4"/>
      <circle cx="440" cy="150" r="4"/>
      <circle cx="480" cy="160" r="4"/>
      <circle cx="500" cy="230" r="4"/>
      <circle cx="520" cy="300" r="4"/>
      <circle cx="550" cy="300" r="4"/>
      <circle cx="510" cy="370" r="4"/>
    </g>
  </g>
</defs>
<!-- [...] -->
<g id="H" transform="translate(0, 0)">
  <use href="#branchLeft" />
  <use href="#branchRight" />
  <use href="#Fill" clip-path="url(#clipH)" />
  <use href="#shapeH"/>
</g>

Those two objects branchLeft and branchRight will be reused with the M, but first let's create another object for the top and bottom branches of the H.

<defs>
<!-- [...] -->
  <g id="branchH">
    <path fill="none" stroke="#949494" stroke-width="3" stroke-linecap="round" 
      d="
      M270 250 v-190
      M270 250 v-140 l-40 -40
      M270 250 l30 -30
      M310 370 v190
      M310 370 v140 l40 40
      M310 370 l-30 30
      " />
    <g fill="#3a3937" stroke="#ce873d" stroke-width="3">
      <circle cx="270" cy="60" r="4"/>
      <circle cx="230" cy="70" r="4"/>
      <circle cx="300" cy="220" r="4"/>
      <circle cx="310" cy="560" r="4"/>
      <circle cx="350" cy="550" r="4"/>
      <circle cx="280" cy="400" r="4"/>
    </g>
  </g>
</defs>
<!-- [...] -->
<g id="H" transform="translate(0, 0)">
  <use href="#branchLeft" />
  <use href="#branchH" />
  <use href="#branchRight" />
  <use href="#Fill" clip-path="url(#clipH)" />
  <use href="#shapeH"/>
</g>

Now let's move the H aside and focus on the M. We can reuse branchLeft as is. branchRight need to be move to the right to fit the different letter width.

<g id="M" transform="translate(0, 0)">
  <use href="#branchLeft" />
  <use href="#branchRight" transform="translate(60,0)"/>
  <use href="#Fill" clip-path="url(#clipM)" />
  <use href="#shapeM"/>
</g> 

<g id="H" transform="translate(700, 0)">
<!-- [...] -->

Then create a new object to draw some branches at the top and bottom of the M.

<defs>
<!--[...]-->
  <g id="branchM">
    <path fill="none" stroke="#949494" stroke-width="3" stroke-linecap="round" 
      d="
      M330 180 v-40
      M330 180 l-100 -100
      M370 310 v240
      M370 310 l-30 30
      M370 310 v40 l-60 60
      M370 310 v40 l-30 30 v30 l-60 60
      M370 310 v120 l-70 70
      M370 310 v120 l-30 30 v60
      M370 310 v180 l40 40
      " />
    <g fill="#3a3937" stroke="#ce873d" stroke-width="3">
      <circle cx="330" cy="140" r="4"/>
      <circle cx="230" cy="80" r="4"/>
      <circle cx="370" cy="550" r="4"/>
      <circle cx="340" cy="340" r="4"/>
      <circle cx="310" cy="410" r="4"/>
      <circle cx="280" cy="470" r="4"/>
      <circle cx="300" cy="500" r="4"/>
      <circle cx="340" cy="520" r="4"/>
      <circle cx="410" cy="530" r="4"/>    
    </g>
  </g>
</defs>
<!-- [...] -->
<g id="M" transform="translate(0, 0)">
  <use href="#branchLeft" />
  <use href="#branchM" />
  <use href="#branchRight" transform="translate(60,0)"/>
  <use href="#Fill" clip-path="url(#clipM)" />
  <use href="#shapeM"/>
</g>

Style

I am a big fan of the movie Tron (both original and legacy), so let's change the colors of the image and add some glow !

The image is composed of two colors that are currently hard coded in each SVG object. To control the fill and stroke of an object, we can use the keyword currentColor in place of the color code itself. That will refer to the color attribute of the current style. In order to define two colors, we need to use a dedicated class for the accent color.
A style section can be added directly in the SVG to define CSS statements.

<style>
  svg {
    color: #949494;
  }
  .accent {
    color: #ce873d;
  }
</style>

<defs>
  <clipPath id="clipM">
    <path id="shapeM" class="accent" fill="none" stroke="currentColor" stroke-width="5" d="[...]"/>
  </clipPath>

  <clipPath id="clipH">
    <path id="shapeH" class="accent" fill="none" stroke="currentColor" stroke-width="5" d="[...]"/>
  </clipPath>

  <g id="Fill">
    <path fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" d="[...]" />
  </g>

  <g id="branchLeft">
    <path fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" d="[...]" />
    <g class="accent" fill="currentColor" stroke="currentColor" stroke-width="3">
<!-- [...] -->

  <g id="branchRight">
    <path fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" d="[...]" />
    <g class="accent" fill="currentColor" stroke="currentColor" stroke-width="3">
<!-- [...] -->

  <g id="branchH">
    <path fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" d="[...]" />
    <g class="accent" fill="currentColor" stroke="currentColor" stroke-width="3">
<!-- [...] -->

  <g id="branchM">
    <path fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" d="[...]" />
    <g class="accent" fill="currentColor" stroke="currentColor" stroke-width="3">
<!-- [...] -->

Next, let's add a glow effect on the accent color objects. For that we define a filter object that produce the glow and we assign it to each object as we did with the clipPath.

<defs>
<!-- [...] -->
  <g id="branchLeft">
    <!-- [...] -->
    <g class="accent" fill="currentColor" stroke="currentColor" stroke-width="3" filter="url(#accent-glow)">
<!-- [...] -->

  <g id="branchRight">
    <!-- [...] -->
    <g class="accent" fill="currentColor" stroke="currentColor" stroke-width="3" filter="url(#accent-glow)">
<!-- [...] -->

  <g id="branchH">
    <!-- [...] -->
    <g class="accent" fill="currentColor" stroke="currentColor" stroke-width="3" filter="url(#accent-glow)">
<!-- [...] -->

  <g id="branchM">
    <!-- [...] -->
    <g class="accent" fill="currentColor" stroke="currentColor" stroke-width="3" filter="url(#accent-glow)">
<!-- [...] -->

  <filter id="accent-glow" class="accent" x="-50%" y="-50%" width="200%" height="200%">
    <feFlood result="flood" flood-color="currentColor" flood-opacity="1"></feFlood>
    <feComposite in="flood" result="mask" in2="SourceGraphic" operator="in"></feComposite>
    <feMorphology in="mask" result="dilated" operator="dilate" radius="3"></feMorphology>
    <feGaussianBlur in="dilated" result="blurred" stdDeviation="6"></feGaussianBlur>
    <feMerge>
      <feMergeNode in="blurred"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
  </filter>
</defs>
<!-- [...] -->

<g id="M" transform="translate(0, 0)">
  <!-- [...] -->
  <use href="#shapeM" filter="url(#accent-glow)"/>
<!-- [...] -->

<g id="H" transform="translate(700, 0)">
  <!-- [...] -->
  <use href="#shapeH" filter="url(#accent-glow)"/>
<!-- [...] -->

Now we can easily change the colors of the SVG to be a variant of cyan. Note that I also turn the background color to black using the rectangle that take 100% of the SVG space.

<style>
  svg {
    color: #ccffff;
  }
  .accent {
    color: #55ffff;
  }
</style>
<!-- [...] -->
<rect width="100%" height="100%" fill="#000" stroke="red" />

Positioning

Finally we can find the center of each letter, their dimentions, and move them to be evenly distributed on the wallpaper.

In the image above, the pink trace identify the center of each letter and draw a circle of 600px diameter around them. The red trace heighlight the center of the wallpaper. The green trace notify even spacing to place the two items of 600x600 on the wallpaper.

The final translation of the letter is as below:

<g id="M" transform="translate(220,230)">
<!-- [...]--->

<g id="H" transform="translate(1090, 230)">

Save

Last step is to remove the traces, and save the image as PNG. We can do that using the web browser, right-click on the image and select "Copy image", then paste the result in your favorite image editor (Photoshop...) and save as PNG.