Skip to content

Instantly share code, notes, and snippets.

@herrstrietzel
herrstrietzel / htmltext-to-svg.html
Last active April 10, 2024 17:01
SO: HTML text to SVG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Convert HTML text to SVG</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&amp;display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./style.css">
</head>
This file has been truncated, but you can view the full file.
{
"axisRegistry": [
{
"tag": "VOLM",
"displayName": "Volume",
"min": 0.0,
"defaultValue": 0.0,
"max": 100.0,
"precision": 0,
"description": "Expands and exaggerates details of a typeface to emphasize the personality. Understood in a percentage amount, it goes from a neutral state (0%) to a maximum level (100%).",
@herrstrietzel
herrstrietzel / svg.pathData.relativeOrAbsolute
Last active November 4, 2022 01:08
Convert svg pathData to relative or absolute
/**
* Convert svg paths using the upcoming getPathData() method
* which is expected to be natively supported by browsers
* and the successors of the deprecated pathSegList() methods
*
* Based on the svg working draft
* https://svgwg.org/specs/paths/#InterfaceSVGPathData
*
* Dependency:
* Use Jarek Foksa's polyfill
@herrstrietzel
herrstrietzel / flatten.js
Last active July 12, 2022 03:06 — forked from timo22345/flatten.js
Flatten.js, general SVG flattener. Flattens transformations of SVG shapes and paths. All shapes and path commands are supported.
/*
Random path and shape generator, flattener test base: https://jsfiddle.net/fjm9423q/embedded/result/
Basic usage example: https://jsfiddle.net/nrjvmqur/embedded/result/
Basic usage: flatten(document.getElementById('svg'));
What it does: Flattens elements (converts elements to paths and flattens transformations).
If the argument element (whose id is above 'svg') has children, or it's descendants has children,
these children elements are flattened also.