Welcome to TalkGraphics.com
Page 4 of 9 FirstFirst ... 23456 ... LastLast
Results 31 to 40 of 90
  1. #31
    Join Date
    Oct 2006
    Location
    StPeters, MO USA
    Posts
    10,819

    Default Re: Seamless Tiling Background Challenge

    Quote Originally Posted by Initiostar View Post
    Here's a rework of a design with a little therapeutic twist: https://initiostar.co.uk/demo/svgSea/ and the one posted in the Challenge: https://initiostar.co.uk/demo/svgBg/

    Interesting sound effect if you open the first and the the second.

    Gary

    Love it Gary.
    Larry a.k.a wizard509

    Never give up. You will never fail, but you may find a lot of ways that don't work.

  2. #32
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Seamless Tiling Background Challenge

    Quote Originally Posted by Egg Bramhill View Post
    Just to save your eyes Gary:
    LINK
    Egg, sonmewhere the SVG got lost; I see a very large PNG.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  3. #33
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Info Re: Seamless Tiling Background Challenge

    Not really the Challenge, more a simple guide on how to create any of the seven frieze types.

    Essentially, all we can produce with SVG are touching rectangles and so are using the 'hop' frieze, the first page: SVG - Friezes..zip
    Unzip to a local folder and run the XAR file; the SVGs are linked to it already for Preview.

    You can still create complex patterns inside a box such that you can reproduce the 17 wallpaper patterns that exist on a flat surface.
    The complication is the art of slicing away to get down to the fundamental repeating block. Slicking through a shape with a Line width does not delete that line along the cut.
    I find converting Lines to shapes works with a 0px Line width.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  4. #34
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,895

    Default Re: Seamless Tiling Background Challenge

    Egg, somewhere the SVG got lost; I see a very large PNG.
    Indeed you did Acorn. For this one I used png as I'm finding many issues with applying svg fills.The earlier magenta image used an SVG but I'm having BIG issues with sizing these svg's. They either create gaps vertically or horizontally on resizing the image. Not an issue with bitmap images however.

    You can see this effect by opening LINK and using the browsers zoom function.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  5. #35
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Seamless Tiling Background Challenge

    Quote Originally Posted by Egg Bramhill View Post
    Indeed you did Acorn. For this one I used png as I'm finding many issues with applying svg fills.The earlier magenta image used an SVG but I'm having BIG issues with sizing these svg's. They either create gaps vertically or horizontally on resizing the image. Not an issue with bitmap images however.
    You can see this effect by opening LINK and using the browsers zoom function.
    Egg, I see that happening.

    Your SVG has a size of width="666.001" height="385.001".
    I trimmed these to width="666" height="385" and the lines were much reduced.

    I imported you SVG and back out again with XPro+ and got pt values instead of px!
    Again, it was less noticeable. I didn't need the Units included.

    Finally, I changed my version to 640x370 (both even) and it was all sweet.

    Back to your slighty modified SVG.
    I set background-size: 640px; in the CSS.
    I found only one zoom setting where I had a horizontal line.

    The issue is around the square root of 3.

    You SVG needs to be in this ratio: https://www.talkgraphics.com/showthr...967#post638967.
    With integer pixels the closest I can manage is 776 x 448. You can scale 50% to 388 x 224, another to 192 x 112 and another down to 96 x 56.

    I tried again with a full 776 x 448 px rectangle and set the background-size: 192px.
    All sweet.

    Exact even pixels seems to be the way to go.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  6. #36
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: Seamless Tiling Background Challenge

    Crosshatch

    http://gwpriester.xara.hosting/cross...tern/index.htm

    Also, how do I attach this script to the button?

    <script>
    <button onclick="location.reload();">Refresh Page</button>
    </script>

    I achieved this by linking to a duplicate page but I am sure there is a better way.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	crosshatch.png 
Views:	88 
Size:	16.1 KB 
ID:	130182  
    Attached Files Attached Files

  7. #37
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Default Re: Seamless Tiling Background Challenge

    Quote Originally Posted by gwpriester View Post
    Crosshatch

    http://gwpriester.xara.hosting/cross...tern/index.htm

    Also, how do I attach this script to the button?

    <script>
    <button onclick="location.reload();">Refresh Page</button>
    </script>

    I achieved this by linking to a duplicate page but I am sure there is a better way.
    Gary, just put index.htm as the link.

    Acorn
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  8. #38
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: Seamless Tiling Background Challenge

    Gary, just put index.htm as the link.
    Isn't that the same as # ?

    Apparently not.

  9. #39
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    17,746

    Info Re: Seamless Tiling Background Challenge

    Gary, I had to tweak your design.

    The basic pattern unit is:
    Click image for larger version. 

Name:	Gyrator.png 
Views:	91 
Size:	27.5 KB 
ID:	130186
    I made this with 4px, 64px & 4px boxes, grouped and Skewed to give sharp edges.
    Copies were coloured and rotated.

    The repeat can simply be slid in place across and down.
    I centred the shapes so the inner empty hexagon and triangles were all balanced.

    My design file is: SVG - Gary's Mesh.xar

    The SVG as attached separately.

    Acorn
    Attached Files Attached Files
    Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat

  10. #40
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,487

    Default Re: Seamless Tiling Background Challenge

    I based by design on a hexagon which explains my pattern. Yours is better. That said, you had my pattern for a template.

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •