Are there any set rules/requirements for making successful AR Markers?

I am currently working on a project using the AFAME library that allows users to personalize the content and features of text to be viewed within AR via markers or geolocations. I wanted to make some AR Markers that would match the branding of the product, so I created multiple markers for this using my own Photoshop-created images entered into this site, but very few of them have actually worked when running their .PATT files and viewing the images with my camera. For example, This marker is currently working, but this this marker is not. I understand that there should be clear lines and asymmetric symbols, but if the first works, then why not the second? I've been using the following code:

<!DOCTYPE HTML>
<html>
<head>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="js/aframe.min.js"></script>
<script src="js/aframe-ar.js"></script>
<!-- support 3D text -->
<script src="js/aframe-text-geometry-component.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/3.0.2/aframe/build/aframe-ar-nft.js"></script>

</head>

<body style="background: #888888; margin: 0px; overflow: hidden;">


<script>

AFRAME.registerComponent("registerevents", {
    init: function () 
    {

        this.firstDetection = false;
        this.markerVisible = false;
        this.marker = this.el;
        this.root = document.querySelector("#root");
        this.word = document.querySelector("#words");

        this.root.object3D.visible = false;

        let self = this;

        this.marker.addEventListener('markerFound', function() {
            self.markerVisible = true;
        });

        this.marker.addEventListener('markerLost', function() {
            self.markerVisible = false;
        });

        this.p = new THREE.Vector3();
        this.q = new THREE.Quaternion();
        this.s = new THREE.Vector3();   
    },

    tick: function (time, deltaTime) 
    {
         // check if marker is found for the first time;
         //  if so, make object visible and align position/rotation.
         if ( this.markerVisible && !this.firstDetection )
         {
            this.firstDetection = true;
            this.root.object3D.visible = true;
            let words = document.querySelector("#words");
            words.setAttribute("animation__rise", "autoplay", "true");
            words.setAttribute("animation__fade", "autoplay", "true");
        }

        // if marker is visible, align the entity to the marker
        if (this.markerVisible)
        {
            // sync position of marker and 3D objects
            let lerpAmount = 0.5;
            this.marker.object3D.getWorldPosition(this.p);
            this.marker.object3D.getWorldQuaternion(this.q);
            this.marker.object3D.getWorldScale(this.s);
            this.root.object3D.position.lerp(this.p, lerpAmount);
            this.root.object3D.quaternion.slerp(this.q, lerpAmount);
            this.root.object3D.scale.lerp(this.s, lerpAmount);

            this.word.setAttribute("color", "green");
        } 
        else
        {
            // marker lost
            this.word.setAttribute("color", "red");            
        }
    }
});

</script>
    <a-scene embedded vr-mode-ui="enabled: false;" arjs="debugUIEnabled: false;">
    <a-marker type = "pattern" url = "/application/static/markers/Marker3.patt" id = "innocent">
        <a-entity 
            id="words" 
            text-geometry="value: Hello, world!;"
            material="color: yellow; repeat: 0.5 0.5;" 
            rotation="9 0 0"
            animation__rise = "property: position; dur: 5000; easing: linear; dir: normal; from:-1 0 0; to: -1 0 -2; loop: true;"
            animation__fade = "property: material.opacity; dur: 4000; from: 1.0; to: 0.0; loop:true; delay: 1000;"
            ></a-entity>
        </a-marker>

     <a-entity camera></a-entity>
    </a-scene>

</body>
</html>

When the code runs the marker with a 3, there are no issues in the console or the localhost, but there are still no values shown on the screen. The marker with a 1 has the same background and is in the exact same folder, and displays the text desired. Are there any tools or tips that can improve the creation of unique AR markers?