1A23 Studio的 RSS 预览

Rotated Background Patterns in CSS with SVG

2025-03-07 05:18:49

While working on the WordPress theme Tìtsyul Amip Twenty Twenty-Five, a need arose for a more flexible way to implement rotated background patterns in CSS. Existing methods often involve trade-offs, and this exploration led to a technique leveraging the power of SVG.

Existing Approaches and Their Limitations

Traditionally, achieving rotated background images in CSS has involved several workarounds, each with its own set of challenges:

CSS Transforms: Using the transform: rotate() property. This rotates the entire element, including its content, which is often not the desired outcome.
Pseudo-elements: Employing ::before or ::after pseudo-elements to create a rotated background. While this allows rotating the background independently of the content, it can be complex to manage sizing and positioning. Additionally, if the html or body elements have a background color, pseudo-elements with a negative z-index may fall behind them.
Pre-rotated Images: Rotating the image using image editing software and then using the rotated image as the background. This is impractical for seamless patterns in most rotation angles or when dynamic canvas size is required.

CodePen Embed Fallback

The SVG Pattern Technique

Building on these insights, let’s now explore a method that leverages SVG to achieve rotated background patterns—a solution that delivers both flexibility and precise control.

At the core of this approach is the SVG <pattern> feature, a versatile tool that enables the creation of seamless, repeating background patterns. The <pattern> element defines a tileable area that can be used as a fill for other SVG shapes, allowing for intricate and scalable designs. By leveraging attributes such as patternTransform, you can easily manipulate these patterns with transformations like rotation, scaling, and translation, making it an ideal choice for dynamic and responsive backgrounds.

Draw the Pattern Using SVG ⸻ Begin by creating the desired pattern using SVG elements. This can include vector graphics or embedded bitmaps.


<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />

Wrap in a <pattern> Definition ⸻ Encapsulate the pattern within a <pattern> element inside the <defs> section of the SVG, specify the dimensions for the pattern, and use the patternTransform attribute to apply transformations, such as rotation.


<defs>


  <pattern id="star" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(20)">


    <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />


  </pattern>


</defs>

Create the Main SVG ⸻ Create a new SVG element without a viewBox attribute. Set the width and height to 100% to ensure it covers the entire area of the element. Then add a <rect> element to cover the entire SVG area, and set its fill attribute to reference the pattern defined in step 2.


<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">


  <defs>


    <pattern id="star" width="10" height="10" patternUnits="userSpaceOnUse" patternTransform="rotate(20)">


      <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2" />


    </pattern>


  </defs>


  <rect width="100%" height="100%" fill="url(#star)" />


</svg>

Encode and Use in CSS ⸻ Encode the SVG as a data URL. Use the data URL as the background-image in your CSS.


div {


  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='star' width='10' height='10' patternUnits='userSpaceOnUse' patternTransform='rotate(20)'%3E%3Cpolygon points='0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23star)' /%3E%3C/svg%3E");

}

Using this technique, the pattern background can be transformed on its own, while still behave like any other CSS background to enjoy other features like background stacking and blend mode settings.

This is an example of how a background using this technique could look like.

SVG Rotated Background Generator

You can also try it out using the generator below to create custom rotated background patterns with SVG. You can also adjust parameters such as pattern size, scaling, and rotation angle.

CodePen Embed Fallback

Rotated Background Patterns in CSS with SVG appeared first on 1A23 Blog.

Tìtsyul Amip Twenty Twenty-Five

2025-03-05 09:24:27

Tìtsyul Amip Twenty Twenty-Five is the next iteration of the 1A23 Studio theme. Similar to the previous iteration, E. R. @ Tìtsyul Amip, it still runs on WordPress. However, this time, since WordPress (Gutenberg) Site Editor is now relatively established, I decided to base off the new theme from the current default WordPress theme, Twenty Twenty-Five, hence the name.

Challenges

Despite the Site Editor gives you an almost WYSIWYG experience, with a wide range of established blocks ready to use, the downside is that those blocks are not as flexible as traditional WordPress architecture. Much less hooks and filters are made available in the built-in blocks making it harder to extend upon. With that, I had to rewrite (or rather copy-and-paste from Gutenberg) various built-in blocks for extensions. These are:

Reusable header and footer patterns background that recognizes the custom post types of the current page, based on the Group block.
Buttons and Button blocks with Iconify icon support and custom active page detection to serve as an alternative to the Navigation block.
Page Number block to render the current page number, based on the Pagination Pages block.
Next Page and Previous Page buttons with added icon, based on the built-in blocks with the same name.
Links list to show links field of custom post types.
Lyricova Quotes to render a random verse from Lyricova that has been in the site footer since forever ago.
Major-Minor Conditional Block and Landscape-Portrait Conditional Block to render a set of children blocks based on the Is Minor field of custom post types and the aspect ratio of the post’s featured image.

These blocks are packed as a plugin to be used together with the theme.

On top of that are CSS styles for everything that is not covered by Gutenberg’s style editor (which is quite a lot).

Tìtsyul Amip Twenty Twenty-Five appeared first on 1A23 Studio.

Sticker Sheet

2025-03-03 03:47:25

Sticker Sheet is an About-me page, but full of stickers.

This is what I actually wanted to build when I built the Userpage, but back then I didn’t really know how to build a page with zooming and panning.

Features

A sticker canvas with zooming and panning support.
Dark / light mode
Fully localizable: name, description, and even stickers themselves
Dynamic stickers running JavaScript logic
MDX and React components in descriptions

Main libraries used: React, Next.JS, shadcn/ui, react-zoom-pan-pinch, Vaul, MDX.

Sticker Sheet appeared first on 1A23 Studio.

Alt Text Helper

2025-02-05 00:30:36

Generate accurate and detailed alt text for your images using advanced AI technology. Perfect for social media managers, content creators, and accessibility advocates who want to make their content more inclusive.

Key Features

Powered by Leading AI Models – Choose from OpenAI, Azure OpenAI, Anthropic Claude, Google Gemini, or any OpenAI-compatible API
Seamless Integration – Share images directly from any app or select from your gallery
Customizable Prompts – Fine-tune the AI’s description style with custom prompts

Perfect for

Social media posts
Blog articles
Website content
Digital marketing materials
Educational resources
Accessibility compliance

Note
This app requires an API key from one of the supported AI services (OpenAI, Azure OpenAI, Anthropic Claude, Google Gemini, or other OpenAI-compatible providers). API usage may incur costs according to the service provider’s pricing.

Make your content more accessible today with Alt Text Helper – the smart way to generate image descriptions.

Join beta test

Visit https://groups.google.com/g/1a23-apk-closed-testing and join the group with your Google account
Visit https://play.google.com/apps/testing/studio1a23.altTextAi, log in with the same Google account and click “Join the program”
Visit Alt Text Helper – Apps on Google Play to install the app to your watch.

Alt Text Helper appeared first on 1A23 Studio.

i18n fails

2025-02-03 15:15:38

A collection of poorly carried out internationalization (i18n), localization (l10n), and translation of software user interfaces.

i18n fails is built on the Payload CMS framework.

i18n fails appeared first on 1A23 Studio.

Search Unicode (Flow Launcher)

2025-01-15 07:12:32

A set of Flow Launcher plugins to lookup and reverse lookup Unicode characters and emoji with their names. This is ported to Flow Launcher from Seach Unicode (Alfred).