WIP: Add initial meme generator! #748

Merged
skhameneh merged 16 commits from featureTesting into master 2018-11-30 03:54:55 +01:00
2 changed files with 37 additions and 0 deletions
Showing only changes of commit 010734629e - Show all commits

View file

@ -69,4 +69,5 @@ export const PRESETS = {
'Green Machine': require('../FontFaces/GreenMachine'),
'vapor wave': require('../FontFaces/VaporWave'),
'The Special': require('../FontFaces/TheSpecial'),
'Old Blue': require('../FontFaces/OldBlue'),
}

View file

@ -0,0 +1,36 @@
import React from 'react';
const charToFullWidth = char => {
const c = char.charCodeAt( 0 )
return c >= 33 && c <= 126
? String.fromCharCode( ( c - 33 ) + 65281 )
: char
}
const stringToFullWidth =
module.exports = {
container: {},
editorStyle: {},
text: {
fontFamily: 'Segoe UI,Helvetica,Arial',
},
textRender: (text) => {
const id = `curve-${text.replace(/[^A-Za-z0-9]/g, '')}-oceanwave`
return (
<svg viewBox="0 0 500 50" style={{ height: '4em', fontFamily: 'Arial', fontWeight: 'bold' }}>
<path id={id} fill="transparent" d="M 0 50 Q 50 0 100 50 Q 150 100 200 50 Q 250 0 300 50 Q 350 100 400 50 Q 450 0 500 50 Q 550 100 600 50 " transform="scale(1 0.5) translate(0 15)" />
<text x="10" style={{ fill: '#4dc2fe', fontWeight: 900, letterSpacing: '-0.15em', textShadow: '0.15em -0.1em #1c55a0' }}>
<textPath href={`#${id}`}>
{text}
</textPath>
</text>
<text x="10" style={{ fill: 'transparent', stroke: '#1c55a0', strokeWidth: '.01em', fontWeight: 900, letterSpacing: '-0.15em' }}>
<textPath href={`#${id}`}>
{text}
</textPath>
</text>
</svg>
);
},
};