Color_Blind.tsx

import * as React from "react";
import { Frame, PropertyControls, Stack ControlType } from "framer";

export class Color_Blind extends React.Component {

    static defaultProps = {
        width: 2000,
        height: 1200,
        background: "white",
    };

    static propertyControls = {
        typeface: {
            type: ControlType.Enum,
            title: "Typeface",
            options: ["Helvetica", "Arial", "Times", "Courier", "Verdana", "Tahoma"],
        }
    };

    CHILDREN_WIDTH = this.props.children[0].props.width;
    CHILDREN_HEIGHT = this.props.children[0].props.height;

    renderChild (filter = "achromatopsia") {
        
        return(
            <Frame width={this.CHILDREN_WIDTH} height={this.CHILDREN_HEIGHT}>
                <svg width='600' height='100'>
                    <g>
                        <path d='M 297.29747,550.86823 C 283.52243,535.43191 249.1268,505.33855 220.86277,483.99412 C 137.11867,420.75228 125.72108,411.5999 91.719238,380.29088 C 29.03471,322.57071 2.413622,264.58086 2.5048478,185.95124 C 2.5493594,147.56739 5.1656152,132.77929 15.914734,110.15398 C 34.151433,71.768267 61.014996,43.244667 95.360052,25.799457 C 119.68545,13.443675 131.6827,7.9542046 172.30448,7.7296236 C 214.79777,7.4947896 223.74311,12.449347 248.73919,26.181459 C 279.1637,42.895777 310.47909,78.617167 316.95242,103.99205 L 320.95052,119.66445 L 330.81015,98.079942 C 386.52632,-23.892986 564.40851,-22.06811 626.31244,101.11153 C 645.95011,140.18758 648.10608,223.6247 630.69256,270.6244 C 607.97729,331.93377 565.31255,378.67493 466.68622,450.30098 C 402.0054,497.27462 328.80148,568.34684 323.70555,578.32901 C 317.79007,589.91654 323.42339,580.14491 297.29747,550.86823 z'
                        fill='red' />
                    </g>
                    <filter id='achromatopsia'><feColorMatrix in='SourceGraphic' values='0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0' /></filter>
                    <filter id='protanopia'><feColorMatrix in='SourceGraphic' values='0.567, 0.433, 0, 0, 0 0.558, 0.442, 0, 0, 0 0, 0.242, 0.758, 0, 0 0, 0, 0, 1, 0' /></filter>
                    <filter id='protanomaly'><feColorMatrix in='SourceGraphic' values='0.817, 0.183, 0, 0, 0 0.333, 0.667, 0, 0, 0 0, 0.125, 0.875, 0, 0 0, 0, 0, 1, 0' /></filter>
                    <filter id='deuteranopia'><feColorMatrix in='SourceGraphic' values='0.625, 0.375, 0, 0, 0 0.7, 0.3, 0, 0, 0 0, 0.3, 0.7, 0, 0 0, 0, 0, 1, 0' /></filter>
                    <filter id='deuteranomaly'><feColorMatrix in='SourceGraphic' values='0.8, 0.2, 0, 0, 0 0.258, 0.742, 0, 0, 0 0, 0.142, 0.858, 0, 0 0, 0, 0, 1, 0' /></filter>
                    <filter id='tritanopia'><feColorMatrix in='SourceGraphic' values='0.95, 0.05, 0, 0, 0 0, 0.433, 0.567, 0, 0 0, 0.475, 0.525, 0, 0 0, 0, 0, 1, 0' /></filter>
                    <filter id='tritanomaly'><feColorMatrix in='SourceGraphic' values='0.967, 0.033, 0, 0, 0 0, 0.733, 0.267, 0, 0 0, 0.183, 0.817, 0, 0 0, 0, 0, 1, 0' /></filter>
                    <filter id='achromatopsia'><feColorMatrix in='SourceGraphic' values='0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0.299, 0.587, 0.114, 0, 0 0, 0, 0, 1, 0' /></filter>
                    <filter id='achromatomaly'><feColorMatrix in='SourceGraphic' values='0.618, 0.320, 0.062, 0, 0 0.163, 0.775, 0.062, 0, 0 0.163, 0.320, 0.516, 0, 0 0, 0, 0, 1, 0' /></filter>
                </svg>
                <div style={{filter: `url(${`#${filter}`})`}}>
                    {this.props.children}
                </div>
            </Frame>
        )
    }

    render() {

        return (
            <Stack 
                width={this.props.width} 
                height={this.props.height} 
                gap={100}
                background="#424242"
                direction="vertical"
                distribution="center"
                alignment="center"
            >
                <Stack 
                    width={this.props.width} 
                    height={this.CHILDREN_HEIGHT} 
                    gap={100}
                    direction="horizontal"
                    distribution="center"
                    alignment="center"
                >
                    {this.renderChild("achromatopsia")}
                    {this.renderChild("protanopia")}
                    {this.renderChild("protanomaly")}
                </Stack>
                
                <Stack 
                    width={this.props.width} 
                    height={this.CHILDREN_HEIGHT} 
                    gap={100}
                    direction="horizontal"
                    distribution="center"
                    alignment="center"
                >
                    {this.renderChild("deuteranopia")}
                    {this.renderChild("deuteranomaly")}
                    {this.renderChild("tritanopia")}
                </Stack>

                <Stack 
                    width={this.props.width} 
                    height={this.CHILDREN_HEIGHT} 
                    gap={100}
                    direction="horizontal"
                    distribution="center"
                    alignment="center"
                >
                    {this.renderChild("tritanomaly")}
                    {this.renderChild("achromatopsia")}
                    {this.renderChild("achromatomaly")}
                </Stack>
            </Stack>
        );
    }
}