Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .opacity-one { fill: url(#pattern-one); } .opacity-two { fill: url(#pattern-two); } </style> </head> <body> <h3> Fill </h3> <div class="container"> <svg viewBox="0 0 800 800"> <defs> <pattern id="pattern-one" viewBox="0, 0, 11, 11" width="15%" height="15%"> <circle r="10" fill="green" /> </pattern> <pattern id="pattern-two" viewBox="0, 0, 9, 9" width="15%" height="15%"> <rect height="4" width="4" fill="red" /> </pattern> </defs> <circle class="opacity-one" cx="150" cy="150" r="55" /> <circle class="opacity-two" cx="300" cy="150" r="55" /> </svg> </div> </body> </html>