• Twenty Twenty Three

    This theme had a whole lot of styles and that is the inspiration behind this pattern. The marks like brush strokes, pick out the highlight colors from the styles as a cover pattern.

    Pattern

    Code

    <!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"clamp(1.5rem, 5vw, 2rem)","right":"clamp(1.5rem, 5vw, 2rem)"}}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--50);padding-right:clamp(1.5rem, 5vw, 2rem);padding-bottom:var(--wp--preset--spacing--50);padding-left:clamp(1.5rem, 5vw, 2rem)"><!-- wp:columns {"isStackedOnMobile":false,"align":"wide","style":{"spacing":{"blockGap":{"top":"clamp(3.75rem, 10vw, 7rem)","left":"var:preset|spacing|60"}}}} -->
    <div class="wp-block-columns alignwide is-not-stacked-on-mobile"><!-- wp:column {"width":"50px"} -->
    <div class="wp-block-column" style="flex-basis:50px"><!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#abe262"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#abe262;min-height:50px"></div>
    <!-- /wp:group -->
    
    <!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"}},"backgroundColor":"contrast","layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-contrast-background-color has-background" style="border-radius:100px;min-height:50px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":"50px"} -->
    <div class="wp-block-column" style="flex-basis:50px"><!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#fdfa85"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#fdfa85;min-height:50px"></div>
    <!-- /wp:group -->
    
    <!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"}},"backgroundColor":"contrast","layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-contrast-background-color has-background" style="border-radius:100px;min-height:50px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":"50px"} -->
    <div class="wp-block-column" style="flex-basis:50px"><!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#7ecfa4"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#7ecfa4;min-height:50px"></div>
    <!-- /wp:group -->
    
    <!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"}},"backgroundColor":"contrast","layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-contrast-background-color has-background" style="border-radius:100px;min-height:50px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":"50px"} -->
    <div class="wp-block-column" style="flex-basis:50px"><!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#dcddc2"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#dcddc2;min-height:50px"></div>
    <!-- /wp:group -->
    
    <!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#050504"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#050504;min-height:50px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":"50px"} -->
    <div class="wp-block-column" style="flex-basis:50px"><!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#f3f3f1"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#f3f3f1;min-height:50px"></div>
    <!-- /wp:group -->
    
    <!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#2400ff"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#2400ff;min-height:50px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":"50px"} -->
    <div class="wp-block-column" style="flex-basis:50px"><!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#ff5153"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#ff5153;min-height:50px"></div>
    <!-- /wp:group -->
    
    <!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"}},"backgroundColor":"contrast","layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-contrast-background-color has-background" style="border-radius:100px;min-height:50px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":"50px"} -->
    <div class="wp-block-column" style="flex-basis:50px"><!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#b50b3e"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#b50b3e;min-height:50px"></div>
    <!-- /wp:group -->
    
    <!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#e5e7f2"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#e5e7f2;min-height:50px"></div>
    <!-- /wp:group -->
    
    <!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#0b0033"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#0b0033;min-height:50px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":"50px"} -->
    <div class="wp-block-column" style="flex-basis:50px"><!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#826d41"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#826d41;min-height:50px"></div>
    <!-- /wp:group -->
    
    <!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#dfccc1"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#dfccc1;min-height:50px"></div>
    <!-- /wp:group -->
    
    <!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#202124"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#202124;min-height:50px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column -->
    
    <!-- wp:column {"width":"50px"} -->
    <div class="wp-block-column" style="flex-basis:50px"><!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#f3c474"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#f3c474;min-height:50px"></div>
    <!-- /wp:group -->
    
    <!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#f5f2ed"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#f5f2ed;min-height:50px"></div>
    <!-- /wp:group -->
    
    <!-- wp:group {"style":{"dimensions":{"minHeight":"50px"},"border":{"radius":"100px"},"color":{"background":"#5a4961"}},"layout":{"type":"constrained"}} -->
    <div class="wp-block-group has-background" style="border-radius:100px;background-color:#5a4961;min-height:50px"></div>
    <!-- /wp:group --></div>
    <!-- /wp:column --></div>
    <!-- /wp:columns --></div>
    <!-- /wp:group -->

    Screenshot


Tags: